# 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
  }
}
```

### Mobile

displayMode='bottomSheet'일 때 Input을 누르면 BottomSheet가 열리고, 시/분을 SelectChip 행으로 선택합니다. 시(또는 분)만 선택하면 반대 축이 자동으로 채워져 확인 버튼이 활성화됩니다(데스크탑과 동일).

```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: {
    displayMode: 'bottomSheet'
  },
  parameters: {
    docs: {
      description: {
        story: "displayMode='bottomSheet'일 때 Input을 누르면 BottomSheet가 열리고, 시/분을 SelectChip 행으로 선택합니다. 시(또는 분)만 선택하면 반대 축이 자동으로 채워져 확인 버튼이 활성화됩니다(데스크탑과 동일)."
      }
    }
  }
}
```

### Mobile With 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: {
    displayMode: 'bottomSheet',
    showRemoveButton: true
  }
}
```

### 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>;
  }
}
```