elementUI組件中el-date-picker限制時間范圍精確到小時的方法
更新時間：2024年05月06日 11:06:01 作者：小炮兵快跑
現(xiàn)在需要做一個時間選擇器,可以根據(jù)小時(同時選天和小時)和天?和月,節(jié)假日等類型控制日歷的選擇樣式,下面這篇文章主要給大家介紹了關(guān)于elementUI組件中el-date-picker限制時間范圍精確到小時的相關(guān)資料,需要的朋友可以參考下
需求要求
- 時間選擇器只能選擇今天之前的日期.默認(rèn)時間是前一天00點~23點
- 后臺返回的最小時間和最大時間
- 時間精度限制到小時
開始想著用type="datetimerange"來實現(xiàn),后來發(fā)現(xiàn)控制時間禁用無法實現(xiàn),后改變思路使用兩個type="datetime"拼裝
實現(xiàn)
1.先獲取一個只能選擇到小時的時間范圍選擇器
css代碼
<el-date-picker
v-model="validity1"
type="datetime"
value-format="yyyy-MM-dd HH"
format="yyyy/MM/dd HH"
class="datepicker-content"
:picker-options="datapickerOptions1"
popper-class="datepickerPopperClass"
@change="changeDatetime"
placeholder="起始時間"
:clearable="false"
>
</el-date-picker>
~
<el-date-picker
v-model="validity2"
type="datetime"
value-format="yyyy-MM-dd HH"
format="yyyy/MM/dd HH"
class="datepicker-content"
popper-class="datepickerPopperClass"
:picker-options="datapickerOptions2"
placeholder="結(jié)束時間"
:disabled="!validity1"
:clearable="false"
>
</el-date-picker>
如何實現(xiàn)精度到小時,使選擇器只能選擇到時間(如圖)
通過修改css樣式實現(xiàn)代碼,隱藏分秒結(jié)構(gòu)
.datepickerPopperClass{
.el-button--text{
display: none; //刪除時間彈框中此刻按鈕(根據(jù)需求決定是否保留)
}
.el-time-spinner__wrapper{
width:100%;
}
.el-scrollbar:nth-child(2){
display: none;
}
}
這樣結(jié)構(gòu)上就有一個只能選擇到小時的時間范圍選擇器,這里結(jié)束時間在沒有選擇開始時間時是禁用的
2.通過picker-options屬性來控制時間可選日期范圍
其中disabledDate屬性值來控制選擇的日期范圍,selectableRange屬性值控制可選擇的小時范圍
vue中data中聲明的變量
data() {
return {
validity1:'',
selectableRange1:"00:00:00 - 23:59:59",
validity2:"",
selectableRange2:"00:00:00 - 23:59:59",
startTime:"", //從后臺獲取的庫表生成時間,之前的時間不能選擇,這個值可以根據(jù)你需求中的時間來賦值
endTime:"", //數(shù)據(jù)庫結(jié)束時間
datapickerOptions1: {
//設(shè)置不能選擇的日期
selectableRange: this.selectableRange1,
disabledDate: (time) => {
//獲取當(dāng)前時間
let nowDate = new Date();
const oneHour = 1 * 3600 * 1000; //一個小時
let defaultTime = this.formatDate(nowDate.getTime()-oneHour,"yyyy-MM-dd hh")
let startTime = this.startTime.split(' ')[0]+" 00:00:00"
defaultTime = defaultTime + ":59:59"
return time.getTime() > new Date(defaultTime)||time.getTime() < new Date(startTime);
},
},
datapickerOptions2: {
//設(shè)置不能選擇的日期
selectableRange: this.selectableRange2,
disabledDate: (time) => {
//獲取當(dāng)前時間
let nowDate = new Date();
const oneHour = 1 * 3600 * 1000; //一個小時
let defaultTime = this.formatDate(nowDate.getTime()-oneHour,"yyyy-MM-dd hh")
let validityTime = this.validity1.split(' ')[0]+" 00:00:00"
defaultTime = defaultTime + ":59:59"
return time.getTime() > new Date(defaultTime)||time.getTime() < new Date(validityTime);
},
},
};
},
通過watch來監(jiān)控起始時間和結(jié)束時間,日期選擇后,相應(yīng)的小時選擇范圍也會變化
watch:{
validity1: {
// date-picker控件點x清空之后默認(rèn)會重置為null，監(jiān)聽設(shè)置為["",""]
handler(newVal) {
if (newVal) {
// console.log("newVal",newVal)
// console.log(this.startTime)
if(new Date(newVal+":00:00").getTime()<new Date(this.startTime).getTime()){
this.validity1 = this.formatDate(this.startTime.split(' ')[0],"yyyy-MM-dd") + " " + this.startTime.split(' ')[1].split(':')[0]+":00"
// console.log("validity1",this.validity1)
}
let rangeStart = ""
let rangeEnd = ""
//如果選擇的日期是后臺庫表初始日期
if(this.startTime){
if(newVal.split(' ')[0]==this.formatDate(this.startTime.split(' ')[0],"yyyy-MM-dd")){
rangeStart = this.startTime.split(' ')[1]
}else{
rangeStart = "00:00:00"
}
}else{
rangeStart = "00:00:00"
}
if(this.endTime){
if(newVal.split(' ')[0]==this.formatDate(this.endTime.split(' ')[0],"yyyy-MM-dd")){
rangeEnd = this.endTime.split(' ')[1]
}else{
rangeEnd = "23:59:59"
}
}else{
rangeEnd = "23:59:59"
}
this.selectableRange1 = rangeStart + " - " + rangeEnd
this.$set(this.datapickerOptions1,"selectableRange",this.selectableRange1)
}
},
immediate: true,
deep: true,
},
validity2: {
// date-picker控件點x清空之后默認(rèn)會重置為null，監(jiān)聽設(shè)置為["",""]
handler(newVal) {
if (newVal) {
// console.log("newVal",newVal)
if(new Date(newVal).getTime()<new Date(this.validity1).getTime()){
this.validity2 = this.validity1.split(':')[0]+ ":59"
}
let rangeStart = ""
let rangeEnd = ""
//如果選擇的日期是后臺庫表初始日期
if(new Date(newVal.split(' ')[0]).getTime()==new Date(this.validity1.split(' ')[0]).getTime()){
rangeStart = this.validity1.split(' ')[1].split(':')[0] + ":59:59"
}else{
this.selectableRange2 = "00:59:59"
}
if(this.endTime){
if(newVal.split(' ')[0]==this.formatDate(this.endTime.split(' ')[0],"yyyy-MM-dd")){
rangeEnd = this.endTime.split(' ')[1]
}else{
rangeEnd = "23:59:59"
}
}else{
rangeEnd = "23:59:59"
}
this.selectableRange2 = rangeStart + " - " + rangeEnd
this.$set(this.datapickerOptions2,"selectableRange",this.selectableRange2)
}
},
immediate: true,
deep: true,
},
},
其中用到的時間格式化方法formatDate
filters: {
formatDate: function(time) {
if (time != null && time != "") {
var date = new Date(time);
return formatTimeToStr(date, "yyyy/MM/dd hh:mm:ss");
} else {
return "";
}
},
},
date.js
export function formatTimeToStr(times, pattern) {
var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(times).Format(pattern);
}
return d.toLocaleString();
}
起始時間選擇后,結(jié)束時間才可以顯示同時結(jié)束時間清空
changeDatetime(){
this.validity2 = ""
},
總結(jié)
到此這篇關(guān)于elementUI組件中el-date-picker限制時間范圍精確到小時的文章就介紹到這了,更多相關(guān)el-date-picker限制時間精確到小時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue3源碼解析watch函數(shù)實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)超酷文字上下滾動動畫,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
利用Vue的v-for和v-bind實現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實現(xiàn)列表顏色切換，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了element 表格嵌套表單驗證指定行的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
最近公司新啟動了個項目，用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)token登錄驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
Vue計算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細(xì)講解，感興趣的朋友一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了超詳細(xì)的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動（仿淘寶京東收貨地址4級聯(lián)動），非常具有實用價值，需要的朋友可以參考下2017-10-10