element-ui 日期时间选择器限制日期以及时间范围

最新推荐文章于 2024-08-22 13:30:11 发布

lanceeeeeeeee

最新推荐文章于 2024-08-22 13:30:11 发布

阅读量7.1k

点赞数 1

分类专栏： elementUI css vue 文章标签： vue javascript css 前端

本文链接：https://blog.csdn.net/weixin_43735321/article/details/106380033

版权

vue 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

elementUI

2 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

element-ui 日期时间选择器限制日期以及时间范围.

- 实现效果:
- 实现方式:

业务背景:
日期:只能选择今天以后的日期(包含今天),
时间:只能选择当前日期时间一小时以后的时间.

实现效果:

在这里插入图片描述

实现方式:

1、使用参数 element-ui 控件方法 picker-options

disabledDate ：控制只能选择今天及以后的日期
selectableRange ：控制选择的时间段。如果是今天，则时间从此刻开始，否则从0时开始

<el-date-picker
        class="time-parker"
         v-if="newFormData.sendFlag == 1"
         value-format="yyyy-MM-dd HH:mm:ss"
         format="yyyy-MM-dd HH:mm:ss"
         v-model="newFormData.sendTime"
         :picker-options="{
            disabledDate: time => {
               return time.getTime() < Date.now() - 3600 * 1000 * 24
             },
             selectableRange: startTimeRange
           }"
         type="datetime">
 </el-date-picker>

日期格式转换我再filters里做的,这个随意,也可以自己写方法:

filters: {
	sendTimeDate: function (date) {
         if (!!date) {
             var nowDate =
                 new Date(date).getFullYear() +
                 '-' +
                 (new Date(date).getMonth() + 1 < 10 ? '0' + (new Date(date).getMonth() + 1) : new Date(date).getMonth() + 1) +
                 '-' +
                  (new Date(date).getDate(date) < 10 ? '0' + new Date(date).getDate(date) : new Date(date).getDate(date));
             var nowTime =
                  (new Date(date).getHours() < 10 ? '0' + new Date(date).getHours() : new Date(date).getHours()) +
                 ':' +
                  (new Date(date).getMinutes() < 10 ? '0' + new Date(date).getMinutes() : new Date(date).getMinutes()) +
                 ':' +
                  (new Date(date).getSeconds() < 10 ? '0' + new Date(date).getSeconds() : new Date(date).getSeconds());
    		return nowDate + ' ' + nowTime;
         } else {
             return ''
         }
     },
}

在watch里监听对时间进行处理:

watch: {
	'newFormData.sendTime':{
	       deep:true,
	       handler(newValue, oldValue) {
	           if(newValue){
					let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+3600000);// 一小时之后的时间(我是因业务要求,这里可以随意调整时间)
					let dt = nowDate.split(" ");
					let st = '';
					 if(newValue.split(" ")[0] == dt[0]){
					     // 是今天,选择 的时间开始为此刻的时分秒
					     st = dt[1];
	                 }else{
	                     // 明天及以后从0时开始
	                     st = '00:00:00';
	                 }
	                 this.startTimeRange =  st + ' - 23:59:59';
	                 //例如：如果今天此刻时间为10:41:40 则选择时间范围为： 11:41:40 - 23:59:59
                        //否则为：00:00:00- 23:59:59
                    }
                }
            }
  		 },