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

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-picker
     v-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.kler.cn/a/393561.html

相关文章:

  • 文件输入输出——NOI
  • 搭建深度学习开发环境
  • C++编程:利用环形缓冲区优化 TCP 发送流程,避免 Short Write 问题
  • MySQL系列之如何在Linux只安装客户端
  • uniapp使用scroll-view下拉刷新与上滑加载
  • MySQL重难点(一)索引
  • 蓝队基础(详见B站泷羽sec)
  • 计算机网络之表示层
  • 【ReactPress】React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站
  • FFmpeg 怎么裁剪m4a的音频,从一个时间点开始,裁剪15秒钟的视频
  • 如何在 IntelliJ IDEA 中去掉 Java 方法注释后的空行
  • CUDA error: device-side assert triggered 报错解决
  • androidstudio下载gradle慢
  • openai Realtime API (实时语音)
  • 鸿蒙版APP-图书购物商城案例
  • 2023年MathorCup数学建模A题量子计算机在信用评分卡组合优化中的应用解题全过程文档加程序
  • ip addr show
  • 建筑施工特种作业人员安全生产知识试题
  • docker 镜像索引和用法
  • c++学习:封装继承多态
  • 「QT」几何数据类 之 QVector4D 四维向量类
  • 揭秘文心一言,智能助手新体验
  • Yolo11改进策略:上采样改进|CARAFE,轻量级上采样|即插即用|附改进方法+代码
  • 冒泡排序讲解
  • 【Linux取经之路】进程信号的保存
  • Python 正则表达式的一些介绍和使用方法说明(数字、字母和数字、电子邮件地址、网址、电话号码(简单)、IPv4 )