vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element 时间选择器禁用

element 时间选择器禁用选择的使用示例

作者:树洞菇凉

最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下

 本文主要介绍了element 时间选择器禁用选择的使用示例,具体如下:

方法一、年份或月份选择都默认yyyy-MM(disabledDate中,time.getTime() 的范围是禁用的时间范围)

1、在forbiddenDate之后的日期禁用不可选择

<el-date-picker
  v-model="financialYearMonth"
  :value-format="'yyyy-MM'"
  type="month"
  :size="'small'"
  @change="getCwszSubj"
  placeholder="选择日期"
  :picker-options="monthpickoption"
>
</el-date-picker>
export default {
  data() {
    return {
        monthpickoption:{
            // 设置禁用状态,参数为当前日期,要求返回 Boolean
            disabledDate: (time) => {
                // 把默认日期转时间戳
                let date = new Date(this.forbiddenDate).getTime();
                // 当前日期时间戳 > 默认日期时间戳 则禁止默认以后的日期,反之如果是小于禁用之前的日期
                return time.getTime() > date;
            },
        },
    }
  }
}

2、在开始日期和结束日期内可以选择,其他不可选择,例如:yearMonthStart(开始日期)、yearMonthEnd(结束日期)

如果yearMonthStart:2016-01、yearMonthEnd:2023-02,那就只有2016-01至2023-02范围内的日期可以选择

<el-date-picker
  v-model="financialYearMonth"
  type="monthrange"
  value-format="yyyy-MM"
  range-separator="至"
  start-placeholder="开始月份"
  end-placeholder="结束月份"
  :picker-options="pickerOptions"
>
</el-date-picker>
export default {
  data() {
    return {
        pickerOptions:{
            // 设置禁用状态,参数为当前日期,要求返回 Boolean
            disabledDate: (time) => {
                // 开始日期
                let dateStart = new Date(that.yearMonthStart).getTime();
                // 结束日期
                let dateEnd = new Date(that.yearMonthEnd).getTime();
                // 在开始日期和结束日期内可以选择,其他不可选择
                return time.getTime() < dateStart || time.getTime() > dateEnd;
            },
        },
    }
  }
}
export default {
  computed:{
    pickerOptions(){
      let that = this;
      return {
        disabledDate(time) {
          // 开始日期
          let dateStart = new Date(that.yearMonthDisableStart).getTime();
          // 结束日期
          let dateEnd = new Date(that.yearMonthDisableEnd).getTime();
          // 在开始日期和结束日期内可以选择,其他不可选择
          return time.getTime() < dateStart || time.getTime() > dateEnd
        }
      }
    }
  },
}

方法二、

<div class="selectItem" v-show="monthShow">
   <el-date-picker
       v-model="trendData.date"
       :clearable="false"
       type="monthrange"
       :default-value="trendData.date"
       :picker-options="monthpickoption"
       value-format="yyyy-MM"
       range-separator="至"
       @change="onChangeDate"
       start-placeholder="开始日期"
       end-placeholder="结束日期">
    </el-date-picker>
</div>
export default {
  data() {
    return {
        trendData: {
            date: []
        },    
        minDate: null,
        maxDate: null,
        monthpickoption:{
            // 设置禁用状态,参数为当前日期,要求返回 Boolean
            disabledDate: (time) => {
              if (this.minDate !== null && this.maxDate === null) {
                  let minMonth = this.minDate.getMonth(),
                  lastYear = new Date(this.minDate).setMonth(minMonth - 11),
                  nextYear = new Date(this.minDate).setMonth(minMonth + 11);
                let minTime = this.minDate.getTime()
                let nextTime = new Date().setMonth(new Date().getMonth() + 11)
                let lastTime = new Date().setMonth(new Date().getMonth() - 11)
               if (minTime <= nextTime || minTime >= lastTime){
                  //开始日期少于当前月+12个月 并且大于当前月-12个月,则表示只限制前面的范围
                  return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
                }
                else {
                  // 只能选 minDate 前后一年的范围
                  return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
                }
              }else {
                let startMonth = this.trendData.date[0]
                let month = new Date(startMonth).getMonth()
                let lastMonth = new Date(startMonth).setMonth(month - 11)
                //如果有默认值,只禁用开始日期,因为已经限定了禁用未来范围,且默认值已经为12个月范围
                return this.monthPick(time) || time < lastMonth.valueOf();
              }
            },
            // 选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效
            onPick: ({minDate, maxDate}) => {
              this.minDate = minDate;
              this.maxDate = maxDate;
            }
        }
    }
  },
  methods: {
      monthPick(time){
          // 获取当前的月份信息
          const date = new Date() // 获取当前的时间基本信息,值是这样的: Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
          const year = date.getFullYear() // 获取当前年份,值是这样的: 2021
          let month = date.getMonth() + 1 // 获取当前月份,值是这样的: 6   getMonth()方法返回值是0-11,也就是1月份到12月份,所以要加上1,才是当前月份
          if (month >= 1 && month <= 9) {
            // 如果是1月到9月就要在前面补上一个0   比如:02、07    月份这样表示
            month = '0' + month
          }
          const nowDate = year.toString() + month.toString() // 转换成字符串拼接,最终得到年和月,比如此时的时间是2021年7月20号,所以nowDate的值是:202107
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear() // 获取时间选择器的年份(有很多)
          let timemonth = time.getMonth() + 1 // 与上面同理
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = '0' + timemonth
          }
          const elTimeData = timeyear.toString() + timemonth.toString()
          // 返回,时间选择器的日期月份大于当前日期的月份,又因为disabledDate函数是控制月份禁用不可选
          // 所以,最终就是:时间选择器的月份大于当前的月份,就都禁用掉,所以就实现了最终效果:
          // 大于等于当前月份都不可选
          return elTimeData > nowDate // 这里虽然是字符串,但是弱类型语言js会做一个转换,是可以比较大小的如: '202107' > '202008'
       },
    }
}

如果有些逻辑在data里处理不了  可以在methods处理:

8.64e7 是科学计数法算出的值,实际为(8.64×10×10×10×10×10×10×10),也就是一天毫秒数。

<el-date-picker
   v-model="yearMonth"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions">
 </el-date-picker>
export default {
    data() {
      return {
           pickerOptions: {
               disabledDate: this.disabledGetTime
           }
        }
    },
    methods:{
        disabledGetTime(time) {
          return time.getTime() < Date.now() - 8.64e7 ||  time.getTime() > new Date(this.uptimed).getTime() - 8.64e7
        },
    }
}

禁止周六周日

disabledDate(time) {
      return (
        [0,6].includes(time.getDay())
      );
    },

到此这篇关于element 时间选择器禁用选择的使用示例的文章就介绍到这了,更多相关element 时间选择器禁用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文