elementui 日期时间插件的限定范围和值的格式


          
        
        
          
        

value-format:用来转换日期格式

default-time:用来设定默认时间

:picker-options:用来限定前后两个日期选择范围问题---》前一个日期限定之后,后一个不能再选之前的----》data中参数写法

pickerOptionsStart: {
    disabledDate: time => {
      if (this.listQuery.endDate) {
        return time.getTime() > new Date(this.listQuery.endDate).getTime()
      }
    }
  },
  pickerOptionsEnd: {
    disabledDate: time => {
      if (this.listQuery.startDate) {
        return time.getTime() < new Date(this.listQuery.startDate).getTime()
      }
    }
  }

将以这两个绑定的参数放入data中即可实现

点击日期输入框里面的清除按钮之后,这是绑定的数据就是null了,需要注意
下面是解决点击清除按钮绑定数据是null的方法:

watch:{
            'listQuery': {//解决elementui时间插件清空后值为null的问题
              handler(newName, oldName) {
                //newVal是指更新后的数据
                //oldName是指更新之前的数据
                newName.startDate == null ? this.listQuery.startDate = "" : this.listQuery.startDate = this.listQuery.startDate;
                newName.endDate == null ? this.listQuery.endDate = "" : this.listQuery.endDate = this.listQuery.endDate;
              },
              deep: true,
              immediate: true
            }
        },

可以用watch监听数据后改变null

你可能感兴趣的:(elementui 日期时间插件的限定范围和值的格式)