当前位置: 首页 > news >正文

Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

网上很多都是不完整的,我这里发布一个完整的

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

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

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

1.只能选择当日

<el-date-pickerformat="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"v-model="ruleForm.shenqingshijian"type="date":picker-options="pickerOptions"placeholder="申请时间">
</el-date-picker><script>
export default {data() {return {selectedDate: null,pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() || (time.getTime() < Date.now() - 8.64e7); }, },};},
};
</script>


2.限制只能选择当天之前的日期                        

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},},};},
};
</script>

3.限制只能选择当天之后的日期

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() < Date.now();},},};},
};
</script>

http://www.lryc.cn/news/350192.html

相关文章:

  • 系列介绍:《创意代码:Processing艺术编程之旅》
  • 深度学习设计模式之抽象工厂模式
  • K8s是什么?
  • 【网站项目】SpringBoot796水产养殖系统
  • Vue详细介绍
  • 声纹识别的对抗与防御
  • C++ QT设计模式总结
  • 洛谷 P3203:弹飞绵羊 ← 分块算法(单点更新、单点查询)
  • 程序验证之Dafny--证明霍尔逻辑的半自动化利器
  • Flutter 中的 SafeArea 小部件:全面指南
  • webpack生成模块关系依赖图示例:查看构建产物的组成部分 依赖关系图
  • Spacy的安装与使用教程
  • Pathlib,一个不怕迷路的 Python 向导
  • 详解绝对路径和相对路径的区别
  • C++二叉搜索树搜索二叉树二叉排序树
  • Java 自然排序和比较器排序区别?Comparable接口和Comparator比较器区别?
  • 【CV】opencv调用DIS/LK等计算光流,前一帧和当前帧写反了有什么影响?
  • C语言学习细节|C语言面向对象编程!函数指针如何正确使用
  • C语言简要(一)
  • 那些年我与c++的叫板(一)--string类自实现
  • 二刷算法训练营Day08 | 字符串(1/2)
  • 使用高防IP是应对网络安全的重要措施
  • 代码随想录-算法训练营day40【动态规划03:整数拆分、不同的二叉搜索树】
  • MySQL数据库中基本数据管理操作
  • 记录一下Hql遇到的零碎问题
  • Flutter 中的 TextField 小部件:全面指南
  • GPT-4o:全面深入了解 OpenAI 的 GPT-4o
  • 2024中国应急(消防)品牌巡展西安站成功召开!惊喜不断
  • 信创电脑|暴雨新增兆芯KX-7000处理器版本
  • 面向对象 07:抽象类相关知识,抽象类的基本概念,使用方式,以及一些注意事项