elements UI 日期控件 禁止选择日期

97 阅读1分钟

1 禁止选择当前日期之前的日期

代码如下:

              :picker-options="pickerOptions"  禁用日期
               picker-options 范围控制
               pickerOptions
               
     <el-date-picker
          v-model="formData.chargeDate"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getData"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
        
          data() {
    return {
      pickerOptions: {
        disabledDate:this.disabledDateTime
          }}}
          
          methods:{
            disabledDateTime(time){
return moment(time).format('YYYY-MM-DD')< moment(new Date()).format('YYYY-MM-DD');
    },
          }
        

代码解析: moment 是一个时间格式化的组件库

2禁止选择当前日期之后的日期
只有方法不同 其他一样


    disabledDateTime(time){
return time.getTime()> Date.now()
    },

小结

一个picker-options 对象中,包含了一个key 为 disabledDate ,value 为一个返回值为布尔值的函数,有个默认参数是time