Element
特定時(shí)間范圍
設(shè)置某個(gè)時(shí)間之前的日期被禁用（設(shè)置某個(gè)時(shí)間之后的時(shí)間禁用同理）
方式一
html:
<el-date-picker
v-model="startDate"
type="date"
placeholder="開(kāi)始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
js:
data () {
return {
pickerOptionsStart: {}
}
},
methods:{
// 這個(gè)方法可以在生命周期中調(diào)用沸版，也可以通過(guò)操作觸發(fā)演侯，獲取時(shí)間戳
getData () {
axios.get('/user').then((res) => {
// 這里可以做其他處理死姚，比如：若時(shí)間小于今天篓冲，則設(shè)置為今天
// var startTime;
// if (res.data.startTime < new Date(new Date().toLocaleDateString()).getTime()) {
// startTime = new Date(new Date().toLocaleDateString()).getTime()
// } else {
// startTime = res.data.startTime
// }
var startTime = res.data.startTime
this.pickerOptionsStart = {
disabledDate (time) {
// 設(shè)置日期之前的時(shí)間都被禁用
// 在這里可以加減一天時(shí)間，比如前一個(gè)日歷不能選最后一天，后一個(gè)日歷不能選第一天
// return time.getTime() < startTime + 1000 * 60 * 60 * 24;
return time.getTime() < startTime;
}
}
})
}
}
方式二
html:
<el-date-picker
v-model="startDate"
type="date"
placeholder="開(kāi)始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
js:
data () {
return {
startTime: null,
pickerOptionsStart: {
disabledDate: time => {
// 可通過(guò)箭頭函數(shù)的方式訪問(wèn)到this
return time.getTime() < this.startTime
}
}
}
}
開(kāi)始時(shí)間小于結(jié)束時(shí)間
html:
<el-date-picker
v-model="startDate"
type="date"
format="yyyy-MM-dd" value-format="yyyy-MM-dd"
@change="changeEnd"
placeholder="開(kāi)始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
<el-date-picker
v-model="endDate"
type="date"
format="yyyy-MM-dd" value-format="yyyy-MM-dd"
@change="changeStart"
placeholder="結(jié)束日期"
:picker-options="pickerOptionsEnd">
</el-date-picker>
js:
data () {
return {
pickerOptionsStart: {},
pickerOptionsEnd: {},
// 可通過(guò)后臺(tái)獲取后賦值
startDate: null,
endDate: null,
}
},
methods:{
changeStart () {
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
disabledDate: (time) => {
// 若時(shí)間有誤差，可加減一天1000*3600*24
return time.getTime() > new Date(this.endDate).getTime()
}
})
},
changeEnd () {
this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
disabledDate: (time) => {
return time.getTime() < new Date(this.startDate).getTime()
}
})
}
}
今日之前的日期禁用
html:
<el-date-picker
v-model="startDate"
type="date"
placeholder="開(kāi)始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
包含今日
js:
data () {
return {
pickerOptionsStart: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1;
}
}
}
},
不包含今日
js:
data () {
return {
pickerOptionsStart: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
}
}
}
},
三個(gè)月之后的日期禁用
html:
<el-date-picker
v-model="endDate"
type="date"
placeholder="結(jié)束日期"
:picker-options="pickerOptionsEnd">
</el-date-picker>
js:
data () {
return {
pickerOptionsStart: {
disabledDate (time) {
let curDate = new Date(new Date().toLocaleDateString()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate + three;
return time.getTime() > threeMonths;
}
}
}
},
設(shè)置默認(rèn)時(shí)間
默認(rèn)開(kāi)始時(shí)間今日诡必，結(jié)束時(shí)間明日
setDefaultTime () {
// 若格式不支持date對(duì)象，可將時(shí)間轉(zhuǎn)為格式化的字符串
this.startDate = new Date()
// 獲取明日的天數(shù)
let tomorrowDay = (new Date()).getDate()+1
// 設(shè)置時(shí)間為明日,返回值為時(shí)間戳
let tomorrowTimestamp = (new Date()).setDate(tomorrowDay)
this.endDate = new Date(tomorrowTimestamp)
},
設(shè)置多個(gè)條件
return time.getTime() < this.startDate || time.getTime() > this.endTime;
注意事項(xiàng)
1搔扁、當(dāng)你用后臺(tái)獲取的時(shí)間與今天做比較的時(shí)候爸舒，不能用(new Date()).getTime()來(lái)作為今天的時(shí)間，而要使用new Date(new Date().toLocaleDateString()).getTime()稿蹲。它倆的區(qū)別是一個(gè)是當(dāng)前時(shí)間扭勉，另一個(gè)是今天零點(diǎn)的時(shí)間，如果用當(dāng)前時(shí)間苛聘，會(huì)出現(xiàn)限制多一天或少一天的bug涂炎。
2、與后臺(tái)溝通设哗，讓他返回你的時(shí)間都為當(dāng)日的零點(diǎn)時(shí)間唱捣，不然會(huì)出現(xiàn)限制多一天或少一天的bug。
間隔不連續(xù)時(shí)間禁用
需求描述
后臺(tái)返回一個(gè)數(shù)組熬拒，數(shù)組中包含多個(gè)對(duì)象爷光，對(duì)象中有兩個(gè)屬性：某天零點(diǎn)的時(shí)間戳和是否禁用的布爾值，若布爾值為false澎粟，則禁用當(dāng)天。
時(shí)間禁用
pickerOptionsStart: {
disabledDate (time) {
// 這里是為了方便理解下面的time寫(xiě)的
}
}
禁用的原理：time是日歷每天的時(shí)間對(duì)象欢瞪，time.getTime() 可以獲取當(dāng)天零點(diǎn)的時(shí)間戳活烙。日歷控件會(huì)遍歷每天，返回true則禁用遣鼓。
this.pickerOptionsStart = {
disabledDate (time) {
// 限制某時(shí)期之外的時(shí)間禁用
if (time.getTime() < travelStartTime || time.getTime() > travelEndTime - 1000 * 60 * 60 * 24) {
return true;
} else {
// 限制某時(shí)期內(nèi)選定的日期禁用
// res.data為后臺(tái)返回的數(shù)組啸盏，包含某時(shí)期內(nèi)要禁用的不連續(xù)日期
// 這里要使用for循環(huán)，forEach不能中斷循環(huán)骑祟，導(dǎo)致禁用不生效
for(let i = 0; i < res.data.length; i++) {
if (res.data[i].Date === time.getTime() && res.data[i].flag === false) {
return true;
}
}
}
}
}
iView
方法同理回懦，設(shè)置格式如下：
html:
<DatePicker
v-model="startDate "
:options="pickerOptionsStart"
@on-change="changeEnd"
:clearable="false"
type="date"
placeholder="開(kāi)始時(shí)間">
</DatePicker>
區(qū)別在于將:picker-options替換為:options，將@change替換為@on-change次企；
另外怯晕，假如同時(shí)使用iview和element的日歷控件，iview的時(shí)間限制相比element可能存在誤差缸棵，同時(shí)使用兩者的話舟茶，需要加減一天，自己視情況調(diào)整。
限制在兩個(gè)日期之間的日期
需求：有兩個(gè)日期吧凉，開(kāi)始時(shí)間可以選擇今天隧出，結(jié)束時(shí)間可以選擇明天。另外又有兩個(gè)日期阀捅，范圍限制在前兩個(gè)日期之間
<Form class="form-cycle" ref="formCreateCycle" :model="formCreateCycle" inline >
<FormItem label="外部周期：" prop="outerStartTime">
<FormItem >
<DatePicker type="date" :options="pickerOptionsOuterStart" @on-change="changeOuterEnd" v-model="formCreateCycle.outerStartTime" placeholder="開(kāi)始時(shí)間" format="yyyy-MM-dd" :editable="false" ></DatePicker>
</FormItem>
<span> 至 </span>
<FormItem prop="outerEndTime" >
<DatePicker type="date" :options="pickerOptionsOuterEnd" @on-change="changeOuterStart" v-model="formCreateCycle.outerEndTime" placeholder="結(jié)束時(shí)間" format="yyyy-MM-dd" :editable="false" ></DatePicker>
</FormItem>
</FormItem>
<!-- 內(nèi)部周期要限制在外部周期之間 -->
<FormItem label="內(nèi)部周期：" prop="innerStartTime">
<FormItem >
<DatePicker type="date" :options="pickerOptionsInnerStart" @on-change="changeInnerEnd" v-model="formCreateCycle.innerStartTime" placeholder="開(kāi)始時(shí)間" format="yyyy-MM-dd" :editable="false" ></DatePicker>
</FormItem>
<span> 至 </span>
<FormItem prop="innerEndTime" >
<DatePicker type="date" :options="pickerOptionsInnerEnd" @on-change="changeInnerStart" v-model="formCreateCycle.innerEndTime" placeholder="結(jié)束時(shí)間" format="yyyy-MM-dd" :editable="false" ></DatePicker>
</FormItem>
</FormItem>
</Form>
data: {
formCreateCycle: {
outerStartTime: '',
outerEndTime: '',
innerStartTime: '',
innerEndTime: '',
},
// 日期禁用初始化
// 外部周期
pickerOptionsOuterStart: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
}
},
pickerOptionsOuterEnd: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1;
}
},
// 內(nèi)部周期
pickerOptionsInnerStart: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
}
},
pickerOptionsInnerEnd: {
disabledDate (time) {
return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1;
}
},
},
methods: {
// 設(shè)置外部周期時(shí)間限制
changeOuterEnd () {
// 外部周期結(jié)束時(shí)間大于開(kāi)始時(shí)間
this.pickerOptionsOuterEnd = Object.assign({}, this.pickerOptionsOuterEnd, {
disabledDate: (time) => {
return time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()+24*60*60*1000
}
})
// 內(nèi)部周期開(kāi)始時(shí)間大于等于外部周期開(kāi)始時(shí)間
this.pickerOptionsInnerStart = Object.assign({}, this.pickerOptionsInnerStart, {
disabledDate: (time) => {
return time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()
}
})
// 內(nèi)部周期結(jié)束時(shí)間大于外部周期開(kāi)始時(shí)間（大于等于今天） 并且小于等于外部周期結(jié)束時(shí)間
this.pickerOptionsInnerEnd = Object.assign({}, this.pickerOptionsInnerEnd, {
disabledDate: (time) => {
return time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()+24*60*60*1000 || time.getTime() > new Date(this.formCreateCycle.outerEndTime).getTime()
}
})
},
changeOuterStart () {
// 外部周期開(kāi)始時(shí)間小于結(jié)束時(shí)間 并且大于等于今天
this.pickerOptionsOuterStart = Object.assign({}, this.pickerOptionsOuterStart, {
disabledDate: (time) => {
return time.getTime() > new Date(this.formCreateCycle.outerEndTime).getTime()-24*60*60*1000 || time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
}
})
// 內(nèi)部周期開(kāi)始時(shí)間小于外部周期結(jié)束時(shí)間 并且大于等于外部周期開(kāi)始時(shí)間（大于等于今天）
this.pickerOptionsInnerStart = Object.assign({}, this.pickerOptionsInnerStart, {
disabledDate: (time) => {
return time.getTime() > new Date(this.formCreateCycle.outerEndTime).getTime()-24*60*60*1000 || time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()
}
})
// 內(nèi)部周期結(jié)束時(shí)間小于等于外部周期結(jié)束時(shí)間 并且大于內(nèi)部周期開(kāi)始時(shí)間 并且大于外部周期開(kāi)始時(shí)間 并且大于今天
this.pickerOptionsInnerEnd = Object.assign({}, this.pickerOptionsInnerEnd, {
disabledDate: (time) => {
return time.getTime() > new Date(this.formCreateCycle.outerEndTime).getTime() || time.getTime() < new Date(this.formCreateCycle.innerStartTime).getTime()+24*60*60*1000 || time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()+24*60*60*1000 || time.getTime() < new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000
}
})
},
// 設(shè)置內(nèi)部周期時(shí)間限制
changeInnerEnd () {
// 內(nèi)部周期結(jié)束時(shí)間大于開(kāi)始時(shí)間 并且小于等于外部周期結(jié)束時(shí)間
this.pickerOptionsInnerEnd = Object.assign({}, this.pickerOptionsInnerEnd, {
disabledDate: (time) => {
return time.getTime() < new Date(this.formCreateCycle.innerStartTime).getTime()+24*60*60*1000 || time.getTime() > new Date(this.formCreateCycle.outerEndTime).getTime()
}
})
},
changeInnerStart () {
// 內(nèi)部周期開(kāi)始時(shí)間小于結(jié)束時(shí)間 并且大于等于外部周期開(kāi)始時(shí)間（大于等于今天）
this.pickerOptionsInnerStart = Object.assign({}, this.pickerOptionsInnerStart, {
disabledDate: (time) => {
return time.getTime() > new Date(this.formCreateCycle.innerEndTime).getTime()-24*60*60*1000 || time.getTime() < new Date(this.formCreateCycle.outerStartTime).getTime()
}
})
},
}
最后
雖然日期禁用可以做很多胀瞪，但是依然無(wú)法完美的做出所有限制。
比如：
1饲鄙、之前做不連續(xù)時(shí)間禁用凄诞，如果用戶選擇了兩個(gè)日期，兩個(gè)日期之間有一些日期已經(jīng)被選擇過(guò)了傍妒，所以被禁用了幔摸，這時(shí)候就只能額外再判斷用戶選擇的日期是否連續(xù)；
2颤练、雖然可以把內(nèi)部的兩個(gè)日期限制在外部的兩個(gè)日期之間既忆，但是做數(shù)據(jù)回顯時(shí)，日期又需做一番處理嗦玖，此時(shí)并不能完整的限制時(shí)間患雇，只能在用戶提交之前，判斷前一個(gè)日期是否大于等于后一個(gè)日期宇挫，彈出一個(gè)提示苛吱。
也就是說(shuō)，最后還是要在做一次時(shí)間的驗(yàn)證器瘪，判斷開(kāi)始時(shí)間不能大于等于結(jié)束時(shí)間翠储。
