# Component/DatePickerV2/DatePickerV2

> Props: component-datepickerv2-datepickerv2.props.txt

## Examples


### Day

```tsx
{
  args: {
    unit: 'day',
    target: 'all'
  },
  ...Template
}
```

### Day Bottom Sheet

```tsx
{
  args: {
    unit: 'day',
    displayMode: 'bottomSheet'
  },
  ...Template
}
```

### Day Calendar

```tsx
{
  args: {
    unit: 'day',
    displayMode: 'calendar',
    showTodayButton: false
  },
  ...Template
}
```

### Day Format Override

```tsx
{
  args: {
    unit: 'day',
    target: 'all',
    format: 'yyyy.MM.dd HH:mm:ss'
  },
  ...Template
}
```

### Day Multiple

```tsx
{
  args: {
    unit: 'day',
    target: 'all',
    multiple: true
  },
  ...Template
}
```

### Day Preset

```tsx
{
  args: {
    unit: 'day',
    showDatePreset: true,
    showRadioGroupDatePreset: true
  },
  ...Template
}
```

### Day Range

```tsx
{
  args: {
    unit: 'day'
  },
  ...Template
}
```

### Day Range Max Duration

```tsx
{
  args: {
    unit: 'day',
    constraint: constraintMaxDuration({
      days: 14
    }),
    showDatePreset: true,
    showRadioGroupDatePreset: true,
    presets: [{
      label: '1개월',
      interval: {
        from: sub(startOfDay(new Date()), {
          months: 1
        }),
        to: add(startOfDay(new Date()), {
          days: 1
        })
      }
    }, {
      label: '오늘',
      interval: {
        from: startOfDay(new Date()),
        to: add(startOfDay(new Date()), {
          days: 1
        })
      }
    }]
  },
  ...Template
}
```

### Day Today Disabled

```tsx
{
  args: {
    unit: 'day',
    target: 'all',
    constraint: constraintMin(add(new Date(), {
      days: 1
    })),
    todayDisabledTooltip: '오늘은 선택할 수 없습니다.'
  },
  render: args => {
    const [value, setValue] = useState<CalendarItem[]>([]);
    const [value2, setValue2] = useState<CalendarItem[]>([]);
    const [value3, setValue3] = useState<CalendarItem[]>([]);
    return <Stack direction='column' gap={16}>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>Day + 취소/확인 버튼 미노출</BaseText>
          <DatePickerV2 {...args} value={value} onChange={setValue} />
          <BaseText data-testid='selected-date-value'>선택된 날짜: {JSON.stringify(value, null, 2)}</BaseText>
        </Stack>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>Day + 취소/확인 버튼 노출</BaseText>
          <DatePickerV2 {...args} value={value2} onChange={setValue2} showControls todayDisabledTooltip='종료일은 오늘로 설정할 수 없습니다.' />
          <BaseText data-testid='selected-date-value'>선택된 날짜: {JSON.stringify(value2, null, 2)}</BaseText>
        </Stack>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>Range + 취소/확인 버튼 노출</BaseText>
          <DatePickerV2 {...args} unit='week' value={value3} onChange={setValue3} constraint={constraintAnd(constraintMin(add(new Date(), {
          days: 1
        })), constraintMax(add(new Date(), {
          days: 1
        })))} showControls />
          <BaseText data-testid='selected-date-value'>선택된 날짜: {JSON.stringify(value3, null, 2)}</BaseText>
        </Stack>
      </Stack>;
  }
}
```

### Error

```tsx
{
  args: {
    unit: 'day',
    constraint: constraintBetween(add(new Date(), {
      days: 1
    }), add(new Date(), {
      days: 7
    }))
  },
  render: args => {
    const [value, setValue] = useState<CalendarItem[]>([{
      id: '',
      from: add(new Date(), {
        days: 2
      }),
      to: add(new Date(), {
        days: 4
      })
    }]);
    const [value2, setValue2] = useState<CalendarItem[]>([{
      id: '',
      from: add(new Date(), {
        days: -2
      }),
      to: add(new Date(), {
        days: 4
      })
    }]);
    const [value3, setValue3] = useState<CalendarItem[]>([{
      id: '',
      from: add(new Date(), {
        days: 2
      }),
      to: add(new Date(), {
        days: 8
      })
    }]);
    const [value4, setValue4] = useState<CalendarItem[]>([{
      id: '',
      from: add(new Date(), {
        days: -2
      }),
      to: add(new Date(), {
        days: 8
      })
    }]);
    return <Stack direction='column' gap={16}>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>강제 error</BaseText>
          <DatePickerV2 {...args} value={value} onChange={setValue} error />
        </Stack>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>from 오류</BaseText>
          <DatePickerV2 {...args} value={value2} onChange={setValue2} />
        </Stack>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>to 오류</BaseText>
          <DatePickerV2 {...args} value={value3} onChange={setValue3} />
        </Stack>
        <Stack direction='column' gap={16}>
          <BaseText kind='Body_13_Bold'>모두 오류</BaseText>
          <DatePickerV2 {...args} value={value4} onChange={setValue4} />
        </Stack>
      </Stack>;
  }
}
```

