vue + antd vue + moment 日期选择器，选择范围限制

//main.js
import moment from 'moment';
Vue.prototype.$moment = moment;

<template>
 	<a-range-picker @change="onChange" @calendarChange="handleCalendarChange" :disabledDate="disabledDate">
 	</a-range-picker>
</template>
<script>
	export default {
		data(){
			return{
				search{
					startDate:'',
					endDate:''
				},
				chooseDate:''
			}
		},
		methods:{
			//日期范围发生变化的回调
			onChange(date,dateString){
				this.search.startDate = dateString[0];
				this.search.endDate= dateString[1];
			},
			//待选日期发生变化的回调(根据选择的日期，来控制不可选，这里仅获取选择的日期)
			handleCalendarChange(value,mode){
				//用moment进行格式转换
				this.chooseDate = this.$moment(value[0]._d).format('YYYY-MM-DD');
			},
			//禁止选择的日期（未来日期不可选，半年之前的不可选）
			disabledDate(current){
				const chooseDate = this.chooseDate;
				return current && current >= this.$moment().endOf('day') || current < this.$moment(new Date(chooseDate)).subtract(6,'months')
			}
		}
	}
</script>

<template>
  <a-form-item label="内容发布时间">
    <div class="date">
        <a-range-picker
         @change="onChangeDate"
         :default-value="[searchParams.pubStartDate,searchParams.pubEndDate]"
         :disabledDate="disabledDate"
       	></a-range-picker>
     </div>
  </a-form-item>
</template>
<script>
	export default{
		data(){
			searchParams:{
				pubStartDate:null,
				pubEndDate:null
			}
		},
		methods:{
			onChangeDate (date, dateString) {
            	this.searchParams.pubStartDate = dateString[0];
            	this.searchParams.pubEndDate = dateString[1];
        	},
        	 // 禁止选择的日期
        	disabledDate (current) {
            	return current && current >= this.$moment().endOf('day');
        	},
		},
		created(){
			this.searchParams.pubStartDate = this.$moment().subtract('days', 6).format('YYYY-MM-DD');
			this.searchParams.pubEndDate = this.$moment().format('YYYY-MM-DD');
		}
	}
</script>

<a-date-picker :disabled-date="disabledT1" v-model:value="T1" @change="T1OnChange" />
<a-date-picker :disabled-date="disabledT2" v-model:value="T2" @change="T2OnChange" />

<script>
export default {
	data(){
		return{
			T1:null,
			T2:null,
		}
	},
	methods:{
		T1OnChange(value,dateString){
			this.T1 = dateString;
		},
		T2OnChange(value,dateString){
			this.T2 = dateString;
		},
		disabledT1(current){
			return current && current < this.$moment().endOf('day');
		},
		disabledT2(current){
			return current < proxy.$moment(formData.accept_dead_line);
			 // return proxy.$moment(current).diff(formData.accept_dead_line, 'days')< 1; // 保证选定起始日期后，只能选择某段时间内作为结束日期
		},
	}
}
</script>

<template>
	<a-range-picker v-model:value="rangeDate" :disabled-date="disabledDate" @calendarChange="handleCalendarChange" @openChange="openChange" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import moment from 'moment';

const chooseDate = ref(''); //根据选择的第一个日期，调整可选的第二个日期范围
const rangeDate = ref([]);
const disabledDate = (current) => {
  return current && current < moment('2021-12-01') || (current > moment().endOf('day') || current < moment(new Date(chooseDate.value)).subtract(1,'years')|| current > moment(new Date(chooseDate.value)).subtract(-1,'years'));
};
//待选日期发生变化的回调(根据选择的日期，来控制不可选，这里仅获取选择的日期)
const handleCalendarChange = (value,mode)=>{
	chooseDate.value = moment(value[0]._d).format('YYYY-MM-DD');
}
// 监听日期面板打开关闭
const openChange = (status)=>{
  if(!status){
    chooseDate.value = '';
  }
}
</script>