使用Element+vue實現開始與結束時間限制
阿新 • • 發佈:2021-09-01
本文例項為大家分享了用Element+實現開始http://www.cppcns.com與結束時間限制的具體程式碼,供大家參考,具體內容如下
效果
<el-form-item label="開始時間"> <el-date-picker v-model="startDate" type="datetime" placeholder="選擇日期" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :editable="false" :picker-options="pickerOptionsStart" @change="changeStart"> </el-date-picker> </el-form-item> <el-form-item label="結束時間"> <el-date-picker v-model="endDate" type="datetime" placeholder="選擇日期" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :clearable=http://www.cppcns.com"true" :editable="false" :picker-options="pickerOptionsEnd" @change="changeEnd"> </el-date-picker> </el-form-item>
pickerOptionsStart: {},pickerOptionsEnd: {},startQdaUZGtyfrDate: '',endDate: '',changeStart() { // 限制開始時間
if (this.endDate != '') {
if (this.endDate <= this.startDate) {
this.$message.warning('結束時間必須大於開始時間!');
this.startDate = '';
}
}
this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{
disabledDate: (time) => {
if (this.startDate) {
return time.getTime() < this.startDate;
}
},});
},changeEnd() { // 限制結束時間
console.log(this.endDate);
if (this.startDate != '') {
if (this.endDate <= this.startDate) {
this.$message.warning('結束時間必須大於開始時間!');
this.endDate = '';
}
}
this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{
disabledDate: (time) => {
if (this.endDate) {
return time.getTime() > this.endDate;
}
},
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。