a-range-picker 时间范围今天之后的时间且初始时间和结束时间不大于30天

444 阅读1分钟

组件: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>