Add datapicker disabled demo

This commit is contained in:
afc163
2015-05-29 15:06:45 +08:00
parent 6486f78e25
commit de9b211627
2 changed files with 11 additions and 12 deletions

View File

@@ -1,24 +1,19 @@
# 范围
- order: 3
- description: 设置可选日期的范围,用 disabled 方法来定义不可选择时间。
- description: 设置可选日期的范围,用 disabled 方法来定义不可选择时间。比如不可选择今天之后的日期。
---
````jsx
var Datepicker = antd.datepicker;
var Picker = React.createClass({
handleChange: function(value) {
console.log(new Date(value.getTime()));
},
render: function() {
return <Datepicker onSelect={this.handleChange} />
}
});
var disabledDate = function(current, value) {
// can not select days after today
return current.getTime() > Date.now();
};
React.render(
<Picker />
<Datepicker disabled={disabledDate} />
, document.getElementById('components-datepicker-demo-range'));
````

View File

@@ -21,11 +21,14 @@ module.exports = React.createClass({
};
},
componentDidMount: function () {
var state = {};
if (this.props.value) {
var value = new GregorianCalendar(zhCn);
value.setTime(new Date(this.props.value));
this.setState({value: value});
state.value = value;
}
state.disabled = this.props.disabled || function() {};
this.setState(state);
},
handleChange: function() {
var props = this.props;
@@ -34,6 +37,7 @@ module.exports = React.createClass({
render: function () {
var calendar = (
<Calendar
disabledDate={this.state.disabled}
locale={CalendarLocale}
orient={['top', 'left']}
showClear={true} />