資訊專(zhuān)欄INFORMATION COLUMN
Element是一套基于vue2.x的一個(gè)ui框架。官方文檔也很詳細(xì)，這里記錄一個(gè)element-ui日期插件的補(bǔ)充
官方文檔中使用picker-options屬性來(lái)限制可選擇的日期，下面舉例補(bǔ)充：
單個(gè)日期時(shí)間輸入框
組件代碼：
情景1: 設(shè)置選擇今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
情景2: 設(shè)置選擇今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
情景3: 設(shè)置選擇今天之后的日期（不能選擇當(dāng)天時(shí)間）
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
情景4: 設(shè)置選擇今天之前的日期（不能選擇當(dāng)天）
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
情景5: 設(shè)置選擇三個(gè)月之前到今天的日期
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;;
}
},
}
}
兩個(gè)日期時(shí)間輸入框
組件代碼：
情景1: 限制結(jié)束日期不能大于開(kāi)始日期
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();
}
},
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109977.html
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：需求選擇日期范圍，但是選擇范圍需要在一周以?xún)?nèi)。方法考慮到有兩種設(shè)計(jì)方式用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。用日期范圍選擇器。 需求：選擇日期范圍，但是選擇范圍需要在一周以?xún)?nèi)。舉個(gè)栗子：假設(shè)選第一個(gè)日期為1月17日，那么1月11日以前、1月23號(hào)以后的日期都需要設(shè)為禁選狀態(tài)。 方法：考慮到有兩種設(shè)計(jì)方式：1、用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。2、用日期范圍選擇器。第一種...
摘要：需求選擇日期范圍，但是選擇范圍需要在一周以?xún)?nèi)。方法考慮到有兩種設(shè)計(jì)方式用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。用日期范圍選擇器。 需求：選擇日期范圍，但是選擇范圍需要在一周以?xún)?nèi)。舉個(gè)栗子：假設(shè)選第一個(gè)日期為1月17日，那么1月11日以前、1月23號(hào)以后的日期都需要設(shè)為禁選狀態(tài)。 方法：考慮到有兩種設(shè)計(jì)方式：1、用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。2、用日期范圍選擇器。第一種...
閱讀 2073·2021-09-09 09:33
閱讀 1135·2019-08-30 15:43
閱讀 2693·2019-08-30 13:45
閱讀 3328·2019-08-29 11:00
閱讀 927·2019-08-26 14:01
閱讀 3590·2019-08-26 13:24
閱讀 507·2019-08-26 11:56
閱讀 2714·2019-08-26 10:27
