DatePicker 日期选择框

输入或选择日期的控件。

何时使用#

当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。

API#

DatePicker#

<DatePicker defaultValue="2015-01-01" />

注意:0.11+Datepicker 改名为 DatePicker

参数 说明 类型 默认值
value 日期 string or Date
defaultValue 默认日期 string or Date
format 展示的日期格式,配置参考 GregorianCalendarFormat string "yyyy-MM-dd"
disabledDate 不可选择的日期 function
onChange 时间发生变化的回调,发生在用户选择时间时 function(Date value)
disabled 禁用 bool false
style 自定义输入框样式 object {}
popupStyle 格外的弹出日历样式 object {}
size 输入框大小,large 高度为 32px,small 为 22px,默认是 28px string
locale 国际化配置 object 默认配置
showTime 增加时间选择功能 bool false
onOk 点击确定按钮的回调 function(Date value)
getCalendarContainer 定义浮层的容器,默认为 body 上新建 div function(trigger)

MonthPicker#

参数 说明 类型 默认值
value 日期 string or Date
defaultValue 默认日期 string or Date
format 展示的日期格式,配置参考 GregorianCalendarFormat string "yyyy-MM"
onChange 时间发生变化的回调,发生在用户选择时间时 function(Date value)
disabled 禁用 bool false
style 自定义输入框样式 object {}
popupStyle 格外的弹出日历样式 object {}
size 输入框大小,large 高度为 32px,small 为 22px,默认是 28px string
locale 国际化配置 object 默认配置
getCalendarContainer 定义浮层的容器,默认为 body 上新建 div function(trigger)

RangePicker#

参数 说明 类型 默认值
value 日期 [string/Date, string/Date]
defaultValue 默认日期 [string/Date, string/Date]
format 展示的日期格式 string "yyyy-MM-dd HH:mm:ss"
onChange 时间发生变化的回调,发生在用户选择时间时 function([Date start, Date end])

disabled style popupStyle size locale showTime onOk getCalendarContainer 属性与 DatePicker 的一致。

代码演示

import { DatePicker } from 'antd';

function onChange(value) {
  console.log(value);
}

ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);

最简单的用法。

import { DatePicker } from 'antd';

ReactDOM.render(
  <div>
    <DatePicker size="large" />
    <DatePicker />
    <DatePicker size="small" />
  </div>
, mountNode);

三种大小的输入框,大的用在表单中,中的为默认。

import { DatePicker } from 'antd';

ReactDOM.render(
  <DatePicker defaultValue="2015-06-06" disabled />
, mountNode);

选择框的不可用状态。

import { DatePicker } from 'antd';

const DateRange = React.createClass({
  getInitialState() {
    return {
      startValue: null,
      endValue: null
    };
  },
  disabledStartDate(startValue) {
    if (!startValue || !this.state.endValue) {
      return false;
    }
    return startValue.getTime() >= this.state.endValue.getTime();
  },
  disabledEndDate(endValue) {
    if (!endValue || !this.state.startValue) {
      return false;
    }
    return endValue.getTime() <= this.state.startValue.getTime();
  },
  onChange(field, value) {
    console.log(field, 'change', value);
    this.setState({
      [field]: value,
    });
  },
  render() {
    return (
      <div>
        <DatePicker disabledDate={this.disabledStartDate}
          value={this.state.startValue}
          placeholder="开始日期"
          onChange={this.onChange.bind(this, 'startValue')} />
        <DatePicker disabledDate={this.disabledEndDate}
          value={this.state.endValue}
          placeholder="结束日期"
          onChange={this.onChange.bind(this, 'endValue')} />
      </div>
    );
  }
});

ReactDOM.render(
  <DateRange />
, mountNode);

可以设置 disabledDate 方法,来约束开始和结束日期。

import { DatePicker } from 'antd';
const MonthPicker = DatePicker.MonthPicker;
ReactDOM.render(
  <MonthPicker defaultValue="2015-12" />
, mountNode);

使用 MonthPicker 实现月选择器.

import { DatePicker } from 'antd';

ReactDOM.render(
  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
, mountNode);

使用 format 属性,可以自定义你需要的日期显示格式,如 yyyy/MM/dd

import { DatePicker } from 'antd';

function onChange(value) {
  console.log('选择了时间:', value);
}

ReactDOM.render(
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
, mountNode);

增加选择时间功能。不要修改时间的格式 HH:mm:ss

import { DatePicker } from 'antd';

const disabledDate = function (current) {
  // can not select days after today
  return current && current.getTime() > Date.now();
};

ReactDOM.render(
  <DatePicker disabledDate={disabledDate} />
, mountNode);

设置 disabledDate 方法,来确定不可选时段。

如上例:不可选择今天之后的日期。

import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;

function onChange(value) {
  console.log('From: ', value[0], ', to: ', value[1]);
}
ReactDOM.render(<div>
  <RangePicker style={{ width: 184 }} onChange={onChange} />
  <br />
  <RangePicker showTime format="yyyy/MM/dd HH:mm:ss" onChange={onChange} />
</div>, mountNode);

使用 RangePicker 实现日期范围选择有更好的交互体验。

import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';

const App = React.createClass({
  render() {
    const customLocale = {
      timezoneOffset: 0 * 60,
      firstDayOfWeek: 0,
      minimalDaysInFirstWeek: 1,
    };
    return <DatePicker locale={{ ...enUS, ...customLocale }} />;
  }
});

ReactDOM.render(<App />, mountNode);

通过 locale 配置时区、语言等, 默认支持 en_USzh_CN