Ant Design DatePicker 日期组件踩坑

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

介绍了日期组件的基础使用，也衍生出了年选择组件和年月范围选择的使用，以及使用过程中的优化处理，还对组件样式进行了调整，对用户更加友好

基础使用

正常情况下，使用日期组件，如日期选择（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>