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

vue el-date-picker 日期选择器禁用失效问题

value-format="yyyy-MM-dd"的格式不要改为"yyyyMMdd",否则会导致日期选择器禁用失效问题,因为该组件默认的格式就是yyyy-MM-dd。

<el-col v-for="(item, index) in formData" :key="index" ><el-date-pickerv-else-if="item.type === 'datePicker'"v-model="form[item.prop]":placeholder="item.placeholder":picker-options="item.pickerOptions"type="date"value-format="yyyy-MM-dd"clearable/>
</el-col>

在表单渲染时会调用this.beginDate()this.endDate()

data() {return {formData: [ {type: 'datePicker',placeholder: '起始日期',prop: 'startDate',pickerOptions: this.beginDate()},{type: 'datePicker',placeholder: '截止日期',prop: 'endDate',pickerOptions: this.endDate()}]}
}
methods: {beginDate() {const self = this;return {// 组件的方法,禁用返回的日期disabledDate(time) {if (self.form.endDate) {// 禁用大于结束日期的日期return time.getTime() > new Date(self.form.endDate).getTime();} }};},endDate() {const self = this;return {disabledDate(time) {if (self.form.startDate) {// 禁用小于开始日期的日期return time.getTime() < new Date(self.form.startDate).getTime();} }};}}
http://www.lryc.cn/news/483845.html

相关文章:

  • 搭建Python2和Python3虚拟环境
  • 【HarmonyOS NEXT】一次开发多端部署(以轮播图、Tab栏、列表为例,配合栅格布局与媒体查询,进行 UI 的一多开发)
  • ubontu--cuDNN安装
  • 高项 - 项目范围管理
  • 如何获取PostgreSQL慢查询?从小白到高手的实战指南
  • golang分布式缓存项目 Day4 一致性哈希
  • ARM 汇编指令
  • 打造个性化体验:在Axure中创建你的专属组件库
  • 如何用WordPress和Shopify提升SEO表现?
  • 不泄密的安全远程控制软件需要哪些技术
  • rust高级特征
  • STM32F407简单驱动步进电机(标准库)
  • 使用热冻结数据层生命周期优化在 Elastic Cloud 中存储日志的成本
  • LeetCode131. 分割回文串(2024冬季每日一题 4)
  • 万字长文解读深度学习——训练(DeepSpeed、Accelerate)、优化(蒸馏、剪枝、量化)、部署细节
  • STM32—独立看门狗(IWDG)和窗口看门狗(WWDG)
  • ks8 本地化部署 F5-TTS
  • Web组态大屏可视化编辑器
  • 【comfyui教程】让模特换衣服,comfyui一键搞定!
  • 数据湖与数据仓库的区别
  • golang分布式缓存项目 Day6 防止缓存击穿
  • Redis高可用-主从复制
  • Angular框架:构建现代Web应用的全面指南
  • Golang | Leetcode Golang题解之第563题二叉树的坡度
  • gdb编译教程(支持linux下X86和ARM架构)
  • Android 开发指南:初学者入门
  • 镭速大文件传输软件向金融银行的文档管理提供高效的解决方案
  • D64【python 接口自动化学习】- python基础之数据库
  • HTTP 客户端怎么向 Spring Cloud Sleuth 传输跟踪 ID
  • 为什么hbase在大数据领域渐渐消失