ant-design/components/date-picker/demo/presetted-ranges.md

50 lines
978 B
Markdown
Raw Normal View History

---
order: 8
title:
2016-11-15 17:16:20 +08:00
zh-CN: 预设范围
en-US: Preset Ranges
---
## zh-CN
可以预设常用的日期范围以提高用户体验。
## en-US
We can set preset ranges to RangePicker to improve user experience.
2019-05-07 14:57:32 +08:00
```jsx
import { DatePicker } from 'antd';
import moment from 'moment';
2018-06-27 15:55:04 +08:00
const { RangePicker } = DatePicker;
function onChange(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
2017-05-15 16:36:07 +08:00
ReactDOM.render(
<>
<RangePicker
2019-05-07 14:57:32 +08:00
ranges={{
Today: [moment(), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
}}
2016-11-15 17:16:20 +08:00
onChange={onChange}
/>
<br />
<RangePicker
2019-05-07 14:57:32 +08:00
ranges={{
Today: [moment(), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
}}
2017-05-15 14:37:22 +08:00
showTime
format="YYYY/MM/DD HH:mm:ss"
onChange={onChange}
/>
</>,
2019-05-07 14:57:32 +08:00
mountNode,
);
2019-05-07 14:57:32 +08:00
```