1.限制結(jié)束時間必須大于開始時間
1) 在組件中添加 :picker-options="pickerOptionsEnd"
2) pickerOptionsEnd:?any?=?{
????????disabledDate:?(time:?any)?=>?{
????????????if?(this.form.startTime)?{? // 開始時間
????????????????return?(
????????????????????time.getTime()?<
????????????????????new?Date(
????????????????????????this.form.startTime
????????????????????).getTime()
????????????????);
????????????}
????????}
????};
2.限制開始日期必須小于結(jié)束時間或當前日期
1) 在組件中添加 :picker-options="pickerOptionsStart"
2)?pickerOptionsStart:?any?=?{
????????disabledDate:?(time:?any)?=>?{
????????????if?(this.form.endTime)?{
????????????????return?(
????????????????????time.getTime()?>?Date.now()?-?8.64e6?||
????????????????????time.getTime()?>
????????????????????????new?Date(
????????????????????????????this.form.endTime
????????????????????????).getTime()?/*開始日期要在選擇的結(jié)束日期之前 若結(jié)束日期大于當前日期 則開始日期為小于當前日期*/
????????????????);
????????????}
????????}
????}
3 選擇日期范圍? - 選擇一個日期后 可選范圍為已選日期前后30天,且不超過當前日期
1) 在組件中添加 :picker-options="pickerOptions"
2)?pickerOptions =?{
????onPick: ({ maxDate,minDate}) => {
? ? ? ? ? ? ? ? ? ? this.min = minDate && minDate.getTime();? ?//選擇的小的日期? 選擇一個日期時的值
? ? ? ? ? ? ? ? ? ? if(maxDate){? ?//如果兩個日期都選擇 該變量就有值
? ? ? ? ? ? ? ? ? ? ? ? this.min=''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? disabledDate:time=> {
? ? ? ? ? ? ? ? ? ? let m = 30 * 24 * 60 * 60 * 1000;
? ? ? ? ? ? ? ? ? ? if (this.min) {
? ? ? ? ? ? ? ? ? ? ? ? return time.getTime() > (this.min+m)||time.getTime() < (this.min-m)||time.getTime() > Date.now();
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? return time.getTime() > Date.now();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }