element monthrange 控制最多只能选一年的时间

最新推荐文章于 2024-04-30 16:16:52 发布

原创最新推荐文章于 2024-04-30 16:16:52 发布 · 958 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

该博客介绍了如何使用Element UI的el-date-picker组件实现月范围选择，并通过JavaScript动态设置日期范围的限制，包括minTime和maxTime的计算。着重于pickerOptions中disabledDate和onPick方法的运用，以确保日期选择符合业务需求。

dom

<el-date-picker
   v-model="time"
   type="monthrange"
   value-format="yyyy-MM"
   range-separator="至"
   start-placeholder="开始月份"
   end-placeholder="结束月份"
   :picker-options="pickerOptions"
 >
 </el-date-picker>

 data() {
    let minTime = null;
    let maxTime = null;
    return {
      pickerOptions: {
        disabledDate(time) {
          if (minTime) {
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
        onPick(time) {
            // 选择了两个时间放开删除限制
          if (time.maxDate && time.minDate) {
            minTime = null;
            maxTime = null;
          // 如果选择了一个时间
          } else if (!time.maxDate) {
            // 31104000000是一年的时间戳  2592000000是一个月的时间戳
            minTime = time.minDate.getTime() - 31104000000 + 2592000000;
            maxTime = time.minDate.getTime() + 31104000000;
          } else {
            // 放开限制，方便再次选择
            minTime = null;
            maxTime = null;
          }
        }
      }
    };