• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue el-date-picker动态限制时间范围案例详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

分为两种情况

1.开始时间和结束时间同一个框(限制只能本月)

2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)

 情况1

//情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
//本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-date-picker
   v-model="time"
   type="datetimerange"
   @change="datePickerChange"
   :picker-options="pickerOptions"
   range-separator="-"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   align="right"
   style="width:100%;"
   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
   :default-time="['00:00:00','23:59:59']">
</el-date-picker>
 
 
//script
 
data(){
  return {
     selectData: '',
     pickerOptions: {
      // 点击时,选择的是开始时间,也就是minDate
      onPick: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // 解除限制
           this.selectData = ''
         }
      },
      disabledDate: (time) => {
          // 是否限制的判断条件
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // 这里就是限制的条件,这里为大于或者小于本月的日期被禁用(尽量不使用这种方法,因为其他年份的本月也能进行选择,具体限制日期参考情况2)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
     }
  }
},
methods:{
  // 检查是否为空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}
 

情况2

//情况2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="预约开始时间:">
                  <el-date-picker
                    v-model="editForm.beginTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    :picker-options="pickerOptions[0]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[0]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item prop="endTime" label="预约结束时间:">
                  <el-date-picker
                    v-model="editForm.endTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    :picker-options="pickerOptions[1]"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="defaultTime[1]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              
              
 //script
    data(){
  return {
     selectData: '',
     defaultTime: [],
     pickerOptions: [
        {
          disabledDate: time => {
            const curDate = new Date().getTime();
            const day = 14 * 24 * 3600 * 1000;
            const dateRegion = curDate + day;
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > dateRegion
            );
          }
        },
        {
          //限制结束时间为开始时间的一周后
          disabledDate: time => {
            // 是否限制的判断条件
            const date = new Date(this.editForm.beginTime);
            if (!this.isNull(date)) {
              const day = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + day;
              return (
                //禁用小于开始时间和大与开始时间一周后的日期
                new Date(time).getTime() > dateRegion ||
                new Date(time).getTime() < date.getTime()
              );
            } else {
              return false;
            }
          }
        }
      ],
  }
},
methods:{
  // 检查是否为空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  },
  //获得当前时间并添加选中时的默认值
  getNowTime() {
      let d = new Date();
      let year, month, day, hour, minute;
      //当前时间的十分钟后
      d.setTime(d.getTime() + 10 * 60 * 1000);
      [year, month, day, hour, minute] = [
        d.getFullYear(),
        d.getMonth(),
        d.getDate(),
        d.getHours(),
        d.getMinutes()
      ];
      let hour2 = hour + 1;
      //选中开始时间时的默认值为当前时间的十分钟后
      //选中结束时间时的默认值为当前时间的一个小时十分钟后
      this.defaultTime = [
        hour + ":" + minute + ":00",
        hour2 + ":" + minute + ":00"
      ];
    },
}

到此这篇关于vue el-date-picker动态限制时间范围案例详解的文章就介绍到这了,更多相关vue el-date-picker动态限制时间范围内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue3项目中优雅实现微信授权登录的方法发布时间:2022-02-05
下一篇:
JavaScript实现简易轮播图最全代码解析(ES5)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap