时间组件关于禁选时间的设置（禁选当前之前的时间、禁止选择某个范围之外的时间等）

最新推荐文章于 2024-05-28 10:14:34 发布

Yan_an_n

最新推荐文章于 2024-05-28 10:14:34 发布

阅读量2.5k

点赞数 2

分类专栏：小交互文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44258964/article/details/113180366

版权

小交互专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、前景

开发项目的时候，用到了时间选择器，其中对禁止选择的时间上有好几个要求，现在项目完结，总结一下这几种禁止选择的情况

2、禁止选择的几种情况

组件使用代码，disabledDate属性表示设置禁用状态，参数为当前日期，返回Boolean类型

<ko-datepicker v-model="form_validate.leave_date"  format="YYYY-MM-DD" placeholder="请选择日期" :disabledDate="disabledDate"></ko-datepicker>

2.1禁止选择7天及以前的时间

disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7 * 8
},

示例：
在这里插入图片描述

2.2禁止选择当天以后的时间

disabledDate(time) {
    return time.valueOf() >= new Date()
},

示例：
在这里插入图片描述

2.3、禁止选择除某个月份之外的月份

disabledMonth(time) {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()//可谓想要禁止的月份，这里是当前月份
    return time.getMonth() != month || year != time.getFullYear()
}

示例：
在这里插入图片描述

2.4、禁止选择某个范围之外的月份

disabledMonth(time) {
      let min = this.min_month.split('-')
      let max = this.max_month.split('-')
//有两个月份,且跨年
      if (min[0] < max[0]) {
        return (
           time.getFullYear() < min[0] ||
           (time.getMonth() < min[1] - 1 && time.getFullYear() == min[0]) ||
           (time.getMonth() > max[1] - 1 && time.getFullYear() == max[0]) ||
           time.getFullYear() > max[0]
          )
       } else {
          // 同一年不同月份
         return (
           time.getMonth() > max[1] - 1 ||
           time.getMonth() < min[1] - 1 ||
           min[0] != time.getFullYear()
         )
       }
}