!497 feat(datePicker): default-time在非range模式下生效

jevin98 · sleeprite · commit b2c0223060c0 · 2025-07-05T09:27:15.000Z
* feat(datePicker): default-time在非range模式下生效
diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
@@ -636,7 +636,7 @@ const value13 = ref()
 | format          | 输出格式化                                                               | `string`                                                                 |   [查看映射](https://gitee.com/layui-vue/layui-vue/tree/master/packages/component/component/datePicker/hook/useDatePicker.ts#L56)                | 参考[dayjs format](https://day.js.org/docs/en/display/format#list-of-all-available-formats)                                    | -        |
 | input-format          | 输入框格式化                                                               | `string`                                                                 | [查看映射](https://gitee.com/layui-vue/layui-vue/tree/master/packages/component/component/datePicker/hook/useDatePicker.ts#L56)                  | 参考[dayjs format](https://day.js.org/docs/en/display/format#list-of-all-available-formats)                                    | `2.19.0`    |
 | default-value   | `首次未点击` 时，下拉弹窗打开时默认显示的时间，传空为组件首次 `渲染时间` | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>` | --                  | --                                                  | `2.19.0` |
-| default-time    | 范围日期 `type=datetime` 时分秒默认时间                                  | `string` `Array<string>`                                                 | --                  | 例如`12:30:00`                                      | `2.17.2` |
+| default-time    | `type=datetime` 时分秒默认时间                                  | `string` `Array<string>`                                                 | --                  | 例如`12:30:00`                                      | `2.17.2` |
 | content-style   | 内容自定义样式                                                           | `StyleValue`                                                             | --                  | --                                                  | --       |
 | content-class   | 内容自定义 Class                                                         | `string` `Array<string \| object>` `object`                              | --                  | --                                                  | --       |
 | year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -339,4 +339,36 @@ describe("LayDatePicker date type", () => {
     expect(wrapper.find(".custom-footer").text()).toBe("自定义底部");
   });
 
+   test("default-time", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: 'datetime',
+        modelValue: "",
+        defaultTime: '12:30:00',
+        static: true
+      },
+    });
+    await nextTick();
+    
+    const checkTimeDom = wrapper.find(".layui-laydate-footer > .layui-btn")
+    expect(checkTimeDom.exists()).toBeTruthy();
+
+    await checkTimeDom.trigger('click')
+
+  
+    const timeDom = wrapper.find(".laydate-time-show")
+    expect(timeDom.exists()).toBeTruthy();
+    
+    const currentHH = timeDom.find(".num-list[data-type='hh'] .layui-this")
+    const currentMM = timeDom.find(".num-list[data-type='mm'] .layui-this")
+    const currentSS = timeDom.find(".num-list[data-type='ss'] .layui-this")
+
+    expect(currentHH.exists()).toBeTruthy();
+    expect(currentMM.exists()).toBeTruthy();
+    expect(currentSS.exists()).toBeTruthy();
+
+    expect(currentHH.text()).toBe('12');
+    expect(currentMM.text()).toBe('30');
+    expect(currentSS.text()).toBe('00');
+  });
 });
diff --git a/packages/component/component/datePicker/component/DatePicker.vue b/packages/component/component/datePicker/component/DatePicker.vue
@@ -5,15 +5,15 @@ import type {
   Shortcuts as ShortcutsType,
 } from "../interface";
 import type { UniquePickerProps } from "./interface";
+import LayButton from "@layui/component/component/button/index.vue";
+import { useI18n } from "@layui/component/language";
+
+import { isFunction } from "@layui/component/utils";
 import dayjs from "dayjs";
 import { computed, ref, watch } from "vue";
 
-import { useI18n } from "../../../language";
-import { isFunction } from "../../../utils";
-
-import LayButton from "../../button/index.vue";
-
 import { useBaseDatePicker } from "../hook/useBaseDatePicker";
+import { setHMS } from "../util";
 import Date from "./common/Date.vue";
 import DatePickerRender from "./common/DatePickerRender.vue";
 import Footer from "./common/Footer.vue";
@@ -30,14 +30,20 @@ const currentData = ref<UniquePickerProps["modelValue"]>();
 const showDate = ref<Dayjs>(dayjs());
 const currentType = ref();
 
-const { getDefaultValue } = useBaseDatePicker(props);
+const { defaultTimeValue, getDefaultValue } = useBaseDatePicker(props);
 const { t } = useI18n();
 
 watch(
   () => props.modelValue,
   () => {
     currentData.value = props.modelValue;
-    showDate.value = props.modelValue || getDefaultValue();
+    let _defaultValue = getDefaultValue();
+
+    _defaultValue = defaultTimeValue.value[0]
+      ? setHMS(_defaultValue, defaultTimeValue.value[0])
+      : _defaultValue;
+
+    showDate.value = props.modelValue || _defaultValue;
   },
   { immediate: true },
 );
diff --git a/packages/component/component/datePicker/component/DateRange.vue b/packages/component/component/datePicker/component/DateRange.vue
@@ -9,13 +9,12 @@ import type {
 import LayDropdown from "@layui/component/component/dropdown";
 import LayIcon from "@layui/component/component/icon";
 import { useI18n } from "@layui/component/language";
-import { isArray } from "@layui/component/utils";
 import dayjs from "dayjs";
 
 import { computed, ref, watch } from "vue";
 import { useBaseDatePicker } from "../hook/useBaseDatePicker";
 import { useShortcutsRange } from "../hook/useShortcutsRange";
-import { normalizeDayjsValue, setDateList } from "../util";
+import { setDateList, setHMS } from "../util";
 import DateContent from "./common/DateContent.vue";
 import DatePickerRender from "./common/DatePickerRender.vue";
 import Footer from "./common/Footer.vue";
@@ -28,7 +27,10 @@ const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
-const { getDefaultValue } = useBaseDatePicker(props);
+const {
+  defaultTimeValue,
+  getDefaultValue,
+} = useBaseDatePicker(props);
 const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref<DatePickerValueNotArray>();
@@ -66,24 +68,6 @@ const MONTH_NAME = computed(() => [
   t("datePicker.december"),
 ]);
 
-const _defaultTime = computed(() => {
-  if (props.type !== "datetime")
-    return [];
-
-  const times = isArray(props.defaultTime)
-    ? props.defaultTime
-    : [props.defaultTime, props.defaultTime];
-
-  return times.map(t => normalizeDayjsValue(t, "HH:mm:ss"));
-});
-
-function setHMS(date: Dayjs, referDate: Dayjs) {
-  return date
-    .hour(referDate.hour())
-    .minute(referDate.minute())
-    .second(referDate.second());
-}
-
 watch(
   () => props.modelValue,
   () => {
@@ -92,12 +76,12 @@ watch(
     endDate.value = end;
 
     const _defaultDate = getDefaultValue();
-    const _leftDate = _defaultTime.value[0]
-      ? setHMS(_defaultDate, _defaultTime.value[0])
+    const _leftDate = defaultTimeValue.value[0]
+      ? setHMS(_defaultDate, defaultTimeValue.value[0])
       : _defaultDate;
 
-    const _rightDate = _defaultTime.value[1]
-      ? setHMS(_defaultDate.add(1, "month"), _defaultTime.value[1])
+    const _rightDate = defaultTimeValue.value[1]
+      ? setHMS(_defaultDate.add(1, "month"), defaultTimeValue.value[1])
       : _defaultDate.add(1, "month");
 
     leftDate.value = start || _leftDate;
diff --git a/packages/component/component/datePicker/component/MonthRange.vue b/packages/component/component/datePicker/component/MonthRange.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Dayjs } from "dayjs";
 import type {
-  DatePickerModelValueSingleType,
   DatePickerValueNotArray,
   Shortcuts as ShortcutsType,
 } from "../interface";
@@ -12,6 +11,7 @@ import { useI18n } from "@layui/component/language";
 import dayjs from "dayjs";
 import { computed, ref, watch } from "vue";
 
+import { useBaseDatePicker } from "../hook/useBaseDatePicker";
 import { useShortcutsRange } from "../hook/useShortcutsRange";
 import DatePickerRender from "./common/DatePickerRender.vue";
 import Footer from "./common/Footer.vue";
@@ -23,6 +23,9 @@ const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
+const {
+  getDefaultValue,
+} = useBaseDatePicker(props);
 const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref<DatePickerValueNotArray>();
@@ -35,14 +38,6 @@ const yearRightRef = ref<InstanceType<typeof LayDropdown>>();
 
 const hoverMonth = ref<Dayjs | undefined>();
 
-function getDefaultValue() {
-  const _defaultValue = dayjs(
-    props.defaultValue as DatePickerModelValueSingleType,
-  );
-
-  return _defaultValue.isValid() ? _defaultValue : dayjs().startOf("day");
-}
-
 watch(
   () => props.modelValue,
   () => {
diff --git a/packages/component/component/datePicker/component/common/Time.vue b/packages/component/component/datePicker/component/common/Time.vue
@@ -156,12 +156,14 @@ function scrollTo() {
 }
 
 watch(
-  () => props.modelValue,
-  (modelValue) => {
+  () => [props.modelValue, props.showDate],
+  ([modelValue, showDate]) => {
+    const dateValue = modelValue || showDate;
+
     hms.value = {
-      hh: modelValue ? modelValue.hour() : null,
-      mm: modelValue ? modelValue.minute() : null,
-      ss: modelValue ? modelValue.second() : null,
+      hh: dateValue ? dateValue.hour() : null,
+      mm: dateValue ? dateValue.minute() : null,
+      ss: dateValue ? dateValue.second() : null,
     };
 
     scrollTo();
diff --git a/packages/component/component/datePicker/hook/useBaseDatePicker.ts b/packages/component/component/datePicker/hook/useBaseDatePicker.ts
@@ -3,7 +3,10 @@ import type {
   DatePickerRenderComponentProps,
 } from "../interface";
 
+import { isArray } from "@layui/component/utils";
 import dayjs from "dayjs";
+import { computed } from "vue";
+import { normalizeDayjsValue } from "../util";
 
 export function useBaseDatePicker(props: DatePickerRenderComponentProps) {
   const getDefaultValue = () => {
@@ -16,5 +19,18 @@ export function useBaseDatePicker(props: DatePickerRenderComponentProps) {
       : dayjs().startOf("day");
   };
 
-  return { getDefaultValue };
+  const defaultTimeValue = computed(() => {
+    if (props.type !== "datetime")
+      return [];
+
+    const times = isArray(props.defaultTime)
+      ? props.defaultTime
+      : [props.defaultTime, props.defaultTime];
+
+    return times.map(t => normalizeDayjsValue(t, "HH:mm:ss"));
+  });
+
+  return { defaultTimeValue, getDefaultValue };
 }
+
+export type UseBaseDatePicker = ReturnType<typeof useBaseDatePicker>;
diff --git a/packages/component/component/datePicker/util.ts b/packages/component/component/datePicker/util.ts
@@ -141,3 +141,10 @@ export function setDateList(year: number, month: number): Array<DateContentSingl
   }
   return list;
 }
+
+export function setHMS(date: Dayjs, referDate: Dayjs) {
+  return date
+    .hour(referDate.hour())
+    .minute(referDate.minute())
+    .second(referDate.second());
+}

Original file line number	Diff line number	Diff line change
`@@ -141,3 +141,10 @@ export function setDateList(year: number, month: number): Array<DateContentSingl`
`141`	`141`	`}`
`142`	`142`	`return list;`
`143`	`143`	`}`
	`144`	`+`
	`145`	`+export function setHMS(date: Dayjs, referDate: Dayjs) {`
	`146`	`+ return date`
	`147`	`+ .hour(referDate.hour())`
	`148`	`+ .minute(referDate.minute())`
	`149`	`+ .second(referDate.second());`
	`150`	`+}`