组件:Ant Design datePicker
需求解析:
1.时间范围今天之后的时间->disabledDate设置小于今天的时间范围置灰
2.初始时间和结束时间不大于30天->首先在待选日期发生变化的回调中(calendarChange)记录选中时间,然后在disabledDate设置30天时间范围,最后在日期范围发生变化的回调(change)清空记录选中的时间
<a-range-picker
allowClear
@change="change"
v-model="form.date"
:disabledDate="disabledDate"
@calendarChange="calendarChange"
:getCalendarContainer="
triggerNode => {
return triggerNode.parentNode;
}
"
/>
<script>
import moment from 'moment';
export default{
data(){
selectDate:"",
offsetDays:86400000*30,
form:{
date,
},
},
methods:{
disabledDate(current){
if (this.selectDate) {
let selectV = moment(this.selectDate, "YYYY-MM-DD").valueOf();
return !(current > moment().endOf('day') &&
current < moment(new Date(selectV + this.offsetDays), "YYYY-MM-DD"))
}else{
return current && current < moment().subtract(1, 'days').endOf('day')
}
},
calendarChange(date){
this.selectDate = date[0];
},
change(date, dateString) {
this.selectDate = "";
console.log(date, dateString);
},
},
}
</script>