From c913cf7a9a725cc51935df0f9ec8c4dd7451364f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Tue, 4 Nov 2025 16:54:28 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=20=E5=AE=8C?= =?UTF-8?q?=E5=96=84=20month-panel=20=E7=9A=84=E5=B1=9E=E6=80=A7=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=20(#1351)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: ♻️ 完善 month-panel 的属性定义 * refactor: ♻️ 解决潜在的跨天日期默认值异常问题 --- src/subPages/calendar/Index.vue | 3 +- src/subPages/datetimePicker/Index.vue | 3 +- .../wd-calendar-view/monthPanel/types.ts | 64 ++++++++++++++++--- .../components/wd-calendar-view/types.ts | 8 ++- .../components/wd-calendar/types.ts | 8 ++- .../components/wd-datetime-picker/types.ts | 8 ++- 6 files changed, 78 insertions(+), 16 deletions(-) diff --git a/src/subPages/calendar/Index.vue b/src/subPages/calendar/Index.vue index d67888f2..75489712 100644 --- a/src/subPages/calendar/Index.vue +++ b/src/subPages/calendar/Index.vue @@ -77,7 +77,8 @@ import { ref } from 'vue' import { useI18n } from 'vue-i18n' const { t } = useI18n() -const minDate = ref(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime()) +const now = new Date() +const minDate = ref(new Date(now.getFullYear() - 20, now.getMonth() - 6, now.getDate()).getTime()) const value1 = ref(Date.now()) const value2 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()]) diff --git a/src/subPages/datetimePicker/Index.vue b/src/subPages/datetimePicker/Index.vue index 53f2a4d3..f4a6b1a3 100644 --- a/src/subPages/datetimePicker/Index.vue +++ b/src/subPages/datetimePicker/Index.vue @@ -117,7 +117,8 @@ const valueClear2 = ref([Date.now(), Date.now()]) const valueEllipsis = ref(Date.now()) const valueRangeEllipsis = ref([Date.now(), Date.now() + 7 * 24 * 60 * 60 * 1000]) const minDate = ref(Date.now()) -const maxDate = ref(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime()) +const now = new Date() +const maxDate = ref(new Date(now.getFullYear() + 1, now.getMonth(), now.getDate()).getTime()) const formatter: DatetimePickerViewFormatter = (type, value) => { let formatValue = '' diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts index bd27a852..e4083e25 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts @@ -1,7 +1,11 @@ import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue' -import { makeBooleanProp, makeRequiredProp } from '../../common/props' +import { makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props' import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../types' +const now = new Date() +const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime() +const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime() + /** * 月份信息 */ @@ -11,22 +15,66 @@ export interface MonthInfo { } export const monthPanelProps = { - type: makeRequiredProp(String as PropType), - value: makeRequiredProp([Number, Array, null] as PropType), - minDate: makeRequiredProp(Number), - maxDate: makeRequiredProp(Number), - firstDayOfWeek: makeRequiredProp(Number), + /** + * 日期类型 + */ + type: makeStringProp('date'), + /** + * 选中值，为 13 位时间戳或时间戳数组 + */ + value: { + type: [Number, Array, null] as PropType, + default: null + }, + /** + * 最小日期，为 13 位时间戳 + */ + minDate: makeNumberProp(defaultMinDate), + /** + * 最大日期，为 13 位时间戳 + */ + maxDate: makeNumberProp(defaultMaxDate), + /** + * 周起始天 + */ + firstDayOfWeek: makeNumberProp(0), + /** + * 日期格式化函数 + */ formatter: Function as PropType, + /** + * type 为范围选择时有效，最大日期范围 + */ maxRange: Number, + /** + * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 + */ rangePrompt: String, + /** + * type 为范围选择时有效，是否允许选择同一天 + */ allowSameDay: makeBooleanProp(false), + /** + * 是否展示面板标题，自动计算当前滚动的日期月份 + */ showPanelTitle: makeBooleanProp(false), + /** + * 选中日期所使用的当日内具体时刻 + */ defaultTime: { type: [Array] as PropType> }, - panelHeight: makeRequiredProp(Number), - // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 + /** + * 可滚动面板的高度 + */ + panelHeight: makeNumberProp(378), + /** + * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 + */ timeFilter: Function as PropType, + /** + * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 + */ hideSecond: makeBooleanProp(false), /** * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts index cadbf1bb..ca74249d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts @@ -1,6 +1,10 @@ import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue' import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props' +const now = new Date() +const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime() +const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime() + export type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange' export const calendarViewProps = { @@ -16,11 +20,11 @@ export const calendarViewProps = { /** * 最小日期，为 13 位时间戳 */ - minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()), + minDate: makeNumberProp(defaultMinDate), /** * 最大日期，为 13 位时间戳 */ - maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()), + maxDate: makeNumberProp(defaultMaxDate), /** * 周起始天 */ diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts index 813f715e..143a3ef5 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts @@ -12,6 +12,10 @@ import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequired import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types' import type { FormItemRule } from '../wd-form/types' +const now = new Date() +const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime() +const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime() + export const calendarProps = { ...baseProps, /** @@ -25,11 +29,11 @@ export const calendarProps = { /** * 最小日期，为 13 位时间戳 */ - minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()), + minDate: makeNumberProp(defaultMinDate), /** * 最大日期，为 13 位时间戳 */ - maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()), + maxDate: makeNumberProp(defaultMaxDate), /** * 周起始天 */ diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts index 3056a2f0..f02d3b85 100644 --- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts @@ -3,6 +3,10 @@ import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequired import type { DateTimeType, DatetimePickerViewFilter, DatetimePickerViewFormatter } from '../wd-datetime-picker-view/types' import type { FormItemRule } from '../wd-form/types' +const now = new Date() +const defaultMinDate = new Date(now.getFullYear() - 10, 0, 1).getTime() +const defaultMaxDate = new Date(now.getFullYear() + 10, 11, 31, 23, 59, 59).getTime() + export const datetimePickerProps = { ...baseProps, /** @@ -96,11 +100,11 @@ export const datetimePickerProps = { /** * 最小日期 */ - minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()), + minDate: makeNumberProp(defaultMinDate), /** * 最大日期 */ - maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31, 23, 59, 59).getTime()), + maxDate: makeNumberProp(defaultMaxDate), /** * 最小小时，time类型时生效 */