Ant Design DatePicker 日期组件踩坑
基础使用
正常情况下，使用日期组件，如日期选择（DatePicker）、月份选择（MonthPicker）、范围选择（RangePicker）、周选择（WeekPicker）等，选择数据完成后，日期面板是会自动关闭的
<template> <div> <!-- 正常情况 --> <a-date-picker @change="onChange" /> <a-month-picker placeholder="选择月份" @change="onChange" /> <a-range-picker @change="onChange" /> <a-week-picker placeholder="选择周" @change="onChange" /> </div> </template> <script> export default { methods: { onChange(date, dateString) { console.log(date, dateString); }, }, }; </script> <style lang="scss" scoped> /* 周末特殊样式设置 */ .ant-calendar-table { thead { th[title="周日"], th[title="周六"] { color: #ef9b1d; } } } </style> 复制代码其中，对日期范围组件面板中的周六、周日两个 title 样式进行了调整，和工作日进行了区分，效果如下图所示：
年选择组件
设置
DatePicker的mode="year"属性，可以实现按年的选择选择完成之后，日期面板不会自动关闭，需要点击一下才行，这样的交与体验不太好
借助
:open="yearPickShow"控制日期面板的开关，借助@panelChange和@openChange完成选中后的关闭
<template> <div> <!-- 年选择组件 --> <a-date-picker v-model="year" mode="year" :allowClear="false" format="YYYY" placeholder="请选择年份" :open="yearPickShow" @panelChange="handlePanelChange" @openChange="handleOpenChange" /> </div> </template> <script> export default { data() { return { year: "", yearPickShow: false, }; }, methods: { handleOpenChange(status) { this.yearPickShow = status; }, handlePanelChange(value) { this.year = value; this.yearPickShow = false; }, }, }; </script> 复制代码年月范围选择
使用
RangePicker实现，通过mode属性实现按月的选择选择完成之后，日期面板不会自动关闭，也需要借助
open和@panelChange和@openChange完成自动关闭添加了一个“确定”按钮，在该事件中可以执行相关的判断和校验，以及面板的关闭
<template> <div> <!-- 年月范围选择组件 --> <a-range-picker :placeholder="['开始月份', '结束月份']" format="YYYY年MM月" v-model="monthArr" :allowClear="false" :mode="mode" :open="monthPickShow" @panelChange="handleMonthPanelChange" @openChange="handleMonthOpenChange" > <template slot="renderExtraFooter"> <a-button type="primary" @click="handleMonthOk">确定</a-button> </template> </a-range-picker> </div> </template> <script> export default { data() { return { monthArr: [], mode: ["month", "month"], monthPickShow: false, }; }, methods: { handleMonthOpenChange(status) { this.monthPickShow = status; }, handleMonthPanelChange(value, mode) { this.monthArr = value; this.mode = [ mode[0] === "date" ? "month" : mode[0], mode[1] === "date" ? "month" : mode[1], ]; }, handleMonthOk() { let value = this.monthArr; let diffMonth = value[1].diff(value[0], "month"); if (diffMonth >= 12) { this.$toast.warning("选择月份相隔不可超过12个月"); return false; } this.monthPickShow = false; }, }, }; </script> 复制代码
作者：时光足迹
链接：https://juejin.cn/post/7026170377382395935