Datepicker 日期选择框

输入或选择日期/时间的控件。

何时使用

当用户需要输入一个日期/时间，可以点击标准输入框，弹出日期面板进行选择。支持键盘操作。

API

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

参数	说明	类型	默认值
value	日期	string	无
defaultValue	默认日期	string	无
format	展示的日期格式	string	"yyyy-MM-dd"
disabledDate	不可选择的日期	function	无
onSelect	选择日期的回调	function	无
showTime	显示时间选择条	boolean	false
disabled	禁用	bool	false
size	输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px	string	无

组件演示

// or require('antd/lib/datepicker');
var Datepicker = antd.Datepicker;

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

基本

最简单的用法。

var Datepicker = antd.Datepicker;

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

三种大小

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

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

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

范围

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

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

var Datepicker = antd.Datepicker;

React.render(
  <Datepicker value="2015-06-06" disabled={true} />
, document.getElementById('components-datepicker-demo-disabled'));

禁用

选择框的不可用状态。

var Datepicker = antd.Datepicker;

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

日期格式

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

var Datepicker = antd.Datepicker;

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

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

选择日期

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

var Datepicker = antd.Datepicker;

React.render(
  <Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" />
, document.getElementById('components-datepicker-demo-time'));

时间选择

准确到秒的时间选择面板。