1.DatePicker日期选择框
输入或选择日期的控件。
2.何时使用
当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。
组件代码来自: 日期选择框 DatePicker - Ant Design
3.本地验证前的准备
参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_react+antd 表格demo-CSDN博客】,将 日期选择框 DatePicker - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码,启动代码,可在本地查看现象和更改代码。
4.本地验证DatePicker的基本使用
复制下图所示代码,了解DatePicker的一些基本使用格式
import React from 'react';
import { DatePicker, Space } from 'antd';
const onChange = (date, dateString) => {
console.log(date, dateString);
};
const App = () => (
<Space direction="vertical">
<DatePicker onChange={onChange} />
<DatePicker onChange={onChange} picker="week" />
<DatePicker onChange={onChange} picker="month" />
<DatePicker onChange={onChange} picker="quarter" />
<DatePicker onChange={onChange} picker="year" />
</Space>
);
export default App;
5.日期时间选择的一些参数使用方式以及效果
复制下图所示代码,删除修改一些代码后,查看参数的使用方式以及效果(见下图)
import {DatePicker, Space} from 'antd';
import React from 'react';
const onChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
};
const onOk = (value) => {
console.log('onOk: ', value);
};
const App = () => (
<Space direction="vertical" size={12}>
<DatePicker
showTime={{
format: 'YYYY-MM-DD HH:mm:ss',
}}
format="YYYY-MM-DD-HH:mm:ss"
onChange={onChange}
onOk={onOk}
/>
</Space>
);
export default App;
关于自定义日期显示格式可以参考下述示例代码
import { DatePicker, Space } from 'antd';
import moment from 'moment';
import React from 'react';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const customFormat = (value) => `custom format: ${value.format(dateFormat)}`;
const customWeekStartEndFormat = (value) =>
`${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
.endOf('week')
.format(weekFormat)}`;
const App = () => (
<Space direction="vertical" size={12}>
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
<DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
<DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
<DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week" />
<RangePicker
defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
format={dateFormat}
/>
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
</Space>
);
export default App;
本文仅介绍了组件Form的部分内容,更多内容请参阅官方文档: 日期选择框 DatePicker - Ant Design