Y-M-D 드롭다운 날짜 선택기를 위한 React 라이브러리

연도, 월, 일 드롭다운 UI용 React 라이브러리인 react-ymd-date-select 을 만들었습니다.



whitphx/react-ymd-date-select - GitHub

캘린더 UI가 아닌 위의 스크린샷과 같은 Y-M-D 드롭다운 UI가 필요할 때가 있습니다. 예를 들어, 사용자에게 생년월일을 선택하도록 요청할 때 Y-M-D 드롭다운은 달력 위젯이 일반적으로 나이가 많을수록 찾기 어려우며 반대로 요일을 직관적으로 표시하는 등의 이점이 필요하지 않기 때문에 선호됩니다.

실제로 이러한 상황에 직면했지만 내 요구 사항을 충족하는 기존 패키지를 찾을 수 없었습니다. 그에 반해 직접 구축하는 것은 간단해 보이지만 실제로는 다음과 같은 몇 가지 너트가 있습니다.

연도, 월, 일 숫자 및 레이블의 배열을 생성합니다.

Y-M-D 조합을 검증합니다. 예를 들어 2022-02-29(2022년 2월 29일)은 유효하지 않은 조합입니다. 해당 날짜는 존재하지 않습니다.

Y, M, D<select >의 3개 값을 하나의 날짜 문자열로 결합하고 이를 양식 구성 요소 상태 또는 양식 라이브러리(예: React Hook Form ~ value 및 onChange 소품.

때로는 다음과 같은 더 많은 요구 사항이 있습니다.

기본 연도를 설정합니다.

연도와 월만 표시하려면 선택합니다(일 드롭다운 숨기기).

그래서 이를 처리하기 위해 라이브러리 react-ymd-date-select 를 만들었습니다.

이 라이브러리에서 제공하는 useDateSelect() 후크를 사용하면 번거로운 논리가 후크에 캡슐화되었으므로 보기 동작에 초점을 맞춰 아래 샘플과 같은 원본 Y-M-D 구성 요소를 만들 수 있습니다.
value prop과 onChange()의 argument는 ISO8601 형식인 yyyy-MM-DD 형식의 문자열로, native <input type="date" /> 값과 동일합니다. 참조https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#value

자세한 내용은 the demo page을 참조하십시오.

import { useState } from "react";
import { useDateSelect } from "react-ymd-date-select";

interface CustomDateSelectProps {
  onChange: (value: string) => void;
  value: string;
}
function CustomDateSelect(props: CustomDateSelectProps) {
  const dateSelect = useDateSelect(props.value, props.onChange);

  return (
    <>
      <input
        type="date"
        value={dateSelect.dateValue || ""}
        onChange={dateSelect.onDateChange}
      />
      <label>
        Year
        <select value={dateSelect.yearValue} onChange={dateSelect.onYearChange}>
          {dateSelect.yearOptions.map((yearOption) => (
            <option key={yearOption.value} value={yearOption.value}>
              {yearOption.label}
            </option>
          ))}
        </select>
      </label>
      <label>
        Month
        <select
          value={dateSelect.monthValue}
          onChange={dateSelect.onMonthChange}
        >
          {dateSelect.monthOptions.map((monthOption) => (
            <option key={monthOption.value} value={monthOption.value}>
              {monthOption.label}
            </option>
          ))}
        </select>
      </label>
      <label>
        Day
        <select value={dateSelect.dayValue} onChange={dateSelect.onDayChange}>
          {dateSelect.dayOptions.map((dayOption) => (
            <option key={dayOption.value} value={dayOption.value}>
              {dayOption.label}
            </option>
          ))}
        </select>
      </label>
    </>
  );
}