当前位置: 首页 > 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";}}}},

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

相关文章:

  • godot新建项目及设置外部编辑器为vscode
  • vue中无法调试
  • python机器学习8--自然语言处理(2)
  • LinkedList底层原理
  • CSS技巧专栏:一日一例 11 -纯CSS实现多彩渐变按钮系列特效
  • 基于微信小程序+SpringBoot+Vue的自助点餐系统(带1w+文档)
  • 04-Charles中的Map Remote和Map Local介绍
  • R语言优雅的进行广义可加模型泊松回归分析
  • 大模型学习笔记十四:Agent模型微调
  • 大疆创新2025校招内推
  • 搜索引擎项目(四)
  • 声音克隆一键本地化部署 GPT-SoVITS
  • 使用【Easypoi】实现百万数据导出
  • GRL-图强化学习
  • 昇思25天学习打卡营第22天|Pix2Pix实现图像转换
  • 全感知、全覆盖、全智能的智慧快消开源了。
  • ABC364:D - K-th Nearest(二分)
  • hive中分区与分桶的区别
  • Blender材质-PBR与纹理材质
  • 微软的Edge浏览器如何设置兼容模式
  • SpringBoot开启多端口探究(1)
  • 优化算法:2.粒子群算法(PSO)及Python实现
  • ThreadLocal面试三道题
  • Git操作指令(已完结)
  • 大数据采集工具——Flume简介安装配置使用教程
  • C语言 #具有展开功能的排雷游戏
  • npm publish出错,‘proxy‘ config is set properly. See: ‘npm help config‘
  • Springboot 多数据源事务
  • Python每日学习
  • 数据库 执行sql添加删除字段