# Component/TimeRangePicker

> Props: component-timerangepicker.props.txt

## Examples


### Base

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

### Disabled

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

### Error

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

### Full Width

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

### Increment Minute

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

### Mobile

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

```tsx
{
  render: args => {
    const [value, setValue] = useState<TimeRange | undefined>(args.value);
    const handleChange = (start: Date | null, end?: Date | null) => {
      setValue({
        from: start ?? null,
        to: end ?? null
      });
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimeRangePicker {...args} value={value} 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<TimeRange | undefined>(args.value);
    const handleChange = (start: Date | null, end?: Date | null) => {
      setValue({
        from: start ?? null,
        to: end ?? null
      });
    };
    return <Stack direction='column'>
        {args.hasOwnProperty('incrementMinute') && <BaseText>incrementMinute: {args.incrementMinute}배수 단위로 분 설정</BaseText>}
        <TimeRangePicker {...args} value={value} onChange={handleChange} />
      </Stack>;
  },
  args: {
    displayMode: 'bottomSheet',
    showRemoveButton: true
  }
}
```

### Show Remove Button

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

### Size

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