前端恋曲：el-date-picker组件，选择令人心动的日期范围 ...

记得高中那年，操场边的晚樱树下，我鸠拙地向她递出了一张经心挑选的CD，封面上写着甜蜜时刻。她接过CD，眼中闪过惊喜的光芒，那一刻，我知道我选对了。就像在前端开发的天下里，选择合适的组件，总能在项目中绽放出意想不到的光彩。
  本日，我们要聊的是el-date-picker组件——element ui组件库中的一颗璀璨明珠。它不仅仅是一个组件，更像是那个能让你的Web应用瞬间甜蜜的恋爱邪术。用上它，就像在校园舞会上邀请你心仪的女孩共舞，既简朴又充满期待。
想象一下，用户在你的网站上挑选日期，就像在日历上经心挑选和恋人的约会日期。el-date-picker让这个过程变得既直观又愉悦，淘汰了bug和用户烦恼，就像恋爱中淘汰了误会和期待。
如今，让我们一起走进el-date-picker的甜蜜天下，探索如何在我们的项目中，用它来编织一个又一个用户满意的甜蜜时刻。
需求设定

实现一个月份范围选择功能，要求如下：
1.克制选择超出当前日期的月份
2.选择的范围不能超出12个月，即当选择了一个日期后，超出12个月的月份克制选择
组件选型

我们选择element ui中的el-date-picker组件。其中在官网中可以找到这个示例：

1. <template>
2.   <div class="block">
3.     <el-date-picker
4.       v-model="value1"
5.       type="monthrange"
6.       range-separator="至"
7.       start-placeholder="开始月份"
8.       end-placeholder="结束月份">
9.     </el-date-picker>
10.   </div>
11. </template>
13. <script>
14.   export default {
15.     data() {
16.       return {
17.         value1: '',
18.         value2: ''
19.       };
20.     }
21.   };
22. </script>

复制代码

结果可以看出，能够满足正常的操作需求。

组件分析

el-date-picker组件中最重要的属性莫过于picker-options了。picker-options是日期选项的配置对象。
其中官网中也给出了picker-options中具体的属性成员：

shortcuts

用途：配置快捷选项组，数组范例，每个对象对应一个快捷选项。
demo示例：

1. <template>
2.   <div class="block">
3.     <el-date-picker
4.       v-model="value2"
5.       type="monthrange"
6.       align="right"
7.       unlink-panels
8.       range-separator="至"
9.       start-placeholder="开始月份"
10.       end-placeholder="结束月份"
11.       :picker-options="pickerOptions">
12.     </el-date-picker>
13.   </div>
14. </template>
16. <script>
17. export default {
18.   data() {
19.     return {
20.       pickerOptions: {
21.         shortcuts: [{
22.           text: '本月',
23.           onClick(picker) {
24.             picker.$emit('pick', [new Date(), new Date()]);
25.           }
26.         }, {
27.           text: '今年至今',
28.           onClick(picker) {
29.             const end = new Date();
30.             const start = new Date(new Date().getFullYear(), 0);
31.             picker.$emit('pick', [start, end]);
32.           }
33.         }, {
34.           text: '最近六个月',
35.           onClick(picker) {
36.             const end = new Date();
37.             const start = new Date();
38.             start.setMonth(start.getMonth() - 6);
39.             picker.$emit('pick', [start, end]);
40.           }
41.         }]
42.       },
43.       value1: '',
44.     };
45.   }
46. };
47. </script>

复制代码

可以看到，每个配置对象中均包含text和onClick属性。text体现快捷选项的文本内容。onClick体现点击快捷选项后执行的逻辑，通过 picker.$emit(‘pick’, [start, end]); 代替手动选中日期操作。

disabledDate

用途：设置禁用的选项。传入一个函数，函数参数为当前日期，必要返回一个布尔值。
demo示例：

1. <template>
2.   <div class="block">
3.     <el-date-picker
4.       v-model="value1"
5.       type="month"
6.       :picker-options="pickerOptions"
7.       placeholder="选择日期">
8.     </el-date-picker>
9.   </div>
10. </template>
11. <script>
12. export default {
13.   data() {
14.     return {
15.       pickerOptions: {
16.         disabledDate(time) {
17.           return time.getTime() > Date.now();
18.         },
19.       },
20.       value1: '',
21.     };
22.   }
23. };
24. </script>

复制代码

可以看到，超出本日的月份无法被选中。利用它，可以淘汰后端不必要的数据查询使命。
cellClassName

用途：设置日期的类名。传入一个函数，函数参数为选项中每一个日期，返回一个字符串。注意：该选项只能设置日期的样式，不能设置月份的样式。

