代码语言：javascript复制
//main.js
import moment from 'moment';
Vue.prototype.$moment = moment;案例1：要求日期不可选择未来时间，日期范围不得超过半年
代码语言：html复制<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>案例2：要求日期默认为最近一周，不可选择未来日期
代码语言：html复制<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>案例3：两个日期选择器，第一个日期选择器只能选择未来日期（T1），另一个日期选择器只能选择T1及T1之后的日期
代码语言：html复制<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>return proxy.$moment(current).diff(formData.accept_dead_line, ‘days’)< 1; // 保证选定起始日期后，只能选择某段时间内作为结束日期 这个也可以，不过不能<0,>0,==0,不能以0为临界点，不然会有bug，如果需求是T2大于或小于T1，这种情况下可以用
案例4 ：起始日期不得早于2021年12月1日，截止日期不得晚于今天，最长选择1年
代码语言：html复制<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>
