VUE-ElementUI?時間區(qū)間選擇器的使用
更新時間：2022年05月31日 11:36:11 作者：會遲到但不會缺席
這篇文章主要介紹了VUE-ElementUI?時間區(qū)間選擇器的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
VUE-ElementUI 時間區(qū)間選擇器
官方文檔中使用picker-options屬性來限制可選擇的日期
一、單個輸入框
<el-date-picker ? ? ? ?v-model="value1" ? ? ? ?type="date" ? ? ? ?placeholder="選擇日期" ? ? ? ?:picker-options="pickerOptions0"> </el-date-picker>
設置選擇今天以及今天之后的日期
data (){
? ?return {
? ? ? ?pickerOptions0: {
? ? ? ? ? disabledDate(time) {
? ? ? ? ? ? return time.getTime() < Date.now() - 8.64e7;
? ? ? ? ? }
? ? ? ? }, ?
? ?} ? ??
}設置選擇今天以及今天以前的日期
data (){
? ?return {
? ? ? ?pickerOptions0: {
? ? ? ? ? disabledDate(time) {
? ? ? ? ? ? return time.getTime() > Date.now() - 8.64e6
? ? ? ? ? }
? ? ? ? }, ?
? ?} ? ??
}?設置選擇今天之后的日期（不能選擇當天時間）
data (){
? ?return {
? ? ? ?pickerOptions0: {
? ? ? ? ? disabledDate(time) {
? ? ? ? ? ? return time.getTime() < Date.now();
? ? ? ? ? }
? ? ? ? }, ?
? ?} ? ??
} ?設置選擇今天之前的日期（不能選擇當天）
data (){
? ?return {
? ? ? ?pickerOptions0: {
? ? ? ? ? disabledDate(time) {
? ? ? ? ? ? return time.getTime() > Date.now();
? ? ? ? ? }
? ? ? ? }, ?
? ?} ? ??
}設置選擇三個月之前到今天的日期
data (){
? ?return {
? ? ? ?pickerOptions0: {
? ? ? ? ? disabledDate(time) {
? ? ? ? ? ? let curDate = (new Date()).getTime();
? ? ? ? ? ? let three = 90 * 24 * 3600 * 1000;
? ? ? ? ? ? let threeMonths = curDate - three;
? ? ? ? ? ? return time.getTime() > Date.now() || time.getTime() < threeMonths;;
? ? ? ? ? }
? ? ? ? }, ?
? ?} ? ??
}?二、兩個輸入框
<el-date-picker ? ? ? ?v-model="value1" ? ? ? ?type="date" ? ? ? ?placeholder="開始日期" ? ? ? ?:picker-options="pickerOptions0"> </el-date-picker> <el-date-picker ? ? ? ?v-model="value2" ? ? ? ?type="date" ? ? ? ?placeholder="結(jié)束日期" ? ? ? ?:picker-options="pickerOptions1"> </el-date-picker>
限制結(jié)束日期不能大于開始日期
data(){
? ? return {
? ? ? ? ?pickerOptions0: {
? ? ? ? ? ? ? ? disabledDate: (time) => {
? ? ? ? ? ? ? ? ? ? if (this.value2 != "") {
? ? ? ? ? ? ? ? ? ? ? ? return time.getTime() > Date.now() || time.getTime() > this.value2;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? return time.getTime() > Date.now();
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? pickerOptions1: {
? ? ? ? ? ? ? ? disabledDate: (time) => {
? ? ? ? ? ? ? ? ? ? return time.getTime() < this.value1 || time.getTime() > Date.now();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? } ? ? ?
} ? ? ??elementUI-日期選擇器(兩個框 限制選擇范圍、快捷鍵選擇)
.el-input {
width: 30%;
margin-right: 20px;
}<div id="page"> <!--下面的html定義標簽部分寫在這里--> </div>
new Vue({
el:'#page',//選擇元素，通常都是id
data: function() {
return { //定義的變量
value1: '',
value2: '',
//注意：-----下面的javascript部分的代碼放在這里
}
},
})兩個日期框選擇
1、快捷鍵選擇
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" :picker-options="pickerOptions"> </el-date-picker>
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一個月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三個月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
2、情景一
- 結(jié)束日期不能大于開始日期,可以為今天
- 注: 結(jié)束時間最大只能為今天，開始時間只能小于或等于結(jié)束時間，
- 如果開始時間為今天，結(jié)束時間只能為今天
<div style="display: flex;"> <el-date-picker v-model="value1" type="date" placeholder="開始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結(jié)束日期" :picker-options="pickerOptions1"> </el-date-picker> </div>
pickerOptions0: {
disabledDate: (time) => {
if (this.value2) {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},3、情景二
- 結(jié)束日期不能大于開始日期,可以為今天
- 先開始時間，判斷為今天或以前，在結(jié)束時間，則結(jié)束時間大于等于開始時間
- 先結(jié)束時間，判斷為今天或以后，在開始時間，則開始時間小于等于結(jié)束時間
<el-date-picker v-model="value1" type="date" placeholder="開始日期" :picker-options="pickerOptions2"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結(jié)束日期" :picker-options="pickerOptions3"> </el-date-picker>
pickerOptions2: {
disabledDate: (time) => {
if (this.value2) {
return time.getTime() > this.value2
} else {
return time.getTime() > Date.now()
}
}
},
pickerOptions3: {
disabledDate: (time) => {
if (this.value2) {
return time.getTime() < this.value1
}
return time.getTime() < Date.now() - 8.64e7
}
},4、情景三
限制結(jié)束日期不能小于開始日期
<el-date-picker v-model="value1" type="date" placeholder="開始日期" :picker-options="pickerOptions4"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結(jié)束日期" :picker-options="pickerOptions5"> </el-date-picker>
pickerOptions4: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > new Date(this.value2).getTime();
}
}
},
pickerOptions5: {
disabledDate: (time) => {
// - 1 * 24 * 60 * 60 * 1000//減去一天的時間代表可以選擇同一天;
return time.getTime() < new Date(this.value1).getTime();
}
},5、情景四
- 限制選擇開始時間不能小于當前時間(包含當前時間)。
- 并且結(jié)束時間不能小于開始時間（比上面多了層限時）
<el-date-picker v-model="value1" type="date" placeholder="開始日期" :picker-options="pickerOptions6"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="結(jié)束日期" :picker-options="pickerOptions7"> </el-date-picker>
pickerOptions6: { //結(jié)束時間不能大于開始時間
disabledDate: (time) => {
if (this.value2) {
return time.getTime() > new Date(this.value2).getTime();
} else { //還沒有選擇結(jié)束時間的時候，讓他只能選擇今天之后的時間包括今天
return time.getTime() < Date.now() - 8.64e7
}
}
},
pickerOptions7: {
disabledDate: (time) => {
if (this.value1) {
// - 1 * 24 * 60 * 60 * 1000//可以選擇同一天
return time.getTime() < new Date(this.value1).getTime();
} else { //還沒有選擇結(jié)束時間的時候，讓他只能選擇今天之后的時間包括今天
return time.getTime() < Date.now() - 8.64e7
}
}
},以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制
- vue中使用elementUI自定義校驗及點擊提交不生效問題解決辦法
- vue使用elementUI組件實現(xiàn)分頁效果
- Vue3項目中引入ElementUI并使用的示例詳解
- Vue?ElementUI在el-table中使用el-popover問題
- vue?elementUi中的tabs標簽頁使用教程
- vue3項目如何使用樣式穿透修改elementUI默認樣式
- Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- Vue引入ElementUI并使用的詳細過程
相關(guān)文章
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue利用axios來完成數(shù)據(jù)的交互,本文通過實例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下2018-03-03
Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
這篇文章主要介紹了Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue全局自適應大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項目中使用postcss-pxtorem插件實現(xiàn)響應式設計,postcss-pxtorem可以自動將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實現(xiàn)更好的自適應布局,通過配置postcss-pxtorem插件,可以在構(gòu)建時自動完成轉(zhuǎn)換,無需手動修改代碼2025-01-01
整理項目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-02-02
Vue $emit $refs子父組件間方法的調(diào)用實例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue2.0實現(xiàn)仿百度前端分頁效果附實現(xiàn)代碼
本文通過實例代碼給大家介紹了基于vue2.0實現(xiàn)仿百度前端分頁效果,在文中給大家記錄了遇到的問題及解決方法，需要的朋友可以參考下2018-10-10