ant-design/components/datepicker/demo/time.md

53 lines
1.3 KiB
Markdown
Raw Normal View History

# 日期时间选择
2015-05-29 21:07:46 +08:00
- order: 4
2015-06-02 17:20:02 +08:00
和 [时间选择框](/components/timepicer) 配合使用。
2015-05-29 21:07:46 +08:00
---
````jsx
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;
}
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;
} 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-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-26 22:18:14 +08:00
});
function onSelect(value) {
console.log('选择了时间:', value);
}
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
````