vue ant DatePicker 日期选择器 限制日期可控范围

场景

限制当前日期之前不能选择
限制只能选择日期区间内 

Ant Design Vue

效果

moment //需全局安装moment 结合使用

<a-date-picker :disabledDate="disabledDate"></a-date-picker>

method
// 限制日期选择
  disabledDate(current) {
    return current && current > moment().endOf("day");//当前日期之后不能选择
    return current && current < moment().endOf("day");//当前日期之前不能选择（含当前日）
    return current && current < moment().subtract(1, "days");//当前日期之前不能选择（不含当前日）
    
    //只能选择日期区间内 dates格式为[“2023-03-09","2023-03-30”]
    let beginDay = dates[0];
    let endDay = dates[1];
    return current && current < moment(beginDay).endOf("day") || current > moment(endDay).endOf("day");
  },

 //限制选择当前时间前2个月后2个月
 let startDate = moment(new Date()).subtract(2, "months").format("YYYY-MM-DD");
 let endDate = moment(new Date()).add(2, "months").format("YYYY-MM-DD");

案例

<template>
    <a-range-picker value-formate="YYYY-MM-DD" format="YYYY-MM-DD" :disabledDate="disabledDate" :ranges="ranges" @change="onChange" />
</template>
<script>
import moment from 'moment';
export default {
data(){
  return{
    ranges:{
     '第一季度':[moment().quarter('1').startOf('quarter'), moment().quarter('1').endOf('quarter')],
     '第二季度':[moment().quarter('2').startOf('quarter'), moment().quarter('2').endOf('quarter')],
     '第三季度':[moment().quarter('3').startOf('quarter'), moment().quarter('3').endOf('quarter')],
     '第四季度':[moment().quarter('4').startOf('quarter'), moment().quarter('4').endOf('quarter')],
     '今年':[moment().startOf('year'), moment().endOf('year')],
     '去年':[moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
    }
  }
},
methods:{
  disabledDate(){
     return (current) => {
      return //这样的话所有的日期都不可选 只能通过点击left和right来选择 
      }
  },
  // disabledDate(current){
  //   return current && current.valueOf() > Date.now(); // 当前时间大于今天，则不能选择
  // },
  onChange(date, dateString){
    console.log(date, dateString)
    }
}
}
</script>

<style>

</style>