Browse Source

Add datepicker and timepicer usage demo

pull/589/head
afc163 9 years ago
parent
commit
83d047466b
  1. 37
      components/datepicker/demo/time.md
  2. 1
      components/datepicker/index.md

37
components/datepicker/demo/time.md

@ -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'));
````

1
components/datepicker/index.md

@ -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…
Cancel
Save