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 對象

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