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日期选择器限制范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue自定义指令学习及应用详解

    Vue自定义指令学习及应用详解

    这篇文章主要为大家详细介绍了Vue中自定义指令的学习以及如何利用Vue制作一个简单的学生信息管理系统,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-05-05
  • 关于ElementPlus中的表单验证规则详解

    关于ElementPlus中的表单验证规则详解

    这篇文章主要介绍了关于ElementPlus中的表单验证,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue3实现canvas画布组件自定义画板实例代码

    Vue3实现canvas画布组件自定义画板实例代码

    Vue Canvas是一个基于Vue.js的轻量级画板组件,旨在提供一个简易的画布功能,用户可以在网页上进行自由绘图,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • Vue中nprogress页面加载进度条的方法实现

    Vue中nprogress页面加载进度条的方法实现

    这篇文章主要介绍了Vue中nprogress页面加载进度条的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue 实现的树形菜的实例代码

    vue 实现的树形菜的实例代码

    这篇文章主要介绍了vue 实现的树形菜单,需要的朋友可以参考下
    2018-03-03
  • Vue中对组件二开解决思路以及方案

    Vue中对组件二开解决思路以及方案

    这篇文章主要介绍了Vue中对组件二开解决思路以及方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04
  • vue 监听input输入事件(oninput)的示例代码支持模糊查询

    vue 监听input输入事件(oninput)的示例代码支持模糊查询

    这篇文章主要介绍了vue 监听input输入事件(oninput)支持模糊查询,比如说表格模糊查询,实现一边输入,一边过滤数据,本文通过示例代码给大家详细讲解,需要的朋友可以参考下
    2023-02-02
  • 详解关于Vue版本不匹配问题(Vue packages version mismatch)

    详解关于Vue版本不匹配问题(Vue packages version mismatch)

    这篇文章主要介绍了详解关于Vue版本不匹配问题(Vue packages version mismatch),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • VUE+Canvas实现财神爷接元宝小游戏

    VUE+Canvas实现财神爷接元宝小游戏

    这篇文章主要介绍了VUE+Canvas实现财神爷接元宝小游戏,需要的朋友可以参考下本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-04-04
  • Vue3 computed初始化获取设置值实现示例

    Vue3 computed初始化获取设置值实现示例

    这篇文章主要为大家介绍了Vue3 computed初始化以及获取值设置值实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论