DatePicker 日期选择

定义／Definition

日期时间选择器展示关于日期和时间的组件，比如小时，分钟，天，以及年。使用日期时间选择器来让用户选择时间，而不是让用户自己输入一个包含了日期、时间等多个部分的时间值。

规则 / Rule

  • 最多可以展示5个独立的滑轮，每一个滑轮表示一个不同的值，比如月份或小时等；

  • 在每个滑轮的中央使用深色字体来表示当前选中的值；

  • 日期时间选择器的大小与iPhone键盘的大小相同，并且不可更改。

代码演示

基本

日期时间选择示例 

  1. import { DatePicker, List } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  3. import moment from 'moment';
  4. import enUs from 'antd-mobile/components/date-picker/locale/en_US';
  6. let Test = React.createClass({
  7.   render() {
  8.     const { getFieldProps } = this.props.form;
  9.     const now = moment();
  10.     now.locale('en-gb').utcOffset(0);
  11.     return (<div>
  12.       <List>
  13.         <List.Header>选择时间</List.Header>
  14.         <List.Body>
  15.           <DatePicker
  16.             className="am-date-picker"
  17.             mode="date"
  18.             title="选择日期"
  19.             extra="可选,小于结束日期"
  20.             {...getFieldProps('date1', {
  21.               initialValue: (this.date1 || (this.date1 = moment('2015-08-06', 'YYYY-MM-DD'))),
  22.             })}
  23.             minDate={this.date1MinDate || (this.date1MinDate = moment('2015-08-06', 'YYYY-MM-DD'))}
  24.             maxDate={this.date1MaxDate || (this.date1MaxDate = moment('2016-12-03', 'YYYY-MM-DD'))}
  25.           >
  26.             <List.Item arrow="horizontal">日期</List.Item>
  27.           </DatePicker>
  28.           <DatePicker mode="time" {...getFieldProps('time1')}>
  29.             <List.Item arrow="horizontal">时间,不限定上下限</List.Item>
  30.           </DatePicker>
  31.           <DatePicker mode="time" {...getFieldProps('time')}
  32.             minDate={this.timeMinDate || (this.timeMinDate = moment('00:30', 'HH:mm'))}
  33.             maxDate={this.timeMaxDate || (this.timeMaxDate = moment('22:00', 'HH:mm'))}
  34.           >
  35.             <List.Item arrow="horizontal">时间</List.Item>
  36.           </DatePicker>
  37.           <DatePicker
  38.             mode="datetime"
  39.             {...getFieldProps('datetime')}
  40.           >
  41.             <List.Item arrow="horizontal">日期+时间</List.Item>
  42.           </DatePicker>
  43.           <DatePicker
  44.             mode="datetime"
  45.             format={val => val.format('YYYY-MM-DD + HH:mm')}
  46.             okText="Ok"
  47.             dismissText="Cancel"
  48.             locale={enUs}
  49.             {...getFieldProps('customformat', {
  50.               initialValue: now,
  51.             })}
  52.           >
  53.             <List.Item arrow="horizontal">datetime(en_US)</List.Item>
  54.           </DatePicker>
  55.         </List.Body>
  56.       </List>
  57.     </div>);
  58.   },
  59. });
  61. Test = createForm()(Test);
  63. ReactDOM.render(<Test />, mountNode);

DatePicker日期选择 - 图1

API

成员说明类型默认值
mode日期选择的类型,可以是日期date、时间time、日期+时间datetimeStringdate
value当前选中时间,各种mode下格式分别为:yyyy-MM-dd、HH:mm、yyyy-MM-dd HH:mmmoment无
minDate最小可选日期,格式同valuemoment-
maxDate最大可选日期,格式同valuemoment-
onChange时间发生变化的回调function(date)无
locale国际化配置 (可自行构造，结构为 {year, month, day, hour, minute})ObjectDatePicker.locale.zh_CN
okText选中的文案String确定
dismissText取消选中的文案String取消
title弹框的标题String无
format格式化选中的值(value:moment) => string/string(val) => { return val; }
extraChildren如果是List.Item,则是extra属性的默认值, 如果是其它的UI组件,则value或者extra属性会经过format方法处理后传给children的extra属性,用户需要自己实现这个属性String请选择
style自定义内联样式Object{}