mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Add datepicker and timepicer usage demo
This commit is contained in:
parent
96ad83a31f
commit
83d047466b
@ -1,15 +1,40 @@
|
||||
# 时间选择
|
||||
# 日期时间选择
|
||||
|
||||
- order: 4
|
||||
|
||||
准确到秒的时间选择面板。
|
||||
和 [时间选择框](/components/timepicer) 配合使用。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Datepicker } from 'antd';
|
||||
import { Datepicker, Timepicker } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" defaultValue="2015-11-11 11:11:11"/>
|
||||
, document.getElementById('components-datepicker-demo-time'));
|
||||
let result = new Date();
|
||||
let selectdDate, selectdTime;
|
||||
function handleChange(from, value) {
|
||||
if (!value) {
|
||||
from === 'date' ?
|
||||
(selectdDate = false) : (selectdTime = false);
|
||||
return;
|
||||
}
|
||||
if (from === 'date') {
|
||||
result.setFullYear(value.getFullYear());
|
||||
result.setMonth(value.getMonth());
|
||||
result.setDate(value.getDate());
|
||||
selectdDate = true;
|
||||
} else {
|
||||
result.setHours(value.getHours());
|
||||
result.setMinutes(value.getMinutes());
|
||||
result.setSeconds(value.getSeconds());
|
||||
selectdTime = true;
|
||||
}
|
||||
if (selectdDate && selectdTime) {
|
||||
console.log('选择结果是:' + result);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Datepicker onChange={handleChange.bind(null, 'date')} />
|
||||
<Timepicker onChange={handleChange.bind(null, 'time')} />
|
||||
</div>, document.getElementById('components-datepicker-demo-time'));
|
||||
````
|
||||
|
@ -25,7 +25,6 @@
|
||||
| format | 展示的日期格式 | string | "yyyy-MM-dd" |
|
||||
| disabledDate | 不可选择的日期 | function | 无 |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(Date value) | 无 |
|
||||
| showTime | 显示时间选择条 | boolean | false |
|
||||
| disabled | 禁用 | bool | false |
|
||||
| style | 自定义输入框样式 | object | {} |
|
||||
| popupStyle | 格外的弹出日历样式 | object | {} |
|
||||
|
Loading…
Reference in New Issue
Block a user