2015-11-24 17:25:32 +08:00
|
|
|
# 日期时间选择
|
2015-05-29 21:07:46 +08:00
|
|
|
|
|
|
|
- order: 4
|
2015-06-02 17:20:02 +08:00
|
|
|
|
2015-11-24 17:25:32 +08:00
|
|
|
和 [时间选择框](/components/timepicer) 配合使用。
|
2015-05-29 21:07:46 +08:00
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
````jsx
|
2015-11-24 17:25:32 +08:00
|
|
|
import { Datepicker, Timepicker } from 'antd';
|
2015-05-29 21:07:46 +08:00
|
|
|
|
2015-11-26 22:18:14 +08:00
|
|
|
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;
|
|
|
|
}
|
2015-11-25 17:35:49 +08:00
|
|
|
if (from === 'date') {
|
2015-11-26 22:18:14 +08:00
|
|
|
this.result.setFullYear(value.getFullYear());
|
|
|
|
this.result.setMonth(value.getMonth());
|
|
|
|
this.result.setDate(value.getDate());
|
|
|
|
this.selectedDate = true;
|
2015-11-25 17:35:49 +08:00
|
|
|
} else {
|
2015-11-26 22:18:14 +08:00
|
|
|
this.result.setHours(value.getHours());
|
|
|
|
this.result.setMinutes(value.getMinutes());
|
|
|
|
this.result.setSeconds(value.getSeconds());
|
|
|
|
this.selectedTime = true;
|
2015-11-25 17:35:49 +08:00
|
|
|
}
|
2015-11-26 22:18:14 +08:00
|
|
|
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>;
|
2015-11-24 17:25:32 +08:00
|
|
|
}
|
2015-11-26 22:18:14 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
function onSelect(value) {
|
|
|
|
console.log('选择了时间:', value);
|
2015-11-24 17:25:32 +08:00
|
|
|
}
|
|
|
|
|
2015-11-26 22:18:14 +08:00
|
|
|
ReactDOM.render(<DateTimePicker onSelect={onSelect} />
|
|
|
|
, document.getElementById('components-datepicker-demo-time'));
|
2015-05-29 21:07:46 +08:00
|
|
|
````
|