# Component/TimePicker

> Props: component-timepicker.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  },
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const [value2, setValue2] = useState<Date>();
    const [value3, setValue3] = useState<Date | null>(new Date());
    const [value4, setValue4] = useState<Date | null>();
    const [value5, setValue5] = useState<Date | null>(set(new Date(), {
      minutes: 10
    }));
    const disabledTime = (current: Date | null) => {
      return {
        disabledHours: () => Array.from(Array(current?.getHours() ?? 0), (_, i) => i),
        disabledMinutes: () => Array.from(Array(current?.getMinutes() ?? 0), (_, i) => i)
      };
    };
    return <Stack direction='column' gap={20}>
        <BaseText kind='Body_13_Bold'>TimePicker 전체 Disabled</BaseText>
        <TimePicker {...args} size='medium' value={value ?? undefined} onChange={time => setValue(time)} disabled />
        <BaseText kind='Body_13_Bold'>TimePicker 시간/분 Disabled</BaseText>
        <TimePicker {...args} size='medium' value={value2} onChange={time => setValue2(time ?? undefined)} disabledTime={disabledTime} />
        <BaseText kind='Body_13_Bold'>TimePicker 시간/분 Disabled + hideDisabledMinutes</BaseText>
        <TimePicker {...args} size='medium' value={value2} onChange={time => setValue2(time ?? undefined)} disabledTime={disabledTime} hideDisabledMinutes />
        <BaseText kind='Body_13_Bold'>TimePicker 시간/분 Disabled + 선택 불가능한 시간이 선택할 경우</BaseText>
        <TimePicker {...args} size='medium' value={value3 ?? undefined} onChange={time => setValue3(time)} disabledTime={disabledTime} />
        <BaseText kind='Body_13_Bold'>TimePicker 시간/분 Disabled + incrementMinute</BaseText>
        <TimePicker {...args} size='medium' value={value4 ?? undefined} onChange={time => setValue4(time)} disabledTime={disabledTime} incrementMinute={10} />
        <BaseText kind='Body_13_Bold'>
          TimePicker 시간/분 Disabled + 선택 불가능한 시간이 선택할 경우 + incrementMinute
        </BaseText>
        <TimePicker {...args} size='medium' value={value5 ?? undefined} onChange={time => setValue5(time)} disabledTime={() => {
        return {
          disabledMinutes: () => [0, 10, 20]
        };
      }} incrementMinute={10} />
      </Stack>;
  }
}
```

### Error

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  },
  args: {
    error: true
  }
}
```

### Full Width

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  },
  args: {
    fill: true
  }
}
```

### Increment Minute

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  },
  args: {
    incrementMinute: 5
  }
}
```

### Show Remove Button

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimePicker {...args} value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  },
  args: {
    showRemoveButton: true
  }
}
```

### Size

```tsx
{
  render: args => {
    const [value, setValue] = useState<Date | null>();
    const handleChange = (newValue: Date | null) => {
      setValue(newValue);
    };
    return <Stack direction='column' gap={20}>
        <TimePicker {...args} size='large' value={value ?? undefined} onChange={handleChange} />
        <TimePicker {...args} size='medium' value={value ?? undefined} onChange={handleChange} />
        <TimePicker {...args} size='small' value={value ?? undefined} onChange={handleChange} />
        <TimePicker {...args} size='xsmall' value={value ?? undefined} onChange={handleChange} />
      </Stack>;
  }
}
```