设置带季度快捷选项的日期选择器

Element-UI 设置带季度快捷选项的日期选择器

背景

有个项目是统计工作量类的项目,为了更好的查询工作量,要求日期选择器增加每个季度的快捷选项, 点击选择起止时间，时间选择框左侧显示该年度对应的季度，用户选择对应的季度确认后起止时间则显示该季度的起止时间，季度只允许单选。

功能概述

• 时间选择框左侧显示该年度对应季度的快捷选项

• 点击快捷选项选择对应年份的季度期间

• 左边快捷选项的文案跟着年份切换而联动

页面展示

实现思路

element-ui DatePicker 日期选择器有个属性 pickerOptions 可以设置带快捷的选项

Element-UI 官方文档

let year;
export default {
    data() {
        year = new Date().getFullYear();
        return {
            pickerOptions: {
                pickerOptions: {
                    shortcuts: [
                      {
                        text: `${year}第一季度`,
                        onClick(picker) {
                          const start = new Date(year, 0, 1);
                          const end = new Date(year, 2, 31);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第二季度`,
                        onClick(picker) {
                          const start = new Date(year, 3, 1);
                          const end = new Date(year, 5, 30);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第三季度`,
                        onClick(picker) {
                          const start = new Date(year, 6, 1);
                          const end = new Date(year, 8, 30);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第四季度`,
                          const start = new Date(year, 9, 1);
                          const end = new Date(year, 11, 31);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                    ],
                },
            },
        },
    },
}

效果如下:

实现年份联动

思路: 可以使用 document.getElementsByClassName() 获取 日期选择器的dom节点添加 onclick 点击事件, 然后给切换月份和年份按钮添加 onclick 点击事件,根据年份动态设置快捷选项的文本

export default {
    data() {
        year = new Date().getFullYear();
        return {
            pickerOptions: {
                pickerOptions: {
                    shortcuts: [
                      {
                        text: `${year}第一季度`,
                        onClick(picker) {
                          year = document.getElementsByClassName("el-date-range-picker__header")[0]
                          .innerText.slice(0, 4);
                          const start = new Date(year, 0, 1);
                          const end = new Date(year, 2, 31);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第二季度`,
                        onClick(picker) {
                          year = document.getElementsByClassName("el-date-range-picker__header")[0]
                          .innerText.slice(0, 4);
                          const start = new Date(year, 3, 1);
                          const end = new Date(year, 5, 30);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第三季度`,
                        onClick(picker) {
                          year = document.getElementsByClassName("el-date-range-picker__header")[0]
                          .innerText.slice(0, 4);
                          const start = new Date(year, 6, 1);
                          const end = new Date(year, 8, 30);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                      {
                        text: `${year}第四季度`,
                        onClick(picker) {
                          year = document.getElementsByClassName("el-date-range-picker__header")[0]
                          .innerText.slice(0, 4);
                          const start = new Date(year, 9, 1);
                          const end = new Date(year, 11, 31);
                          picker.$emit("pick", [start, end]);
                        },
                      },
                    ],
                },
            },
        },
    },
    mounted() {
        let parent = document.getElementsByClassName(
          "el-date-editor--daterange"
        )[0];
        parent.onclick = function () {
          let child1 = document.getElementsByClassName("el-icon-d-arrow-left")[0]; // 切换年份 左边按钮
          let child2 = document.getElementsByClassName("el-icon-d-arrow-right")[0]; // 切换年份 右边按钮
          // 切换月份 左边按钮
          let child3 = document.querySelector(".el-date-range-picker__header .el-icon-arrow-left");
          // 切换月份 右边按钮
          let child4 = document.querySelector(".el-date-range-picker__header .el-icon-arrow-right");
    
          function fn() {
            let seasonList = document.getElementsByClassName("el-picker-panel__shortcut");
            let arr = ["一", "二", "三", "四"];
            year = document.getElementsByClassName("el-date-range-picker__header")[0]
            .innerText.slice(0, 4);
            console.log('year::: ', year);
            for (let i = 0; i < seasonList.length; i++) {
              seasonList[i].innerText = `${year}第${arr[i]}季度`;
              console.log(seasonList[i].innerText, "seasonList[i].innerText");
            }
          };
    
    
          child1.onclick = fn;
          child2.onclick = fn;
          child3.onclick = fn;
          child4.onclick = fn;
        };
    },
}

效果如下:

总结

在data里面定义 pickerOptions 设置带快捷的选项的文本, 然后使用document.getElementsByClassName() 获取 日期选择器的dom节点添加 onclick 点击事件, 然后给切换月份和年份按钮添加 onclick 点击事件,根据年份动态设置快捷选项的文本