日常记录之antDesign使用DatePicker组件(1)。

        今天遇到了一个需求是在一个日期选择框中选择日期，但是选择框是以周的形式呈现的，选择完后日期框要显示当前选择的日期所处的某一周的起止时间。

        这个项目使用的UI框架是antd，我在官方文档找到了符合这个要求的DatePicker组件日期选择框 DatePicker - Ant Design

效果如下：

选择之前

 选择之后

//导入需要的组件
import { DatePicker} from 'antd';
//moment是一个日期格式转换的js库
import moment from 'moment';

//日期的格式，我是用的是YYYY/MM/DD
const weekFormat = 'YYYY/MM/DD';

//官方提供的一个日期选择框可以显示一个时间段的函数
const customWeekStartEndFormat = value =>
  `${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
    .endOf('week')
    .format(weekFormat)}`

/*
DatePicker是我们需要使用到的日期组件
moment是一个日期格式转换的js库
format就是日期组件中日期的显示格式
picker='week'日期是按照周来计算的
*/
<DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week" />

moment.js日期格式转换官网文档 | Moment.js 中文网