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>