DatePicker

To select or input a date.

Import: import { DatePicker } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

DatePicker

<DatePicker />

1
<DatePicker />
2

Range Picker

Use time range picker with DatePicker.RangePicker.

() => {
  const { RangePicker } = DatePicker;
  return (
    <RangePicker />
  )
}

1
() => {
2
  const { RangePicker } = DatePicker;
3
  return (
4
    <RangePicker />
5
  )
6
}
7

Time Picker

Click TimePicker, and then we could select or input a time in panel.

<TimePicker />

1
<TimePicker />
2

Under Control

value and onChange should be used together.

() => {
  const [value,setValue] = React.useState(null);
  const onChange = time => {
    setValue(time)
  }
  return <TimePicker value={value} onChange={onChange} />;
}

1
() => {
2
  const [value,setValue] = React.useState(null);
3
  const onChange = time => {
4
    setValue(time)
5
  }
6
  return <TimePicker value={value} onChange={onChange} />;
7
}
8