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

<el-form-item label="开始时间:">
          <el-date-picker
            v-model="listQuery.startDate"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
            default-time="00:00:00"
          />
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker
            v-model="listQuery.endDate"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"  
            :picker-options="pickerOptionsEnd"
            default-time="23:59:59"
          />
        </el-form-item>
<!-- 两个单个的日期时间选则器 --!>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容