antd-vue 时间选择器限制, 选择不超过七天的范围,且默认时间为当前时间往后七天

1.template 代码

<a-range-picker
			v-model:value="conversationTime"
			style="margin-right: 20px"
			:disabledDate="disabledDate"
			@calendarChange="onCalendarChange"
			@change="onChange"
			@openChange="onOpenChange"
		  />

2.js 代码

 const disabledDate = (current) => {
	if (!conversationTime.value || (conversationTime.value as any).length === 0) {
	  return false;
	}
	const tooLate =
	  conversationTime.value[0] && current.diff(conversationTime.value[0], 'days') > 7;
	const tooEarly =
	  conversationTime.value[1] && conversationTime.value[1].diff(current, 'days') > 7;
	return tooEarly || tooLate;
  };
  const onChange = (val) => {
	conversationTime.value = val;
  };
  const onCalendarChange = (val) => {
	conversationTime.value = val;
  };
  const onOpenChange = (open: boolean) => {
	if (open) {
	  conversationTime.value = [] as any;
	}
  };
   const formatTime = (date) => {
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const day = date.getDate();
	return `${year}-${month}-${day}`;
  };

  // 获取当前日期的自然周时间
  const getTime = () => {
	const today = new Date();
	const monday = new Date(today);
	const sunday = new Date(monday);
	sunday.setDate(sunday.getDate() + 7); // 计算周日的日期
	return [dayjs(formatTime(monday)), dayjs(formatTime(sunday))];
  };

  const defaultTimeFunc = () => {
	conversationTime.value = getTime();
  };

  onMounted(() => {
	defaultTimeFunc();
  });
posted @ 2024-05-17 10:28  SKa-M  阅读(358)  评论(0编辑  收藏  举报