Datepicker 日期选择框

输入或选择日期的控件。

何时使用#

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

API#

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

参数	说明	类型	默认值
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	默认配置

代码演示

import { Datepicker } from 'antd';

ReactDOM.render(
  <Datepicker defaultValue="2015-12-12" />
, document.getElementById('components-datepicker-demo-basic'));

基本

最简单的用法。

import { Datepicker } from 'antd';

ReactDOM.render(
  <div>
    <Datepicker size="large" />
    <Datepicker />
    <Datepicker size="small" />
  </div>
, document.getElementById('components-datepicker-demo-size'));

三种大小

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

import { Datepicker, Timepicker } from 'antd';

const DateTimePicker = React.createClass({
  handleChange(from, value) {
    this.result = this.result || new Date();
    if (!value) {
      if (from === 'date') {
        this.selectedDate = false;
      } else {
        this.selectedTime = false;
      }
      return;
    }
    if (from === 'date') {
      this.result.setFullYear(value.getFullYear());
      this.result.setMonth(value.getMonth());
      this.result.setDate(value.getDate());
      this.selectedDate = true;
    } else {
      this.result.setHours(value.getHours());
      this.result.setMinutes(value.getMinutes());
      this.result.setSeconds(value.getSeconds());
      this.selectedTime = true;
    }
    if (this.selectedDate && this.selectedTime) {
      this.props.onSelect(this.result);
    }
  },
  render() {
    return <div>
      <Datepicker onChange={this.handleChange.bind(null, 'date')} />
      <Timepicker onChange={this.handleChange.bind(null, 'time')} />
    </div>;
  }
});

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

ReactDOM.render(<DateTimePicker onSelect={onSelect} />
, document.getElementById('components-datepicker-demo-time'));

日期时间选择

和时间选择框配合使用。

import { Datepicker } from 'antd';

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

ReactDOM.render(
  <Datepicker disabledDate={disabledDate} />
, document.getElementById('components-datepicker-demo-range'));

指定不可选择日期

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

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

import { Datepicker } from 'antd';
import enUS from 'antd/lib/datepicker/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 />, document.getElementById('components-datepicker-demo-locale'));

国际化

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

import { Datepicker } from 'antd';

ReactDOM.render(
  <Datepicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
, document.getElementById('components-datepicker-demo-formatter'));

日期格式

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

import { Datepicker } from 'antd';

const Picker = React.createClass({
  handleChange: function(value) {
    console.log(new Date(value.getTime()));
  },
  render: function() {
    return <Datepicker onChange={this.handleChange} />;
  }
});

ReactDOM.render(
  <Picker />
, document.getElementById('components-datepicker-demo-select'));

选择日期

通过设置选择日期的回调事件 onChange，完成交互行为。

import { Datepicker } from 'antd';

ReactDOM.render(
  <Datepicker defaultValue="2015-06-06" disabled />
, document.getElementById('components-datepicker-demo-disabled'));

禁用

选择框的不可用状态。

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 />
, document.getElementById('components-datepicker-demo-start-end'));

日期范围选择

设置 disabledDate 方法，来约束开始和结束日期。

import { Datepicker } from 'antd';
const MonthPicker = Datepicker.MonthPicker;
ReactDOM.render(
  <MonthPicker defaultValue="2015-12" />
, document.getElementById('components-datepicker-demo-month-picker'));

月选择器

使用 MonthPicker 实现月选择器.