mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
Add datapicker disabled demo
This commit is contained in:
@@ -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'));
|
||||
````
|
||||
|
||||
|
||||
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user