ElementUI el-time-picker-只顯示小時、分鐘，分並添加範圍校驗

兩種經常使用寫法：

1.提出日期：

<el-date-picker type="date" placeholder="選擇開始日期" 
v-model="seachObj.beginTime" style="width: 40%;" 
:picker-options="startDatePicker"
@change="dateChangeBeginTime"></el-date-picker>
至
<el-date-picker type="date" placeholder="選擇結束日期" 
v-model="seachObj.endTime" style="width: 40%;" 
:picker-options="endDatePicker" 
@change="dateChangeEndTime"></el-date-picker>

data(){
    startDatePicker:this.beginDate(),
    endDatePicker:this.processDate(),
},
 
methods:{
    beginDate(){//提出開始時間必須小於今天
        let self = this
        return {
            disabledDate(time){
                return time.getTime() > Date.now()//開始時間不選時，結束時間最大值小於等於當天
            }
        }
    },
    processDate(){//提出結束時間必須大於提出開始時間
        let self = this
        return {
            disabledDate(time){
                if(self.seachObj.beginTime){
                    return new Date(self.seachObj.beginTime).getTime() > time.getTime()
                }else{
                    return time.getTime() > Date.now()
                    //開始時間不選時，結束時間最大值小於等於當天
                }
            }
        }
    },
 
}

 

2.提出日期：

            <el-time-picker
                v-model="addbuyForm.preClockOffTime"
                class="date-box"
                format="HH:mm"
                value-format="HH:mm"
                :picker-options="{
                  selectableRange:`00:00:00 -${addbuyForm.nextClockInTime ? addbuyForm.nextClockInTime+':00' : '23:59:00'}`
                }">
              </el-time-picker>
              <el-time-picker
                v-model="addbuyForm.nextClockInTime"
                format="HH:mm"
                value-format="HH:mm"
                :picker-options="{
                  selectableRange: `${addbuyForm.preClockOffTime ? addbuyForm.preClockOffTime+':00' : '00:00:00'}-23:59:00`
                }">
              </el-time-picker>            

format：設置下拉框時間列表格式；

value-format：設置返回值格式

picker-options：設置selectableRange實現選擇範圍的肯定，此處動態設須要拼接「秒」的值

效果圖：

開始時間

 

結束時間