el-date-picker组件设定指定时间起一个月的限制（PS：日常笔记）

最新推荐文章于 2024-09-13 09:11:40 发布

Victor.IT

最新推荐文章于 2024-09-13 09:11:40 发布

阅读量635

点赞数

文章标签：笔记 javascript vue.js

本文链接：https://blog.csdn.net/lichaoqun678/article/details/130770418

版权

文章描述了一个Vue.js组件`el-date-picker`的使用，特别是在`pickerOptions`中设置`disabledDate`的逻辑，以确保用户只能选择从次日起到一个月内的日期，不允许选择当前时间之前或一个月之后的日期。

摘要由CSDN通过智能技术生成

<el-date-picker
    type="date"
    style="width: 100%;"
    placeholder="不选择默认次日"
    value-format="yyyy-MM-dd"
    v-model="extract_day"
    :picker-options="pickerOptions"
/>

extract_day: '',//定时抽取选择时间
pickerOptions: {//定时抽取选择时间框筛选只能次日起一个月
 disabledDate: (obj) => {
   // 获取时间
   let date = new Date() // 获取时间
   let year = date.getFullYear() // 获取年
   let month = (date.getMonth() + 1)>9 ? (date.getMonth() + 1):('0'+(date.getMonth() + 1)) // 获取月
   let day = date.getDate()+1<10 ? ("0" + (date.getDate()+1)):date.getDate()+1//获取次日时间
   let splitMonth = month;

   // 起始时间
   let monthBegin;
   if(month == '10'){
     monthBegin = '09'
   }else{
     monthBegin = splitMonth[0]+''+(splitMonth[1]-1);
   };
   console.log(monthBegin)
   let dateBegin = new Date(year,monthBegin,day);
   let timeBegin = dateBegin.getTime();

   // 当前时间
   let currentTime = obj.getTime();

   // 结束时间
   let dateEnd = new Date(year,month,day);
   let timeEnd = dateEnd.getTime()-3600 * 1000 * 24;

   // 时间选择范围
   return currentTime > timeEnd || currentTime<timeBegin;

 }

},