DatePicker 日期选择框

输入或选择日期的控件。

何时使用#

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

API#

DatePicker#

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

注意:0.11+Datepicker 改名为 DatePicker

参数 说明 类型 默认值
value 日期 string
defaultValue 默认日期 string
format 展示的日期格式 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

RangePicker#

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

disabled style popupStyle size locale showTime onOk 属性与 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" onChange={onChange} style={{width: 160}} />
, mountNode);

增加选择时间功能。

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';
import assign from 'object-assign';

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

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

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