DatePickerView 选择器

DatePickerView 的功能类似于 DatePicker ,但它是直接渲染在区域中,而不是弹出窗口。

代码演示

选择器

  1. import { DatePickerView } from 'antd-mobile';
  2. import enUs from 'antd-mobile/lib/date-picker-view/locale/en_US';
  3. class DatePickerViewExample extends React.Component {
  4. state = {
  5. value: null,
  6. };
  7. onChange = (value) => {
  8. console.log(value);
  9. this.setState({ value });
  10. };
  11. onValueChange = (...args) => {
  12. console.log(args);
  13. };
  14. render() {
  15. return (<div>
  16. <div className="sub-title">Start datetime</div>
  17. <DatePickerView
  18. value={this.state.value}
  19. onChange={this.onChange}
  20. onValueChange={this.onValueChange}
  21. />
  22. <div className="sub-title">End datetime</div>
  23. <DatePickerView
  24. locale={enUs}
  25. value={this.state.value}
  26. onChange={this.onChange}
  27. onValueChange={this.onValueChange}
  28. />
  29. </div>);
  30. }
  31. }
  32. ReactDOM.render(<DatePickerViewExample />, mountNode);
  1. .sub-title {
  2. margin: 8px;
  3. }

DatePickerView选择器 - 图1

API

属性说明类型默认值
mode日期选择的类型, 可以是日期date,时间time,日期+时间datetime,年year,月monthStringdate
value当前选中时间Date
minDate最小可选日期Date2000-1-1
maxDate最大可选日期Date2030-1-1
use12Hours12小时制Booleanfalse
minuteStep分钟数递增步长设置Number1
locale国际化,可覆盖全局LocaleProvider的配置Object: {DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText }-
disabled是否不可用Booleanfalse
onChange时间发生变化的回调函数(date: Object): void-
onValueChange每列 picker 改变时的回调(vals: any, index: number) => void-