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_US，zh_CN。