1. <template>
2.   <div class="block">
3.     <el-date-picker
4.       v-model="value1"
5.       align="right"
6.       type="date"
7.       placeholder="选择日期"
8.       :picker-options="pickerOptions">
9.     </el-date-picker>
10.   </div>
11. </template>
13. <script>
14. export default {
15.   data() {
16.     return {
17.       pickerOptions: {
18.         cellClassName: function (date) {
19.           // 每个月的首日设置红色加粗效果
20.           if (date.getDate() === 1) {
21.             return 'first-day';
22.           }
23.         }
24.       },
25.       value1: '',
26.     };
27.   }
28. };
29. </script>
31. <style scoped>
32. .first-day {
33.   color: red;
34.   font-size: 16px;
35.   font-weight: 700;
36. }
37. </style>

复制代码

这个配置可以用来自定义节假日的样式，使UI效果更美观。
firstDayOfWeek

用途：设置周起始日，默认为周日。
demo：

1. <template>
2.   <div class="block">
3.     <el-date-picker v-model="value1" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions">
4.     </el-date-picker>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       pickerOptions: {
13.         // 设置周一为周起始日
14.         firstDayOfWeek: 1
15.       },
16.       value1: '',
17.     };
18.   }
19. };
20. </script>

复制代码

可以看到，设置为周一为周起始日，这样更符合国内的风俗。
onPick

用途：用于设置选中日期后的执行逻辑函数，仅当type为daterange或datetimerange时生效。通俗来说，日期范围必要两次选择操作，每次选择操作后都会执行一次。函数参数分别为选中的最小日期、最大日期。
第一次选中日期后，最小日期为选中的日期，最大日期为null。
第二次选中日期后，组件内部会主动比力两个日期，将最小日期置于第一个函数参数位置，最大日期置于第二个函数参数位置。所以比力选中日期巨细的逻辑无需自行实现。
demo：

1. <template>
2.   <div class="block">
3.     <el-date-picker v-model="value1" align="right" type="monthrange" placeholder="选择日期" :picker-options="pickerOptions">
4.     </el-date-picker>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       pickerOptions: {
13.         onPick: ({ minDate, maxDate }) => {
14.           console.log(minDate, 'minDate');
15.           console.log(maxDate, 'maxDate');
16.         },
17.       },
18.       value1: '',
19.     };
20.   }
21. };
22. </script>

复制代码

梳理完 pickOptions 的配置后，是不是觉得它很强大？接下来我们利用它完成开篇的需求。
需求分析

1、克制选择超出当前日期的月份
直接用disabledDate可以完成设置
2、选择的范围不能超出12个月，即当选择了一个日期后，超出12个月的月份克制选择
直接用onPick+disabledDate可以完成设置
完备的代码：

1. <template>
2.   <div class="box">
3.     <!-- 使用 Element UI 的日期选择器组件，设置为月份范围选择模式 -->
4.     <el-date-picker :picker-options="pickerOptions" v-model="monthrange" type="monthrange" format="yyyy-MM"
5.       value-format="yyyy-MM" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   data() {
12.     return {
13.       pickerMinDate: "", // 存储第一次选中的时间
14.       pickerOptions: {
15.         // 当日期被选中时的回调函数
16.         onPick: ({ minDate }) => {
17.           // 将选中的最小日期转换为时间戳并存储
18.           this.pickerMinDate = new Date(minDate).getTime();
19.         },
20.         // 用于禁用不应被选中的日期
21.         disabledDate: time => {
22.           if (this.pickerMinDate) {
23.             const day1 = 364 * 24 * 3600 * 1000; // 一年的毫秒数
24.             // 计算可选日期的最大值和最小值
25.             let maxTime = Math.min(this.pickerMinDate + day1, new Date().getTime());
26.             let minTime = this.pickerMinDate - day1;
27.             // 如果日期超出范围，则禁用
28.             return time.getTime() > maxTime || time.getTime() < minTime;
29.           }
30.           // 如果没有选中的最小日期，则禁用所有未来的日期
31.           return time.getTime() > new Date().getTime();
32.         }
33.       },
34.       monthrange: [] // 存储选中的月份范围
35.     }
36.   }
37. };
38. </script>

复制代码

上面的代码已经标明确注释。必要特别说明的是：const day1 = 364 * 24 * 3600 * 1000; ，一年的天数用的是 364，而不是 365，是因为给后端的月份范围传参最大只能是 2023-04~2024-03，不能是 2023-04~2024-04，前者体现12个月，后者体现13个月。
   总结：本文介绍了el-date-picker组件中pickOptions的强大之处，并通过一个需求场景，用代码逐步举行了需求分析和代码说明，为实现类似场景提供参考和帮助。
  日拱一卒，功不唐捐。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。