element?時間選擇器禁用選擇的使用示例
更新時間：2023年09月27日 09:36:24 作者：樹洞菇涼
最近做項目遇到的一個功能,禁止用戶在輸入內容的時候選擇今天以前的日期或者包含今日的日期,本文主要介紹了element?時間選擇器禁用選擇的使用示例,感興趣的可以了解一下
本文主要介紹了element 時間選擇器禁用選擇的使用示例，具體如下：
方法一、年份或月份選擇都默認yyyy-MM（disabledDate中，time.getTime() 的范圍是禁用的時間范圍）
1、在forbiddenDate之后的日期禁用不可選擇
<el-date-picker
v-model="financialYearMonth"
:value-format="'yyyy-MM'"
type="month"
:size="'small'"
@change="getCwszSubj"
placeholder="選擇日期"
:picker-options="monthpickoption"
>
</el-date-picker>
export default {
data() {
return {
monthpickoption:{
// 設置禁用狀態(tài)，參數(shù)為當前日期，要求返回 Boolean
disabledDate: (time) => {
// 把默認日期轉時間戳
let date = new Date(this.forbiddenDate).getTime();
// 當前日期時間戳 > 默認日期時間戳 則禁止默認以后的日期，反之如果是小于禁用之前的日期
return time.getTime() > date;
},
},
}
}
}2、在開始日期和結束日期內可以選擇，其他不可選擇，例如：yearMonthStart(開始日期)、yearMonthEnd（結束日期）
如果yearMonthStart：2016-01、yearMonthEnd：2023-02，那就只有2016-01至2023-02范圍內的日期可以選擇
<el-date-picker
v-model="financialYearMonth"
type="monthrange"
value-format="yyyy-MM"
range-separator="至"
start-placeholder="開始月份"
end-placeholder="結束月份"
:picker-options="pickerOptions"
>
</el-date-picker>
export default {
data() {
return {
pickerOptions:{
// 設置禁用狀態(tài)，參數(shù)為當前日期，要求返回 Boolean
disabledDate: (time) => {
// 開始日期
let dateStart = new Date(that.yearMonthStart).getTime();
// 結束日期
let dateEnd = new Date(that.yearMonthEnd).getTime();
// 在開始日期和結束日期內可以選擇，其他不可選擇
return time.getTime() < dateStart || time.getTime() > dateEnd;
},
},
}
}
}
export default {
computed:{
pickerOptions(){
let that = this;
return {
disabledDate(time) {
// 開始日期
let dateStart = new Date(that.yearMonthDisableStart).getTime();
// 結束日期
let dateEnd = new Date(that.yearMonthDisableEnd).getTime();
// 在開始日期和結束日期內可以選擇，其他不可選擇
return time.getTime() < dateStart || time.getTime() > dateEnd
}
}
}
},
}方法二、
<div class="selectItem" v-show="monthShow">
<el-date-picker
v-model="trendData.date"
:clearable="false"
type="monthrange"
:default-value="trendData.date"
:picker-options="monthpickoption"
value-format="yyyy-MM"
range-separator="至"
@change="onChangeDate"
start-placeholder="開始日期"
end-placeholder="結束日期">
</el-date-picker>
</div>
export default {
data() {
return {
trendData: {
date: []
},
minDate: null,
maxDate: null,
monthpickoption:{
// 設置禁用狀態(tài)，參數(shù)為當前日期，要求返回 Boolean
disabledDate: (time) => {
if (this.minDate !== null && this.maxDate === null) {
let minMonth = this.minDate.getMonth(),
lastYear = new Date(this.minDate).setMonth(minMonth - 11),
nextYear = new Date(this.minDate).setMonth(minMonth + 11);
let minTime = this.minDate.getTime()
let nextTime = new Date().setMonth(new Date().getMonth() + 11)
let lastTime = new Date().setMonth(new Date().getMonth() - 11)
if (minTime <= nextTime || minTime >= lastTime){
//開始日期少于當前月+12個月 并且大于當前月-12個月，則表示只限制前面的范圍
return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
}
else {
// 只能選 minDate 前后一年的范圍
return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
}
}else {
let startMonth = this.trendData.date[0]
let month = new Date(startMonth).getMonth()
let lastMonth = new Date(startMonth).setMonth(month - 11)
//如果有默認值，只禁用開始日期，因為已經限定了禁用未來范圍，且默認值已經為12個月范圍
return this.monthPick(time) || time < lastMonth.valueOf();
}
},
// 選中日期后會執(zhí)行的回調，只有當 daterange 或 datetimerange 才生效
onPick: ({minDate, maxDate}) => {
this.minDate = minDate;
this.maxDate = maxDate;
}
}
}
},
methods: {
monthPick(time){
// 獲取當前的月份信息
const date = new Date() // 獲取當前的時間基本信息，值是這樣的： Tue Jul 20 2021 14:59:43 GMT+0800 (中國標準時間)
const year = date.getFullYear() // 獲取當前年份，值是這樣的： 2021
let month = date.getMonth() + 1 // 獲取當前月份，值是這樣的： 6 getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是當前月份
if (month >= 1 && month <= 9) {
// 如果是1月到9月就要在前面補上一個0 比如：02、07 月份這樣表示
month = '0' + month
}
const nowDate = year.toString() + month.toString() // 轉換成字符串拼接，最終得到年和月，比如此時的時間是2021年7月20號，所以nowDate的值是：202107
// 獲取時間選擇器的月份信息
const timeyear = time.getFullYear() // 獲取時間選擇器的年份（有很多）
let timemonth = time.getMonth() + 1 // 與上面同理
if (timemonth >= 1 && timemonth <= 9) {
timemonth = '0' + timemonth
}
const elTimeData = timeyear.toString() + timemonth.toString()
// 返回，時間選擇器的日期月份大于當前日期的月份，又因為disabledDate函數(shù)是控制月份禁用不可選
// 所以，最終就是：時間選擇器的月份大于當前的月份，就都禁用掉，所以就實現(xiàn)了最終效果：
// 大于等于當前月份都不可選
return elTimeData > nowDate // 這里雖然是字符串，但是弱類型語言js會做一個轉換，是可以比較大小的如： '202107' > '202008'
},
}
}如果有些邏輯在data里處理不了 可以在methods處理：
8.64e7 是科學計數(shù)法算出的值，實際為（8.64×10×10×10×10×10×10×10），也就是一天毫秒數(shù)。
<el-date-picker
v-model="yearMonth"
type="date"
placeholder="選擇日期"
:picker-options="pickerOptions">
</el-date-picker>
export default {
data() {
return {
pickerOptions: {
disabledDate: this.disabledGetTime
}
}
},
methods：{
disabledGetTime(time) {
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.uptimed).getTime() - 8.64e7
},
}
}禁止周六周日
disabledDate(time) {
return (
[0,6].includes(time.getDay())
);
},到此這篇關于element 時間選擇器禁用選擇的使用示例的文章就介紹到這了,更多相關element 時間選擇器禁用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
獲取路由詳細內容信息是我們日常開發(fā)中經常會遇到的需求,下面這篇文章主要給大家介紹了關于vue獲取路由詳細內容信息的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
在實際項目中，我們可能需要對請求進行“防抖”處理。本文主要實現(xiàn)axios中取消請求及阻止重復請求，具有一定的參考價值，感興趣的可以了解一下2021-08-08
這篇文章主要為大家詳細介紹了Vue調用PC攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
前端Vue全屏screenfull通用解決方案及原理詳細分析
這篇文章主要給大家介紹了關于前端Vue全屏screenfull通用解決方案及原理的相關資料,使用screenfull這一第三方庫可以實現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
在vue移動端項目中經常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預覽,所以下面這篇文章主要給大家介紹了關于vue3中各種類型文件進行預覽功能的相關資料,需要的朋友可以參考下2021-09-09
vue+elementUI 復雜表單的驗證、數(shù)據(jù)提交方案問題
這篇文章主要介紹了vue+elementUI 復雜表單的驗證、數(shù)據(jù)提交方案,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue經歷從2.0到3.0更新之后,簡??之就是變得更輕更快,使?起來更加?便,下面這篇文章主要給大家介紹了關于vue3.0和vue2.0區(qū)別的相關資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vuex 使用及簡單實例(計數(shù)器)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關于Vue3過渡動畫踩坑的相關資料,需要的朋友可以參考下2021-12-12