본문으로 건너뛰기

DatePicker

DatePicker 컴포넌트는 사용자가 날짜를 선택할 수 있는 입력 컴포넌트입니다. flatpickr 라이브러리를 기반으로 하며, 한국어 로케일을 지원합니다. 다양한 크기 옵션과 오류 상태 표시 기능을 제공합니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 DatePicker 컴포넌트의 모습을 확인해보세요.

sizeselect
DatePicker의 크기
currentDatestring
현재 선택된 날짜 (YYYY-MM-DD 형식)
shouldFocusboolean
자동 포커스 여부
disabledboolean
비활성화 상태 여부

기본 사용법​

import { DatePicker } from '@ncds/ui-admin';

function App() {
  const [date, setDate] = useState('2024-03-20');

  return <DatePicker currentDate={date} onChangeDate={setDate} />;
}

Props​

PropTypeDefaultDescription
size'sm' | 'md''sm'DatePicker의 크기를 지정합니다.
shouldFocusbooleantrue컴포넌트 마운트 시 자동 포커스 여부를 지정합니다.
currentDatestring필수현재 선택된 날짜 (YYYY-MM-DD 형식)
datePickerOptionsOptions-flatpickr의 추가 옵션을 지정합니다.
onChangeDate(date: string) => void필수날짜가 변경될 때 호출되는 콜백 함수

예제​

크기 변형​

비활성화 상태​

커스텀 옵션​

HTML 버전​

DatePicker Component argument

속성타입필수설명
wrapperHTMLElement✓DatePicker가 렌더링될 DOM 요소
optionsDatePickerProps✓size, buttons, DatePicker 설정 옵션 배열

DatePickerProps

속성타입필수설명
elementstring✓DatePicker의 고유 식별자
size'sm' | 'md'✓DatePicker의 크기
optionsOptions✓flatpickr 옵션
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<!-- flatpickr css -->
<link rel="stylesheet" href="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.0/main.min.css" />
<!-- ncds css -->
<script src="https://fe-sdk.cdn-nhncommerce.com/@ncds/ui-admin/1.0/main.min.js"></script>
<!-- ncds js -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- flatpickr js -->
<script src="https://npmcdn.com/flatpickr/dist/l10n/ko.js"></script>
<!-- flatpickr locale -->

<div id="datepicker-container"></div>

<script>
  const today = new Date();
  document.addEventListener('DOMContentLoaded', function () {
    const datePicker = new ncua.DatePicker(document.querySelector('#datepicker-container'), {
      size: 'sm',
      datePickerOptions: [
        {
          element: 'start-date',
          options: {
            mode: 'single',
            static: true,
            defaultDate: today,
            dateFormat: 'Y-m-d',
            clickOpens: true,
            allowInvalidPreload: true,
            locale: 'ko',
            onChange: (selectedDates, dateStr, instance) => {
              console.log(selectedDates, dateStr, instance);
              startDate = dateStr;
            },
          },
        },
      ],
    });

    // datepicker 날짜 가져오기
    console.log(datePicker.getDates());

    // datepicker 날짜 설정하기
    datePicker.setDate(['2025-07-01']);
  });
</script>
  • flatpickr에 대한 자세한 사항은 링크를 참조 부탁드립니다.