DatePicker

日期选择框

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

日期选择器

<DatePicker />

1
<DatePicker />
2

范围选择器

通过 DatePicker.RangePicker 使用时间范围选择器

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

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

时间选择器

点击TimePicker，然后可以在浮层中选择或者输入某一时间。

<TimePicker />

1
<TimePicker />
2

受控组件

value 和 onChange 需要配合使用。

() => {
  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

布局

常规

信息录入

数据展示

反馈

DatePicker

基础用法

范围选择器

时间选择器

受控组件