elementUI中el-date-picker如何禁用指定日期之前或之后的日期
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
一、elementUI中el-date-picker禁用指定日期之前或之后的日期
通过配置picker-options配置指定禁用日期（pickerOptions写到data里面）
<el-date-picker v-model="date" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'选择日期'" :picker-options="pickerOptions" ></el-date-picker>
1.今天之前的日期禁止选择
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
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() < Date.now() - 8.64e7 禁用日期不包含当前日
time.getTime() > Date.now() - 8.64e7 禁用日期包含当前日
（3）time.getTime() < Date.now() - 8.64e7 代表只能选择今天之后的时间【包含今天】(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写法
<input type="date" placeholder="请选择日期" id="finishTime" name="finishTime" >
设置禁止选择小于今天的日期，通过min设置【max禁止选择大于今天的日期】
const date_now = new Date();
const year = date_now.getFullYear();
const month = date_now.getMonth()+1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
const date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
$("#finishTime").attr("min", year + "-" + month + "-" + date);
到此这篇关于el-date-picker禁用指定日期之前或之后的日期的文章就介绍到这了,更多相关el-date-picker禁用指定日期内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
elementUI中el-date-picker如何禁用指定日期之前或之后的日期
这篇文章介绍elementUI中el-date-picker禁用指定日期之前或之后的日期，通过配置picker-options配置指定禁用日期（pickerOptions写到data里面），感兴趣的朋友跟随小编一起2023-10-18meta标签name="referrer"属性简介和用法小结
HTML<meta>标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息，可以告诉服务器端用户是从哪个页面来到当前网页的,本篇文章给大家介绍me2023-10-18
扫描二维码是很常见的一种功能，本文就来介绍一下html5项目实现扫描二维码功能，具有一定的参考价值，感兴趣的可以了解一下2023-10-07- HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹，本文就来实现一下HTML5实现同时选择多个文件夹上传的使用示例，具有一定的参考价2023-09-28
- HTML5中的video标签用于播放视频文件的，本文介绍了Html5 video 标签 src 用数据流方式播放视频，具有一定的参考价值，感兴趣的可以了解一下2023-09-27
H5使用Vant自适应布局(postcss-pxtorem)
本文将介绍如何使用Vant组件库中的自适应布局来实现H5页面的优化和适配，可以使H5页面达到更佳的用户体验,具有一定的参考价值，感兴趣的可以了解一下2023-09-20
使用uniapp开发打包H5及PC和小程序，H5端实现登录需求一开始是接入阿里云的手机号一键登录服务，但是H5的一键登录功能需要关闭WiFi开启数据才有效，所以换为了四位短信验证2023-09-19
html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库，集成二维码、条形码和其他一些类型的代码扫描功能，这篇文章主要介绍了使用 html5-qrcode 扫码功能,需要的朋友可2023-09-13
公司新做了个功能，一些审核的地方需要加入一些手写签名的功能，本文就介绍了html5手写签名的实现示例，具有一定的参考价值，感兴趣的可以了解一下2023-07-17
关于input type="file"的及其files对象的深度解析
我们都知道，html5中有个input type=file元素，用该元素可以实现页面上传文件的功能，这篇文章主要介绍了关于input type="file"的及其files对象的深层解析,需要2023-07-13
最新评论