# Component/DatePickerV2/DatePickerV2

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `value` | `CalendarItem[]` | Yes |  |  |
| `onChange` | `(value: CalendarItem[]) => void` | Yes |  |  |
| `multiple` | `boolean | undefined` | No |  | 달력이 여러 날짜를 선택할 수 있는지 설정합니다. |
| `unit` | `undefined "month" "week" "day" "decade" "year" "minute" "second"` | No | day | 달력의 최소 시간 단위를 설정합니다. 시간을 선택하려면 "minute" 또는 "second"를 지정합니다. |
| `target` | `undefined "from" "to" "all"` | No |  | 달력이 편집할 수 있는 항목을 지정합니다. - 지정하지 않으면 range 입력으로 구성되어 시작일, 종료일을 차례대로 선택할 수 있습니다. - "from"으로 지정하면 range 입력에서 시작일만 선택할 수 있고, 종료일은 비활성화됩니다. - "to"로 지정하면 range 입력에서 종료일만 선택할 수 있고, 시작일은 비활성화됩니다. - "all"로 지정하면 단일 날짜 선택으로 인식해서, 시작일/종료일을 모두 한 번에 선택합니다. |
| `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
| `size` | `undefined "xsmall" "medium" "small" "large"` | No | medium | Input size를 지정할 수 있습니다. |
| `error` | `boolean | undefined` | No |  | Input의 에러 표시 여부를 지정합니다. |
| `disabled` | `boolean | undefined` | No |  |  |
| `className` | `string | undefined` | No |  |  |
| `placeholder` | `string | undefined` | No |  |  |
| `displayMode` | `undefined "bottomSheet" "popover" "calendar"` | No | popover | 달력이 노출되는 모드를 지정할 수 있습니다.   - 'bottomSheet'일 경우 Footer 영역(취소/확인)은 고정 노출됩니다. |
| `showRemoveButton` | `boolean | undefined` | No | false | Input 우측 입력한 value를 지울 수 있는 remove 버튼 사용 유무   - 입력된 value가 없다면 기본 달력 아이콘이 노출됩니다.   - 입력된 value가 있다면 마우스 호버시 remove 버튼이 노출됩니다. |
| `zIndex` | `number | undefined` | No | 1035 | 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다. |
| `numberOfMonths` | `number | undefined` | No | 1 | 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다. |
| `showDatePreset` | `boolean | undefined` | No | false | 좌측 팝오버 DatePreset 사용 유무 |
| `showRadioGroupDatePreset` | `boolean | undefined` | No | false | RadioGroup DatePreset 사용 유무 |
| `showTodayButton` | `boolean | undefined` | No | !showDatePreset | TodayButton 사용 유무 - displayMode 'bottomSheet' 인 경우 false - showDatePreset true 인 경우 false |
| `showControls` | `boolean | undefined` | No |  | 하단에 확인/취소 버튼을 강제로 보여줄 지를 지정합니다. |
| `showRange` | `boolean | undefined` | No |  | 단일 날짜 선택의 경우에도 날짜 범위를 강제로 노출할 지 여부를 지정합니다. |
| `presets` | `CalendarPresetItem[] | undefined` | No |  | showDatePreset/showRadioGroupDatePreset을 true로 지정했을 때 보여줄 preset 목록을 오버라이드할 수 있습니다. |
| `constraint` | `CalendarConstraint | undefined` | No | constraintTrue() | 캘린더에 사용할 날짜 제약 조건을 지정합니다. |
| `defaultOffset` | `[Date, Date] | undefined` | No |  | 사용자가 날짜를 처음 선택할 때, from/to에 대해 어떤 시각을 기본값으로 정의할 지 지정합니다. |
| `defaultCursorItem` | `Partial<CalendarItem> | null | undefined` | No |  | value와 별개로 입력창에 미리 표시할 커서 아이템을 지정합니다. 완성되지 않은 날짜 범위를 표시하기 위해 사용합니다. |
| `timeDisabledWhenEmpty` | `boolean | undefined` | No |  | 날짜 선택 없이 시간 선택이 불가능하도록 처리합니다. |
| `timeDisabledTooltip` | `string | undefined` | No |  | 날짜 선택을 하지 않아서 시간 선택이 불가능할 때 보여줄 툴팁을 지정합니다. |
| `format` | `string | undefined` | No |  | 날짜 입력 포맷을 unit과 다른 값으로 지정합니다. date-fns의 format 형식을 사용합니다. |
| `todayDisabledTooltip` | `string | undefined` | No |  | 오늘 날짜 버튼을 눌렀을 때 보여줄 툴팁을 지정합니다. |
| `tolerateInvalidValues` | `boolean | undefined` | No |  | 프리셋이나 props로 전달된 값에 대해서 validation을 진행하지 않도록 합니다. 대신, 사용자가 수정하는 순간 validation을 진행합니다. 레거시 datepicker v1과 같은 동작을 지원하기 위해 제공하는 플래그입니다. 일반적인 상황에서는 사용하지 않는 것이 권장됩니다. |
| `onOpen` | `(() => void) | undefined` | No |  |  |
| `onClose` | `(() => void) | undefined` | No |  |  |
