RangeDatePicker

RangeDatePicker 컴포넌트는 시작일과 종료일을 한 쌍으로 선택할 수 있는 날짜 범위 선택 컴포넌트입니다. 기간 제한, 날짜 유효성 검사, 사용자 정의 알림 등 다양한 날짜 범위 입력 시나리오에 활용할 수 있습니다.

기본 사용법

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

function App() {
  const [start, setStart] = useState('2024-01-01');
  const [end, setEnd] = useState('2024-01-02');
  return (
    <RangeDatePicker
      startDateOptions={{
        currentDate: start,
        onChangeDate: setStart,
      }}
      endDateOptions={{
        currentDate: end,
        onChangeDate: setEnd,
      }}
    />
  );
}

-

-

Props

Prop	Type	Default	Description
startDateOptions	DatePickerProps	-	시작일 DatePicker에 전달할 props 객체
endDateOptions	DatePickerProps	-	종료일 DatePicker에 전달할 props 객체
validationOption	{ initDate?: { startDate?: string; endDate?: string; }; setting?: { unit: unitOfTime.Diff; period: number; } }	-	날짜 유효성 및 기간 제한 옵션. 예: 최대 1개월 이내만 선택 가능 등
onDateValidation	(params: { type: "start" | "end"; errorType: "period" | "overlap" | null; newDate: string; currentDate: string; }) => void	-	날짜 유효성 검사 실패 시 호출되는 콜백 함수. params 객체는 다음과 같은 속성을 가집니다: - type: 유효성 검사가 실패한 날짜 선택기의 종류 ('start': 시작일, 'end': 종료일) - errorType: 유효성 검사 실패 유형 ('period': 기간 제한 초과, 'overlap': 시작일 (종료일)이 종료일 (시작일)보다 늦음, null: 유효성 검사 통과 한 경우') - newDate: 새로 선택한 날짜 - currentDate: 현재 설정된 날짜

상세 예제

기간 제한 옵션 사용

-

-

HTML 버전

DatePickerProps

속성	타입	필수	설명
wrapper	HTMLElement	✓	DatePicker가 렌더링될 DOM 요소
datePickerOptions	DatePickerOption[]	✓	DatePicker 설정 옵션 배열

DatePickerOption

속성	타입	필수	설명
element	string	✓	DatePicker의 고유 식별자
size	'sm' | 'md'	✓	DatePicker의 크기
options	Options	✓	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 wrapper = document.getElementById('date-range-picker-wrapper');
    document.addEventListener('DOMContentLoaded', function () {

      const datePicker = new ncua.DatePicker(
        wrapper,
        {
          size: 'sm',
          datePickerOptions: [
            {
              element: 'start-date',
              size: 'md',
              options: {
                dateFormat: 'Y-m-d',
                locale: 'ko',
                allowInput: true,
                altInput: true,
                altFormat: 'Y년 m월 d일',
              },
            },
            {
              element: 'end-date',
              size: 'md',
              options: {
                dateFormat: 'Y-m-d',
                locale: 'ko',
                allowInput: true,
                altInput: true,
                altFormat: 'Y년 m월 d일',
              },
            },
          ],
        }
      );
    });
</script>

• flatpickr에 대한 자세한 사항은 링크를 참조 부탁드립니다.