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实现表单验证小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3的二维码组件vue3-next-qrcode

    vue3的二维码组件vue3-next-qrcode

    这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue3中数据响应式原理与高效数据操作全解析

    Vue3中数据响应式原理与高效数据操作全解析

    这篇文章主要为大家详细介绍了Vue3中数据响应式原理与高效数据操作的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • vue-video-player视频播放器使用配置详解

    vue-video-player视频播放器使用配置详解

    这篇文章主要为大家详细介绍了vue-video-player视频播放器的使用和配置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue复杂表格单元格合并根据数据动态合并方式

    vue复杂表格单元格合并根据数据动态合并方式

    这篇文章主要介绍了vue复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue中mixins的使用方法以及实际项目应用指南

    Vue中mixins的使用方法以及实际项目应用指南

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用,下面这篇文章主要给大家介绍了关于Vue中mixins的使用方法以及实际项目应用指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解vue的Des加密解密

    详解vue的Des加密解密

    这篇文章主要为大家介绍了vue的Des加密解密使用实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue的异步组件加载的实现方法小结

    Vue的异步组件加载的实现方法小结

    在 Vue 中,异步组件是指那些在需要时才会被加载的组件,与传统的静态组件不同,异步组件通过动态加载的方式,可以有效地减少初始加载的资源和时间,在 Vue 中实现异步组件加载非常简单,开发者有多种方法可以做到,本文给大家介绍了一些常用的实现方法
    2024-11-11
  • Vue3 全局实例上挂载属性方法案例讲解

    Vue3 全局实例上挂载属性方法案例讲解

    这篇文章主要介绍了Vue3 全局实例上挂载属性方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue使用cesium创建数据白模方式

    vue使用cesium创建数据白模方式

    这篇文章主要介绍了vue使用cesium创建数据白模方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论