!309 feat(datePicker): 新增default-time属性

jevin98 · jevin98 · commit f420945af11b · 2024-05-06T09:38:06.000Z
* feat(datePicker): 新增default-time属性 #I9HA34
diff --git a/docs/document-component/src/document/zh-CN/components/datePicker.md b/docs/document-component/src/document/zh-CN/components/datePicker.md
@@ -234,6 +234,10 @@ export default {
       <lay-date-picker  v-model="rangeTime2" range type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
       modelValue:{{rangeTime2}}
     </lay-space>
+    <lay-space>
+      <lay-date-picker v-model="rangeTime5" range :default-time="defaultTime1" type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+      default-time: 12:30:00
+    </lay-space>
     <lay-space>
       <lay-date-picker  v-model="rangeTime3" range type="yearmonth" :placeholder="['开始日期','结束日期']"></lay-date-picker>
       modelValue:{{rangeTime3}}
@@ -251,6 +255,9 @@ const rangeTime1 = ref([]);
 const rangeTime2 = ref(['2001-01-01 01:01:00','2001-02-1 01:01:00']);
 const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 const rangeTime4 = ref(['01:01:00', '03:03:03']);
+const rangeTime5 = ref([]);
+
+const defaultTime1 = '12:30:00'
 </script>
 
 :::
@@ -391,6 +398,7 @@ export default {
 | suffix-icon  | 后置图标                                     | `string`                                    | --                  | 内置图标集                                          | `1.4.0` |
 | timestamp    | 时间戳模式(13 位),仅对 date 和 datetime 有效 | `boolean`                                   | `false`             | `true` `false`                                      | `1.6.5` |
 | format       | 输出格式化                                   | `string`                                    | --                  | 例如`YYYY-MM-DD`                                    | -       |
+| default-time | 范围日期 `type=datetime` 时分秒默认时间        | `string` `Array<string>`                    | --                  | 例如`12:30:00`                               | `2.17.2`       |
 | contentStyle | 内容自定义样式                               | `StyleValue`                                | --                  | --                                                  | --      |
 | contentClass | 内容自定义 Class                             | `string` `Array<string \| object>` `object` | --                  | --                                                  | --      |
 
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -57,7 +57,7 @@
     "@vueuse/core": "8.7.3",
     "async-validator": "^4.1.1",
     "cropperjs": "^1.5.12",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.10",
     "evtd": "^0.2.3",
     "jsbarcode": "3.11.5",
     "qrcode": "1.5.0",
diff --git a/packages/component/src/component/datePicker/components/DateRange.vue b/packages/component/src/component/datePicker/components/DateRange.vue
@@ -185,6 +185,7 @@
 </template>
 
 <script lang="ts" setup>
+import type { Dayjs } from "dayjs";
 import { computed, inject, reactive, ref, watch } from "vue";
 import { provideType } from "../interface";
 import { setDateList } from "../day";
@@ -196,6 +197,8 @@ import MonthPanel from "./MonthPanel.vue";
 import LayDropdown from "../../dropdown/index.vue";
 import dayjs from "dayjs";
 import { useI18n } from "../../../language";
+import { isString } from "../../../utils";
+
 export interface DateRangeProps {
   startTime: string;
   endTime: string;
@@ -231,26 +234,57 @@ const MONTH_NAME = computed(() => [
   t("datePicker.december"),
 ]);
 
+const formatDayHMS = (v: string) => dayjs(`2020-01-01 ${v}`);
+
+const setDefaultTime = (before = true): Dayjs | undefined => {
+  if (!datePicker.defaultTime) return;
+
+  if (Array.isArray(datePicker.defaultTime)) {
+    if (isString(datePicker.defaultTime[0]) && before) {
+      return formatDayHMS(datePicker.defaultTime[0]);
+    }
+    if (isString(datePicker.defaultTime[1]) && !before) {
+      return formatDayHMS(datePicker.defaultTime[1]);
+    }
+  }
+
+  if (isString(datePicker.defaultTime)) {
+    return formatDayHMS(datePicker.defaultTime);
+  }
+};
+
 const prevDateList = ref<any>([]);
 const nextDateList = ref<any>([]);
 const startTime = reactive({
   year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
   month: props.startTime ? dayjs(props.startTime).month() : dayjs().month(),
   day: props.startTime ? dayjs(props.startTime).startOf("day").valueOf() : -1,
   hms: {
-    hh: props.startTime ? dayjs(props.startTime).hour() : 0,
-    mm: props.startTime ? dayjs(props.startTime).minute() : 0,
-    ss: props.startTime ? dayjs(props.startTime).second() : 0,
+    hh: props.startTime
+      ? dayjs(props.startTime).hour()
+      : setDefaultTime()?.hour() || 0,
+    mm: props.startTime
+      ? dayjs(props.startTime).minute()
+      : setDefaultTime()?.minute() || 0,
+    ss: props.startTime
+      ? dayjs(props.startTime).second()
+      : setDefaultTime()?.second() || 0,
   },
 });
 const endTime = reactive({
   year: props.endTime ? dayjs(props.endTime).year() : dayjs().year(),
   month: props.endTime ? dayjs(props.endTime).month() : dayjs().month(),
   day: props.endTime ? dayjs(props.endTime).startOf("day").valueOf() : -1,
   hms: {
-    hh: props.endTime ? dayjs(props.endTime).hour() : 0,
-    mm: props.endTime ? dayjs(props.endTime).minute() : 0,
-    ss: props.endTime ? dayjs(props.endTime).second() : 0,
+    hh: props.endTime
+      ? dayjs(props.endTime).hour()
+      : setDefaultTime(false)?.hour() || 0,
+    mm: props.endTime
+      ? dayjs(props.endTime).minute()
+      : setDefaultTime(false)?.minute() || 0,
+    ss: props.endTime
+      ? dayjs(props.endTime).second()
+      : setDefaultTime(false)?.second() || 0,
   },
 });
 const hoverDate = ref(-1);
diff --git a/packages/component/src/component/datePicker/index.vue b/packages/component/src/component/datePicker/index.vue
@@ -150,6 +150,7 @@ export interface DatePickerProps {
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
   format?: string;
+  defaultTime: string | string[];
 }
 
 defineOptions({
@@ -450,5 +451,6 @@ provide("datePicker", {
   timestamp: props.timestamp,
   min: props.min,
   max: props.max,
+  defaultTime: props.defaultTime,
 });
 </script>
diff --git a/packages/component/src/component/datePicker/interface.ts b/packages/component/src/component/datePicker/interface.ts
@@ -26,4 +26,5 @@ export type provideType = {
   timestamp: boolean;
   max: string;
   min: string;
+  defaultTime: string | string[];
 };
diff --git a/packages/component/src/utils/vueUtil.ts b/packages/component/src/utils/vueUtil.ts
@@ -62,3 +62,7 @@ export const isFunction = (val: unknown): val is Function =>
 export const isUndefined = (val: any): val is undefined => val === undefined;
 
 export const isNumber = (val: any): val is number => typeof val === "number";
+
+export const isString = (val: any): val is string => typeof val === "string";
+export const isDate = (val: Date): boolean =>
+  val instanceof Date && !isNaN(val.valueOf());
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
