Element DateTimePicker日期时间选择器

1.控制开始结束时间
          <div >
            <label class="el-form-item__label">开始时间:</label>
            <el-date-picker type="datetime" :picker-options="pickerOptions" placeholder="选择时间" v-model="form.start"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </div>

          <div >
            <label class="el-form-item__label">结束时间:</label>
            <el-date-picker type="datetime" default-time="23:59:59" :picker-options="pickerOptionsEnd" placeholder="选择时间" v-model="form.end"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </div>

     //验证规则  大于当前时间且开始时间小于结束时间
          pickerOptionsEnd: {
          disabledDate:time =>{
            let beginDateVal = this.form.start;
            if (beginDateVal) {
              return (time.getTime() + 3600 * 1000 * 24) < Date.now() || time.getTime() < new Date(beginDateVal)
                .getTime();
            } else {
              return (time.getTime() + 3600 * 1000 * 24) < Date.now()
            }
          }
        }, //时间选择
        pickerOptions: {
          disabledDate:time =>{
            let endDateVal = this.form.end;
            if (endDateVal) {
              return (time.getTime() + 3600 * 1000 * 24) < Date.now() || time.getTime() > new Date(endDateVal).getTime();
            } else {
              return (time.getTime() + 3600 * 1000 * 24) < Date.now()
            }
          }
        }, 

2.DateTimePicker 默认时间为00:00:00  可以设置通过设置default-time值来更改默认时间

3.value-format可选,绑定值的格式。不指定则绑定值为 Date 对象

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章