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

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

html 复制代码
<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()

js 复制代码
data() {
    return {
      formData: [ 
        {
          type: 'datePicker',
          placeholder: '起始日期',
          prop: 'startDate',
          pickerOptions: this.beginDate()
        },
        {
          type: 'datePicker',
          placeholder: '截止日期',
          prop: 'endDate',
          pickerOptions: this.endDate()
        }
      ]
   }
}
js 复制代码
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();
          } 
        }
      };
    }
 }
相关推荐
南雨北斗3 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪4 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss27 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海27 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手29 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪32 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪33 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__35 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工38 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主40 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端