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

el-date-picker限制只能选择当前时间前/后的时间(包含日期、时、分)

限制只能选择当前时间前/后的时间(包含日期、时、分)

  1. 首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。
<el-date-pickerv-model="saveForm.startTime":picker-options="pickerOptions"format="yyyy-MM-dd HH:mm"value-format="timestamp"type="datetime"placeholder="选择开始时间"style="width: 47%"default-time="9:00:00"
/>
  1. disabledDate用于禁用当前日期前的所有日期,有的小伙伴可能会疑问,为什么要“-8.64e7”,是因为单纯使用time.getTime() < Date.now() 这段代码的效果是会使当前日期也会被禁用掉,这时候就需要在当前日期的基础上减掉一天,表示可以选择当天。
    限制完日期后,可能还会需要限制时间的选择,这里我们使用selectableRange对时间进行限制,获取当前时间,然后做一个时间的拼接即可。限制只能选择当前时间前的代码如下,稍微变动一下:

data(){return:{pickerOptions: {disabledDate: time => {return time.getTime() < Date.now() - 8.64e7},selectableRange: new Date().getHours() + ':' + (new Date().getMinutes() + 1) + ':00' + ' - 23:59:59'}}
}

3 ,以上代码只是限制了当天的的时间的选择,还没有完成。我们需要在合适的时间对我们的时间选择框进行放开和限制。比如限制只能选择当前时间前的时间,那么前一天的时间是00:00:00-23:59:59的时间都可以选择,而今天则不能放开全选。参考以下代码:


watch:{// 开始时间'saveForm.startTime'(selectTime){const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today = new Date(new Date().setHours(0,0,0,0)).getTime()if (date <= today){// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange =  new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'}else {// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'}},// 结束时间'saveForm.endTime'(selectTime){const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today = new Date(new Date().setHours(0,0,0,0)).getTime()if (date <= today){// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange =  new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'}else {// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'}}
http://www.lryc.cn/news/339876.html

相关文章:

  • MySQL 5.7 重置root用户密码
  • 分布式数据库Polardb-X架构及特点
  • 【spring】@Resource注解学习
  • 【leetcode面试经典150题】43. 字母异位词分组(C++)
  • 计算机网络 Cisco路由器基本配置
  • Windows Edge 兼容性问题修复:提升用户体验的关键步骤
  • Vue 3 性能飞跃:解析其性能提升的关键方面
  • MySQL 存储过程中,参数的传递主要通过以下两种方式:IN、OUT 和 INOUT
  • 修改当前Git仓库的地址、用户名、密码
  • 尚鼎环境科技诚邀您参观2024第13届生物发酵展
  • UE5 C++ 创建3DWidgete 血条 再造成伤害
  • Android 14 vold 分析(1)启动
  • 【云计算】混合云组成、应用场景、风险挑战
  • spring bean的继承和依赖
  • Swift中的字符串
  • MySQL基础-----约束详解
  • 【Unity】游戏场景添加后处理特效PostProcessing
  • STM32芯片软复位导致SRAM2的值被擦除话题
  • 【C++航海王:追寻罗杰的编程之路】异常——错误处理方式之一
  • 5.2 mybatis之autoMappingBehavior作用
  • 【算法一则】做算法学数据结构 - 简化路径 - 【栈】
  • OpenHarmony实战开发-如何使用Web预渲染实现功能介绍。
  • 三七互娱,oppo,快手25届暑期实习内推
  • InnoDB架构:内存篇
  • 8个Python高效数据分析的技巧
  • 暴力破解密码自动阻断
  • 【华为】Telnet实验配置
  • SAM功能改进VRP-SAM论文解读VRP-SAM: SAM with Visual Reference Prompt
  • MySQL truncate table 与 delete 清空表的区别和坑
  • Spring GA、PRE、SNAPSHOT 版本含义及区别