element-ui时间日期选择器限制选择范围的几种场景

 更新时间:2023年08月19日 14:23:27   作者:卜是我的错  
这篇文章主要给大家介绍了关于element-ui时间日期选择器限制选择范围的几种场景,一般在实际开发场景中我们需要对时间选择做一些限制,如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等,需要的朋友可以参考下

组件代码

<el-date-picker 
	v-model="timeVal" 
	value-format="yyyy/MM/dd"
	format="yyyy/MM/dd" 
	size="small" 
	:picker-options="pickerOptions" 
	type="daterange" 
	placeholder="自定义时间"  
	@change="onchangeTime" >
</el-date-picker>

场景1:设置选择今天及今天之后的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },  
   }     
} 

在这里插入图片描述

情景2: 设置选择今天以及今天以前的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
        },  
   }     
}   

在这里插入图片描述

情景3: 设置选择三个月之内到今天的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
           	let curDate = (new Date()).getTime();
           	let three = 90 * 24 * 3600 * 1000;
          	let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;
          }
        },  
   }     
}   

情景4: 设置选择最大范围为30天

data (){
   return {
   	   pickerMinDate: null,
       pickerMaxDate: null,
       pickerOptions: {
	     onPick: ({ maxDate, minDate }) => {
	         if (minDate && this.pickerMinDate) {
	           this.pickerMinDate = null;
	         } else if (minDate) {
	           this.pickerMinDate = minDate.getTime();
	         }
	      },
          disabledDate: (time) => {
          	if (this.pickerMinDate) {
            	const day1 =  30 * 24 * 3600 * 1000
           		let maxTime = this.pickerMinDate + day1
            	let minTime = this.pickerMinDate - day1
            	return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()
          	} else {
            	return time.getTime() > Date.now()
          	}
       	  },
      },  
   }     
}   

在这里插入图片描述

总结 

到此这篇关于element-ui时间日期选择器限制选择范围的几种场景的文章就介绍到这了,更多相关element-ui日期选择器限制范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • axios的拦截请求与响应方法

    axios的拦截请求与响应方法

    今天小编就为大家分享一篇axios的拦截请求与响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    这篇文章主要介绍了vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue中provide、inject的使用方法案例详解

    vue中provide、inject的使用方法案例详解

    本教程是介绍如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于实现祖先组件向后代组件传递数据的一种方式,对vue中provide、inject的使用方法感兴趣的朋友一起看看吧
    2024-02-02
  • Vue的样式绑定详解

    Vue的样式绑定详解

    这篇文章主要为大家详细介绍了Vue的样式绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vant中的picker选择器自定义选项内容

    vant中的picker选择器自定义选项内容

    这篇文章主要介绍了vant中的picker选择器自定义选项内容,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue.js列表渲染绑定jQuery插件的正确姿势

    Vue.js列表渲染绑定jQuery插件的正确姿势

    这篇文章主要为大家详细介绍了Vue.js列表渲染绑定jQuery插件的正确姿势,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解vue的diff算法原理

    详解vue的diff算法原理

    这篇文章主要介绍了详解vue的diff算法原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue3基于 rem 比例缩放方案示例详解

    Vue3基于 rem 比例缩放方案示例详解

    这篇文章主要介绍了Vue3基于rem比例缩放方案,本缩放方案置于hooks中即可,文中通过示例代码介绍了vue-cli3 中使用rem布局的方法,需要的朋友可以参考下
    2023-05-05
  • Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue 实现 tomato timer(蕃茄钟)实例讲解

    vue 实现 tomato timer(蕃茄钟)实例讲解

    下面小编就为大家带来一篇vue 实现 tomato timer(蕃茄钟)实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论