elementUI中el-date-picker如何禁用指定日期之前或之后的日期 - 网站

elementUI中el-date-picker如何禁用指定日期之前或之后的日期

分类:HTML_HTML5答疑 - 常见问题 · 发布时间:2023-10-20 05:06 · 阅读:10492

这篇文章介绍elementUI中el-date-picker禁用指定日期之前或之后的日期,通过配置picker-options配置指定禁用日期(pickerOptions写到data里面),感兴趣的朋友跟随小编一起看看吧

一、elementUI中el-date-picker禁用指定日期之前或之后的日期

通过配置picker-options配置指定禁用日期(pickerOptions写到data里面)

1.今天之前的日期禁止选择 

pickerOptions: { disabledDate(time) { return time.getTime() 

2.不能选择今日之后的日期(今天可选)

pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); } }

 解析:(1)Date.now()获取当前时间(表示自 UNIX 纪元开始(1970 年 1 月 1 日 00:00:00 (UTC))到当前时间的毫秒数)

(2)- 8.64e7 表示可选择当天时间(注:小于当前时间,- 8.64e7 则是禁用日期不包含当前日,若大于当前日期, 8.64e7 则是禁用日期包含当前日)

time.getTime()

time.getTime() > Date.now() - 8.64e7  禁用日期包含当前日

(3)time.getTime() 代表只能选择今天之后的时间【包含今天】(8.64e7:科学计数法,代表8.64×10的7次方)

3.禁用指定日期,如禁用大于2023-04-05日期,包括当天也不可选

pickerOptions: { disabledDate(time) { return time.getTime() > this.specifyDate - 8.64e7; } }

解析:this.specifyDate是指定日期,- 8.64e7 表示可选择当天日期,

例如:return time.getTime() > new Date("2023-04-05").getTime() - 8.64e7;

附加:h5写法

设置禁止选择小于今天的日期,通过min设置【max禁止选择大于今天的日期】

const date_now = new Date(); const year = date_now.getFullYear(); const month = date_now.getMonth()+1 <10 ? "0" + (date_now.getmonth() 1) : 1); const date=date_now.getDate() < 10 date_now.getdate() date_now.getdate(); $("#finishtime").attr("min", year "-" month date);< pre>

到此这篇关于el-date-picker禁用指定日期之前或之后的日期的文章就介绍到这了,更多相关el-date-picker禁用指定日期内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!

标签:
日期 el-date-picker

相关文章

HTML5标签正确的使用方式

HTML5标签是HTML语言的最新版本引入的一些新的标签,这些标签用于定义网页内容的结构和语义,相比于以前的HTML版本,HTML5标签提供了更加语义化的元素,本文就给大家介绍HTML5标签正确的使用方式,需要的朋友可以参考下

meta标签name="referrer"属性简介和用法小结

HTML标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的,本篇文章给大家介绍meta标签name="referrer"属性简介和用法小结,感兴趣的朋友跟随小编一起看看吧

基于MUI框架使用HTML5实现的二维码扫描功能

这篇文章主要介绍了基于MUI框架使用HTML5实现的二维码扫描功能,需要的朋友可以参考下

html5项目实现扫描二维码功能

扫描二维码是很常见的一种功能,本文就来介绍一下html5项目实现扫描二维码功能,具有一定的参考价值,感兴趣的可以了解一下

HTML5 video进入全屏和退出全屏的实现方法

这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

返回分类 返回首页