cl-calendar 支持配置 start、end 可选日期

pages/demo/form/calendar.uvue

@@ -13,6 +13,15 @@
 				<cl-calendar-select v-model:date="dateRange" mode="range"></cl-calendar-select>
 			</demo-item>
 
+			<demo-item :label="t('开始 / 结束')">
+				<cl-calendar-select
+					v-model:date="dateRange3"
+					mode="range"
+					:start="startDate"
+					:end="endDate"
+				></cl-calendar-select>
+			</demo-item>
+
 			<demo-item :label="t('禁用部分日期')">
 				<cl-calendar-select v-model="date" :date-config="dateConfig"></cl-calendar-select>
 			</demo-item>
@@ -186,6 +195,11 @@ const dateConfig2 = computed(() => {
 	return dates;
 });
 
+const dateRange3 = ref<string[]>([]);
+
+const startDate = dayUts().format("YYYY-MM-DD");
+const endDate = dayUts().add(10, "day").format("YYYY-MM-DD");
+
 function onChange(date: string[]) {
 	console.log("日期变化:", date);
 }

uni_modules/cool-ui/components/cl-calendar-select/cl-calendar-select.uvue

@@ -20,6 +20,8 @@
 					v-model:date="date"
 					:mode="mode"
 					:date-config="dateConfig"
+					:start="start"
+					:end="end"
 					@change="onCalendarChange"
 				></cl-calendar>
 			</view>
@@ -60,6 +62,7 @@ import { isEmpty, parsePt, parseToObject } from "@/cool";
 import type { ClSelectTriggerPassThrough } from "../cl-select-trigger/props";
 import type { ClPopupPassThrough } from "../cl-popup/props";
 import { t } from "@/locale";
+import { useUi } from "../../hooks";
 
 defineOptions({
 	name: "cl-calendar-select"
@@ -97,6 +100,14 @@ const props = defineProps({
 		type: Array as PropType<ClCalendarDateConfig[]>,
 		default: () => []
 	},
+	// 开始日期，可选日期的开始
+	start: {
+		type: String
+	},
+	// 结束日期，可选日期的结束
+	end: {
+		type: String
+	},
 	// 选择器标题
 	title: {
 		type: String,
@@ -152,6 +163,9 @@ const props = defineProps({
 // 定义事件
 const emit = defineEmits(["update:modelValue", "update:date", "change", "select"]);
 
+// UI实例
+const ui = useUi();
+
 // 弹出层引用
 const popupRef = ref<ClPopupComponentPublicInstance | null>(null);
 
@@ -228,6 +242,9 @@ function clear() {
 function confirm() {
 	if (props.mode == "single") {
 		if (value.value == null) {
+			ui.showToast({
+				message: t("请选择日期")
+			});
 			return;
 		}
 
@@ -240,6 +257,9 @@ function confirm() {
 		}
 	} else {
 		if (isEmpty(date.value)) {
+			ui.showToast({
+				message: t("请选择日期")
+			});
 			return;
 		}
 

uni_modules/cool-ui/components/cl-calendar/cl-calendar.uvue

@@ -167,6 +167,14 @@ const props = defineProps({
 		type: Array as PropType<ClCalendarDateConfig[]>,
 		default: () => []
 	},
+	// 开始日期，可选日期的开始
+	start: {
+		type: String
+	},
+	// 结束日期，可选日期的结束
+	end: {
+		type: String
+	},
 	// 设置年份
 	year: {
 		type: Number
@@ -304,6 +312,20 @@ function isDateSelected(dateStr: string): boolean {
  * @param dateStr 日期字符串 YYYY-MM-DD
  */
 function isDateDisabled(dateStr: string): boolean {
+	// 大于开始日期
+	if (props.start != null) {
+		if (dayUts(dateStr).isBefore(dayUts(props.start))) {
+			return true;
+		}
+	}
+
+	// 小于结束日期
+	if (props.end != null) {
+		if (dayUts(dateStr).isAfter(dayUts(props.end))) {
+			return true;
+		}
+	}
+
 	return props.dateConfig.some((config) => config.date == dateStr && config.disabled == true);
 }