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

el-date-picker 时间控件校验选择时间必须早于当前时间(带时分秒)

el-date-picker 时间控件校验选择时间必须遭早于当前时间(带时分秒),然后监控时间控件,当时间改变的时候,如果不是当天,那时间可以选择全天也就是00-24时,如果是当天,就是当前时间之前

html部分

 <el-form-item label="注销时间" prop="logoutTime"><el-date-pickerv-model="formData.logoutTime":placeholder="'请选择注销时间'"type="datetime":picker-options="pickerOptions"style="width: 200px"></el-date-picker></el-form-item>

//js部分

      data(){pickerOptions: {disabledDate(time) {const date = new Date();return time.getTime() > new Date().getTime();// return time.getTime() > new Date().getTime() - 86400000;//这个不包含当天},selectableRange: (() => {let data = new Date();let hour = data.getHours();let minute = data.getMinutes();let second = data.getSeconds();return [`00:00:01 - ${hour}:${minute}:${second}`]})(),
},
}//监听时间控件的改变值watch: {'formData.logoutTime':{handler(newVal, oldVal) {//这里判断是不是今天let newValDate= new Date(newVal)//转换成中国标准时间if (newValDate &&newValDate.getFullYear() == new Date().getFullYear() &&newValDate.getMonth() == new Date().getMonth() &&newValDate.getDate() == new Date().getDate()) {//如果为今天,则限制当前时间后的时间不能选择。let data = new Date();let hour = data.getHours();let minute = data.getMinutes();let second = data.getSeconds();this.pickerOptions.selectableRange = [`00:00:01 - ${hour}:${minute}:${second}`]}else{//如果不是今天,则不用限制this.pickerOptions.selectableRange = "00:00:00 - 23:59:00";}}}},

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • CSS常见属性详解——内边距与外边距
  • 今日份感悟
  • 智慧工地视频汇聚管理平台:打造现代化工程管理的全新视界
  • Qt 使用视口和窗口作图
  • Windows本地启动Redis
  • Linux——管理本地用户和组(详细介绍了Linux中用户和组的概念及用法)
  • 上传项目到GitHub
  • 数据结构:二叉搜索树(简单C++代码实现)
  • 代码随想录day23 ||39组合总和1 40组合总和2 131分割回文串
  • dynslam的安装
  • 【GoF23种设计模式+简单工厂模式】
  • Perl 哈希
  • 计算机概述
  • github搜索指令
  • ElasticSearch(四)— 数据检索与查询
  • JS 中的深拷贝与浅拷贝
  • docker-consul
  • iOS 系统授权开发
  • mongodb--安装和初步使用教程
  • React组件设计模式(一)
  • SpingCloudBus整合RabbitMQ
  • spring-boot List转Page
  • SQLServer之创建数据库快照
  • Swift 中的尾递归和蹦床
  • 检测对象或数组
  • 前端设计模式
  • 入口文件开始,分析Vue源码实现
  • 携程小程序初体验
  • 移动端唤起键盘时取消position:fixed定位
  • 智能网联汽车信息安全
  • 走向全栈之MongoDB的使用
  • 06-01 点餐小程序前台界面搭建
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • $ git push -u origin master 推送到远程库出错
  • $(selector).each()和$.each()的区别
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (1)SpringCloud 整合Python
  • (8)STL算法之替换
  • (C)一些题4
  • (C语言)fgets与fputs函数详解
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (状压dp)uva 10817 Headmaster's Headache
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • ../depcomp: line 571: exec: g++: not found
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET Standard 的管理策略
  • .NET 设计模式初探