!479 feat(datePicker): 新增static(面板)模式

jevin98 · sleeprite · commit 9a2f00f95ce9 · 2025-04-25T15:07:47.000Z
* chore: 统一borderColor变量
* feat(datePicker): 新增static(面板)模式
diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
@@ -527,6 +527,32 @@ const shortcuts2 = [
 
 :::
 
+::: title 静态面板
+:::
+
+::: demo 通过 `static` 开启静态面板模式
+
+<template>
+  <lay-space direction="vertical">
+    modelValue: {{value11}}
+    <lay-date-picker v-model="value11" static type="date" placeholder="format"></lay-date-picker>
+  </lay-space>
+  <lay-space style="margin-top: 10px" direction="vertical">
+    modelValue: {{value12}}
+    <lay-date-picker v-model="value12" static type="date" range  placeholder="范围"></lay-date-picker>
+  </lay-space>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value11 = ref(null);
+const value12 = ref([]);
+
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::
 
@@ -559,6 +585,8 @@ const shortcuts2 = [
 | content-class   | 内容自定义 Class                                                         | `string` `Array<string \| object>` `object`                              | --                  | --                                                  | --       |
 | year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
 | shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | --             | --|              `2.19.0`                    |  
+| static          | 静态日期面板模式       |  `boolean`            | `false`            | --|              `2.22.1`                    |  
+| teleportProps   | 继承至 dropdown 组件，下拉面板 `传递` 属性  | `object`             | `{to: 'body', disabled: false}`   |  --  | `2.22.1` |
 
 
 :::
diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -262,4 +262,45 @@ describe("LayDatePicker date type", () => {
       }
     });
   });
+
+  test("static model > modelValue", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2025/11/12 10:00:00",
+        static: true
+      },
+    });
+
+    await nextTick()
+
+    const component = wrapper.findComponent(LayDatePicker);
+    const DateInstance = wrapper.findComponent(DateComponent);
+
+    const [YearSpan, MonthSpan] = DateInstance.findAll(
+      ".layui-laydate-header .laydate-set-ym span"
+    );
+
+    expect((component.props() as any).modelValue).toBe("2025/11/12 10:00:00");
+
+    expect(YearSpan.text()).toContain("2025");
+    expect(MonthSpan.text()).toContain("11");
+
+    const dateCurrent = DateInstance.find(".layui-laydate-content .layui-this");
+
+    expect(dateCurrent.exists()).toBeTruthy();
+    expect(dateCurrent.text()).toBe("12");
+
+    await YearSpan.trigger("click");
+    await sleep();
+
+    const YearInstance = wrapper.findComponent(Year);
+
+    expect((YearInstance.vm as any).currentYear).toBe(2025);
+
+    const YearCurrent = YearInstance.find(".layui-laydate-content .layui-this");
+
+    expect(YearCurrent.exists()).toBeTruthy();
+    expect(YearCurrent.text()).toBe("2025");
+  });
+
 });
diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -11,7 +11,7 @@ import LayInput from "../../../input/index.vue";
 import { DATE_PICKER_CONTEXT } from "../../interface";
 import { checkRangeValue, dayjsToString } from "../../util";
 
-const props = withDefaults(defineProps<DatePickerProps>(), {});
+const props = defineProps<DatePickerProps>();
 const emits = defineEmits([
   "update:modelValue",
   "change",
@@ -29,7 +29,7 @@ const classes = computed(() => {
     "layui-date-picker",
     {
       "layui-date-range-picker": props.range,
-      // "layui-date-picker-static": props.static,
+      "layui-date-picker-static": props.static,
     },
   ];
 });
@@ -255,12 +255,14 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
 <template>
   <div :class="classes" :size="size">
     <LayDropdown
+      v-if="!static"
       ref="dropdownRef"
       :disabled="disabled"
       :auto-fit-min-width="false"
       :click-to-close="false"
       :content-class="contentClass"
       :content-style="contentStyle"
+      :teleport-props="teleportProps"
     >
       <LayInput
         v-if="!range"
@@ -314,5 +316,7 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
         <slot :on-pick="onPick" />
       </template>
     </LayDropdown>
+
+    <slot v-else :on-pick="onPick" />
   </div>
 </template>
diff --git a/packages/component/component/datePicker/index.less b/packages/component/component/datePicker/index.less
@@ -75,10 +75,6 @@ html #layuicss-laydate {
   z-index: 66666666;
   border-radius: var(--global-border-radius);
   font-size: 14px;
-  -webkit-animation-duration: 0.2s;
-  animation-duration: 0.2s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
 
   .layui-laydate-year-control {
     padding: 4px;
@@ -94,30 +90,6 @@ html #layuicss-laydate {
   -webkit-transition-duration: 0.3s;
 }
 
-/* 微微往下滑入 */
-@keyframes laydate-downbit {
-  0% {
-    opacity: 0.3;
-    transform: translate3d(0, -5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.layui-laydate {
-  animation-name: laydate-downbit;
-}
-// .layui-laydate-static {
-//   position: relative;
-//   z-index: 0;
-//   display: inline-block;
-//   margin: 0;
-//   -webkit-animation: none;
-//   animation: none;
-// }
-
 /* 展开年月列表时 */
 .laydate-ym-show .laydate-prev-m,
 .laydate-ym-show .laydate-next-m {
@@ -693,9 +665,14 @@ html #layuicss-laydate {
     transition: all 0.3s;
   }
 }
-/* 静态面板 */
-// .layui-date-picker-static {
-//   width: auto !important;
-//   height: 100% !important;
-//   border: 1px solid var(--input-border-color);
-// }
+
+.layui-date-picker-static {
+  &[size] {
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    background-color: #fff;
+    border: 1px solid var(--input-border-color);
+    border-radius: var(--global-border-radius);
+  }
+}
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   defaultTime: null,
   yearPage: 15,
   // yearStep: 1,
-  // static: false,
+  static: false,
 });
 
 dayjs.extend(customParseFormat);
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
@@ -1,6 +1,7 @@
+import type { DropdownTeleportProps } from "@layui/component/component/dropdown/interface";
+import type { CommonClass, CommonSize } from "@layui/component/types/common";
 import type { ConfigType, Dayjs } from "dayjs";
 import type { Component, InjectionKey, StyleValue } from "vue";
-import type { CommonClass, CommonSize } from "../../types/common";
 
 export type DatePickerType =
   | "date"
@@ -60,11 +61,12 @@ export interface DatePickerProps {
    * @version 2.19.0
    */
   shortcuts?: Array<Shortcuts>;
-  // /**
-  //  * 静态面板
-  //  * @version 2.19.0
-  //  */
-  // static?: boolean;
+  /**
+   * 静态面板
+   * @version 2.22.1
+   */
+  static?: boolean;
+  teleportProps?: DropdownTeleportProps;
 }
 
 export interface RequiredDatePickerProps extends DatePickerProps {