### Instant

```tsx
{
  args: {
    unit: 'minute',
    target: 'all',
    format: 'yyyy.MM.dd HH:mm:ss.SSS',
    value: [{
      id: '',
      from: new Date(),
      to: new Date()
    }]
  },
  ...Template
}
```

### Minute

```tsx
{
  args: {
    unit: 'minute',
    target: 'all'
  },
  ...Template
}
```

### Minute Bottom Sheet

```tsx
{
  args: {
    unit: 'minute',
    target: 'all',
    displayMode: 'bottomSheet'
  },
  ...Template
}
```

### Minute Range

```tsx
{
  args: {
    unit: 'minute'
  },
  ...Template
}
```

### Minute Range Bottom Sheet

```tsx
{
  args: {
    unit: 'minute',
    displayMode: 'bottomSheet'
  },
  ...Template
}
```

### Minute Range With Constraint

```tsx
{
  args: {
    unit: 'minute',
    constraint: constraintAnd(constraintMin(startOfMonth(new Date())), constraintOnlyWeekdays(), constraintTimeMin(9, 30, 0), constraintTimeMax(18, 30, 0), constraintIncrementMinute(10), constraintNot(constraintAnd(constraintTimeMin(12, 0, 0), constraintTimeMax(13, 0, 0))), constraintEnforceContinuous(constraintAnd(constraintMaxSeconds(86400 * 5), constraintNot(constraintOnlyDaysOfTheWeek([3])))))
  },
  ...Template
}
```

### Minute With Increment Minute

```tsx
{
  args: {
    unit: 'minute',
    target: 'all',
    constraint: constraintIncrementMinute(10)
  },
  ...Template
}
```

### Month

```tsx
{
  args: {
    unit: 'month',
    target: 'all'
  },
  ...Template
}
```

### Month Show Range

```tsx
{
  args: {
    unit: 'month',
    target: 'all',
    format: 'yyyy.MM.dd',
    showRange: true
  },
  ...Template
}
```

### Presets

```tsx
{
  args: {
    unit: 'day',
    showDatePreset: true,
    showRadioGroupDatePreset: true,
    presets: [{
      label: '1개월',
      interval: {
        from: sub(startOfDay(new Date()), {
          months: 1
        }),
        to: add(startOfDay(new Date()), {
          days: 1
        })
      }
    }, {
      label: '오늘',
      interval: {
        from: startOfDay(new Date()),
        to: add(startOfDay(new Date()), {
          days: 1
        })
      }
    }]
  },
  ...Template
}
```

### Primary

```tsx
{
  render: (args) => {
    const [value, setValue] = useState<CalendarItem[]>(args.value ?? []);

    return (
      <Stack direction='column' gap={16}>
        <DatePickerV2 {...args} value={value} onChange={setValue} />
        <BaseText data-testid='selected-date-value'>선택된 날짜: {JSON.stringify(value, null, 2)}</BaseText>
        <BaseText>
          <Ul>
            {value.map((item) => (
              <li key={item.id}>
                {format(item.from, 'yyyy.MM.dd HH:mm:ss.SSS')} ~ {format(item.to, 'yyyy.MM.dd HH:mm:ss.SSS')}
              </li>
            ))}
          </Ul>
        </BaseText>
      </Stack>
    );
  },
  args: {}
}
```

### Second

```tsx
{
  args: {
    unit: 'second',
    target: 'all'
  },
  ...Template
}
```

### Second Range

```tsx
{
  args: {
    unit: 'second'
  },
  ...Template
}
```

### Week

```tsx
{
  args: {
    unit: 'week',
    target: 'all'
  },
  ...Template
}
```