使用 Element+vue實現開始時間結束時間限制
效果
<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="true"
:editable="false"
:picker-options="pickerOptionsEnd" @change="changeEnd">
</el-date-picker>
</el-form-item>
pickerOptionsStart: {},
pickerOptionsEnd: {},
startDate: '',
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;
}
},
});
},
相關文章
- JN專案-時間查詢,結束時間比開始時間小給提示
- PHP獲取當前季度的開始時間和結束時間PHP
- MySQL如何獲取binlog的開始時間和結束時間MySql
- 查詢時若時間為空,開始時間取今天的零點,結束時間取當前時間
- elementUI中日期選擇器,控制開始時間小於結束時間UI
- 泛微oa流程表單之請假單(判斷請假結束時間不能小於等於請假開始時間)
- Laravel admin 如何生成 開始時間和結束時間範圍之內的篩選條件 (2 個欄位)Laravel
- c#實現的破解程式--針對軟體使用時間限制C#
- php 獲取今日、昨日、上週、本月的起始時間戳和結束時間PHP時間戳
- javascript實現時間器JavaScript
- 直播電商原始碼,活動開始時間計時器原始碼
- azkaban執行任務長時間無法結束
- PHP獲取當月起始和結束時間戳PHP時間戳
- go-carbon 1.4.0 版本釋出,新增獲取世紀和季度開始和結束時間方法Go
- 使用甘特圖實現高效時間規劃
- 在使用alter system switch log的時候無時間限制的等待
- js實現指定時間倒數計時JS
- iOS 實現時間線列表效果iOS
- MySQL時間戳、時間MySql時間戳
- 3.MongoDB恢復探究:為什麼oplogReplay引數只設定了日誌應用結束時間oplogLimit,而沒有設定開始時間?MongoDBMIT
- qt中實現實時的顯示當前時刻的時間QT
- mysql時間操作(時間差和時間戳和時間字串的互轉)MySql時間戳字串
- gRPC為什麼使用截止時間而不是超時時間?RPC
- 用VB“破解”有時間限制的程式 (轉)
- Linux時間設定系統時間、硬體時間和時間服務Linux
- js時間小總結JS
- 層級時間輪的 Golang 實現Golang
- sqlalchemy實現時間列自動更新SQL
- 如何實現模糊查詢時間段
- 物件~時間篇_日曆的實現物件
- 基於Mybatis-Plus實現自動化操作建立時間和修改時間MyBatis
- JavaScript實時變化時間日期JavaScript
- JavaScript實時變化的時間JavaScript
- QT介面顯示實時時間QT
- javascript定時器函式開始和結束程式碼例項JavaScript定時器函式
- python,時間加減,時間計算,時間格式化,時間提取彙總Python
- Python之時間和日期使用小結Python
- 使用ASM框架實現統計函式執行時間ASM框架函式