Ant Datepicker VUE3的代码

<a-range-picker v-model:value="formediting.data.plan_time" style="width: 400px"
     :disabled-date="disabledDate"
     :show-time="{hideDisabledOptions: true,defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')]}"
       valueFormat="YYYY-MM-DD HH:mm"/>

核心JS

import moment from 'moment';
import dayjs from 'dayjs';
const disabledDate = current => {
	// 只能选择今天之后的日期,今天不可选~
	return current && current < moment().endOf('day');
	// 不可以选择之前的日期,今天包括之后可以选,控制大于小于来实现选择之前的日期还是之后的日期
	return current < moment().subtract(1, 'day'); 
	// 只能选择今天当天的日期
	return current > moment().subtract(0, 'day') || current < moment().subtract(1, 'day'); 
	// 控制日期可选范围
	return current < moment("2022-08-14")|| current > moment("2022-08-18")
};

其实最重要的就是设置  :disabled-date="disabledDate"  这个这个文章应该是够详细了,可以调整后面的数字从而来控制选择的日期

效果:

今天之后(今天不可选)

 今天之前(今天不可以选择,)

单纯选择今天

控制范围

Logo

前往低代码交流专区

更多推荐