vue antd 的 DatePicker组件的RangePicker

antd的DatePicke组件 限制可选择的时间区间
页面
<a-range-picker
class=“data-picker”
@ok=“fOk”
:default-value="[appointStartTime,appointEndTime]"
:locale=“currentLanguage === ‘zh-CN’?zhCN:enUs”
:show-time="{ format: ‘HH:mm’ }"
:disabledDate=“disabledDate”
:disabled-time=“disabledRangeTime”
format=“YYYY-MM-DD HH:mm”
placeholder=“currentLanguage === ‘zh-CN’?[‘开始时间’, ‘结束时间’]:[‘Start Time’, ‘End Time’]”
/>

脚本
import { DatePicker } from “ant-design-vue”;
const {RangePicker} = DatePicker;
import zhCN from ‘ant-design-vue/es/date-picker/locale/zh_CN’;
import enUs from ‘ant-design-vue/es/date-picker/locale/en_US’;
import moment from ‘moment’;
components: {
‘a-range-picker’ : RangePicker
},
data() {
return {
appointStartTime:‘2021-8-1 8:12:00’,//限制开始时间
appointEndTime:‘2021-8-5 10:12:00’,//限制预约结束时间
zhCN,//中文
enUs,//英文
}
}
methods:{
range(start, end) {
let result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
},
//预约日期限制
disabledDate(current){
let cDate = moment(current).format(‘YYYY-MM-DD’)
let sDate = moment(this.appointStartTime).format(‘YYYY-MM-DD’)
let eDate = moment(this.appointEndTime).format(‘YYYY-MM-DD’)
return current && (moment(cDate).isBefore(moment(sDate))) || moment(cDate).isAfter(moment(eDate));
},
//预约时间限制
disabledRangeTime(dates, type) {
if(dates && dates.length>=2){
//开始时间
if (type === ‘start’) {
let sdates = dates[0]
let day = moment(sdates).dayOfYear()
let hour = moment(sdates).hour()
let sday = moment(this.appointStartTime).dayOfYear()
let shour = moment(this.appointStartTime).hour()
let sminute = moment(this.appointStartTime).minute()
if(day=sday){
if(hour=shour){
return {
disabledHours: () => this.range(0,shour),
disabledMinutes: () => this.range(0,sminute),
}
}else{
return {
disabledHours: () => this.range(0,shour),
}
}
}
} else {//结束时间
let edates = dates[1]
let day = moment(edates).dayOfYear()
let hour = moment(edates).hour()
let eday = moment(this.appointEndTime).dayOfYear()
let ehour = moment(this.appointEndTime).hour()
let eminute = moment(this.appointEndTime).minute()
if(day=eday){
if(hour=ehour){
return {
disabledHours: () => this.range(ehour + 1,24),
disabledMinutes: () => this.range(eminute + 1,60),
}
}else{
return {
disabledHours: () => this.range(ehour + 1,24),
}
}
}
}
}
},
}