mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
1.4 KiB
1.4 KiB
order | hidden | title |
---|---|---|
4 | true | 日期时间选择二 |
和 时间选择框 配合使用。
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);
}
},
handleDateChange(value) {
this.handleChange('date', value);
},
handleTimeChange(value) {
this.handleChange('time', value);
},
render() {
return (
<div>
<DatePicker onChange={this.handleDateChange} />
<TimePicker onChange={this.handleTimeChange} />
</div>
);
}
});
function onSelect(value) {
console.log('选择了时间:', value);
}
ReactDOM.render(<DateTimePicker onSelect={onSelect} />
, mountNode);