From 28a296a7ed0275c1fbe8f881f3280e7126b25a99 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 5 Sep 2024 18:32:50 +0800
Subject: [PATCH 01/45] refactor(datePicker): init component

---
 .../datePickerV2/component/YearPanel.vue      |   5 +
 .../component/common/commonBlock.vue          |  76 ++
 .../datePickerV2/component/interface.ts       |  17 +
 .../component/component/datePickerV2/day.ts   | 111 +++
 .../datePickerV2/hook/useDateCommon.ts        |  30 +
 .../datePickerV2/hook/useDatePicker.ts        |  59 ++
 .../component/datePickerV2/index.less         | 647 ++++++++++++++++++
 .../component/component/datePickerV2/index.ts |   5 +
 .../component/datePickerV2/index.vue          |  49 ++
 .../component/datePickerV2/interface.ts       |  84 +++
 packages/component/index.ts                   |   2 +
 packages/component/types/common.ts            |   3 +
 12 files changed, 1088 insertions(+)
 create mode 100644 packages/component/component/datePickerV2/component/YearPanel.vue
 create mode 100644 packages/component/component/datePickerV2/component/common/commonBlock.vue
 create mode 100644 packages/component/component/datePickerV2/component/interface.ts
 create mode 100644 packages/component/component/datePickerV2/day.ts
 create mode 100644 packages/component/component/datePickerV2/hook/useDateCommon.ts
 create mode 100644 packages/component/component/datePickerV2/hook/useDatePicker.ts
 create mode 100644 packages/component/component/datePickerV2/index.less
 create mode 100644 packages/component/component/datePickerV2/index.ts
 create mode 100644 packages/component/component/datePickerV2/index.vue
 create mode 100644 packages/component/component/datePickerV2/interface.ts
 create mode 100644 packages/component/types/common.ts

diff --git a/packages/component/component/datePickerV2/component/YearPanel.vue b/packages/component/component/datePickerV2/component/YearPanel.vue
new file mode 100644
index 00000000..5c3efa95
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/YearPanel.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/commonBlock.vue b/packages/component/component/datePickerV2/component/common/commonBlock.vue
new file mode 100644
index 00000000..8bc75121
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/commonBlock.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { CommonBlockProps } from "../interface";
+
+const props = withDefaults(defineProps<CommonBlockProps>(), {});
+
+const dateValue = "";
+const startPlaceholder = "";
+const endPlaceholder = "";
+
+const onChange = () => {};
+const handleClear = () => {};
+</script>
+
+<template>
+  <div :class="classes" :size="size">
+    <lay-dropdown
+      ref="dropdownRef"
+      :disabled="disabled"
+      :autoFitMinWidth="false"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle"
+    >
+      <lay-input
+        :name="name"
+        :readonly="readonly"
+        :placeholder="startPlaceholder"
+        :prefix-icon="prefixIcon"
+        :suffix-icon="suffixIcon"
+        :disabled="disabled"
+        v-model="dateValue"
+        v-if="!range"
+        @change="onChange"
+        @blur="$emit('blur')"
+        @focus="$emit('focus')"
+        :allow-clear="!disabled && allowClear"
+        :size="size"
+        @clear="handleClear"
+      >
+      </lay-input>
+      <div class="laydate-range-inputs" v-else>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          v-model="dateValue[0]"
+          :placeholder="startPlaceholder"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="start-input"
+          :size="size"
+        >
+        </lay-input>
+        <span class="range-separator">{{ rangeSeparator }}</span>
+        <lay-input
+          :readonly="readonly"
+          :name="name"
+          :allow-clear="!disabled && allowClear"
+          :placeholder="endPlaceholder"
+          v-model="dateValue[1]"
+          :disabled="disabled"
+          @change="onChange"
+          @blur="$emit('blur')"
+          @focus="$emit('focus')"
+          class="end-input"
+          :size="size"
+          @clear="handleClear"
+        >
+        </lay-input>
+      </div>
+      <template #content>
+        <slot></slot>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
new file mode 100644
index 00000000..fe6cd3cc
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -0,0 +1,17 @@
+import type { StyleValue } from "vue";
+import type { CommonSize, CommonClass } from "../../../types/common";
+
+export interface CommonBlockProps {
+  name: string;
+  classes: CommonClass;
+  size: CommonSize;
+  disabled: boolean;
+  allowClear: boolean;
+  range: boolean;
+  rangeSeparator: string;
+  readonly: boolean;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  contentClass?: CommonClass;
+  contentStyle?: StyleValue;
+}
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
new file mode 100644
index 00000000..9cadb13a
--- /dev/null
+++ b/packages/component/component/datePickerV2/day.ts
@@ -0,0 +1,111 @@
+/**
+ * 获取年份列表
+ * @param {Date | number} date 时间
+ * @param {Number} page 页数
+ * @param {Number} step 步进
+ */
+const getYears = (date?: Date | number, page = 15, step = 1) => {
+  const years = [];
+  const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
+  console.log(y, page, step);
+  const r = (page % 2 ? page - 1 : page) / 2;
+  for (let i = y - r; i <= y + r; i += step) {
+    years.push(i);
+  }
+  return years;
+};
+
+/**
+ * 获取当前日期
+ */
+const getDate = (val = "") => {
+  if (val) {
+    return new Date(val);
+  } else {
+    return new Date();
+  }
+};
+
+/**
+ * 获取当前年份
+ */
+const getYear = (val = "") => {
+  return getDate(val).getFullYear();
+};
+
+/**
+ * 获取当前月份
+ */
+const getMonth = (val = "") => {
+  return getDate(val).getMonth();
+};
+
+const getDay = (val = "") => {
+  if (val) {
+    return new Date(getDate(val).toDateString()).getTime();
+  } else {
+    return -1;
+  }
+};
+
+/**
+ * 获取月份天数
+ *
+ * @param year
+ * @param month
+ */
+const getDayLength = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+// 设置日期列表
+const setDateList = (year: number, month: number) => {
+  const curDays = getDayLength(year, month); // 当月天数
+  const prevDays = getDayLength(year, month - 1); // 上月天数
+  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
+  const list: any[] = [];
+  // 填充上月天数
+  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month - 1, i),
+      isRange: false,
+      isSelected: false,
+      type: "prev",
+    });
+  }
+  // 填充当月天数
+  for (let i = 1; i <= curDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month, i),
+      isRange: false,
+      isSelected: false,
+      type: "current",
+    });
+  }
+  // 填充下月天数
+  const nextDays = 7 - (list.length % 7);
+  if (nextDays !== 7) {
+    for (let i = 1; i <= nextDays; i++) {
+      list.push({
+        day: i,
+        value: +new Date(year, month + 1, i),
+        isRange: false,
+        isSelected: false,
+        type: "next",
+      });
+    }
+  }
+  return list;
+};
+
+export {
+  getDayLength,
+  getYears,
+  getDate,
+  getMonth,
+  getYear,
+  getDay,
+  setDateList,
+};
diff --git a/packages/component/component/datePickerV2/hook/useDateCommon.ts b/packages/component/component/datePickerV2/hook/useDateCommon.ts
new file mode 100644
index 00000000..a92d7bfa
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useDateCommon.ts
@@ -0,0 +1,30 @@
+import type { DatePickerProps } from "../interface";
+import type { CommonBlockProps } from "../component/interface";
+
+import { computed } from "vue";
+
+export const useDateCommon = (props: DatePickerProps) => {
+  const commonBlockProps = computed<CommonBlockProps>(() => {
+    return {
+      name: props.name!,
+      classes: [
+        "layui-date-picker",
+        { "layui-date-range-picker": props.range },
+      ],
+      size: "md",
+      disabled: props.disabled!,
+      allowClear: props.allowClear!,
+      range: props.range!,
+      rangeSeparator: props.rangeSeparator!,
+      readonly: props.readonly!,
+      prefixIcon: props.prefixIcon,
+      suffixIcon: props.suffixIcon,
+      contentClass: props.contentClass!,
+      contentStyle: props.contentStyle!,
+    };
+  });
+
+  return {
+    commonBlockProps,
+  };
+};
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
new file mode 100644
index 00000000..9cddde7f
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -0,0 +1,59 @@
+import type { DatePickerProps, DatePickerEmits, TypeMap } from "../interface";
+
+import { computed } from "vue";
+// import dayjs from "dayjs";
+import YearPanel from "../component/YearPanel.vue";
+
+export const useDatePicker = (
+  props: DatePickerProps,
+  emits: DatePickerEmits
+) => {
+  const _modelValue = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(val) {
+      return emits("update:modelValue", val as string | Array<string>);
+    },
+  });
+
+  const _format = computed(() => {
+    return props.format ?? typeMap.value.format;
+  });
+
+  const _inputFormat = computed(() => {
+    return props.inputFormat ?? typeMap.value.format;
+  });
+
+  // 类型映射
+  const TYPE_MAP: TypeMap = {
+    date: { component: YearPanel, format: "YYYY-MM-DD" },
+    datetime: { component: YearPanel, format: "YYYY-MM-DD HH:mm:ss" },
+    year: { component: YearPanel, format: "YYYY" },
+    month: { component: YearPanel, format: "MM" },
+    time: { component: YearPanel, format: "HH:mm:ss" },
+    yearmonth: { component: YearPanel, format: "YYYY-MM" },
+  };
+
+  const renderComponentProps = computed<DatePickerProps>(() => {
+    return {
+      ...props,
+      format: _format.value,
+      inputFormat: _inputFormat.value,
+    };
+  });
+
+  const typeMap = computed(() => {
+    return TYPE_MAP[props.type!];
+  });
+
+  const RenderComponent = computed(() => {
+    return typeMap.value.component;
+  });
+
+  return {
+    _modelValue,
+    RenderComponent,
+    renderComponentProps,
+  };
+};
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
new file mode 100644
index 00000000..09c43cdc
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.less
@@ -0,0 +1,647 @@
+@import "../dropdown/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-width: 260px;
+@md-width: 220px;
+@sm-width: 180px;
+@xs-width: 140px;
+@lg-range-width: 520px;
+@md-range-width: 440px;
+@sm-range-width: 360px;
+@xs-range-width: 280px;
+
+.set-size(@size,@width) {
+  & {
+    width: @width;
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
+.layui-date-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
+}
+.layui-date-range-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-range-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-range-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-range-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-range-width);
+  }
+}
+
+@font-face {
+  font-family: "laydate-icon";
+  src: url("./font/iconfont.eot");
+  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
+    url("./font/iconfont.svg#iconfont") format("svg"),
+    url("./font/iconfont.woff") format("woff"),
+    url("./font/iconfont.ttf") format("truetype");
+}
+
+.laydate-icon {
+  font-family: "laydate-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html #layuicss-laydate {
+  display: none;
+  position: absolute;
+  width: 1989px;
+}
+
+/* 初始化 */
+.layui-laydate * {
+  margin: 0;
+  padding: 0;
+}
+
+/* 主体结构 */
+.layui-laydate,
+.layui-laydate * {
+  box-sizing: border-box;
+}
+.layui-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;
+  }
+}
+.layui-laydate-main {
+  width: 272px;
+}
+.layui-laydate-header *,
+.layui-laydate-content td,
+.layui-laydate-list li {
+  transition-duration: 0.3s;
+  -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 {
+  display: none !important;
+}
+.laydate-ym-show .laydate-prev-y,
+.laydate-ym-show .laydate-next-y {
+  display: inline-block !important;
+}
+.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 展开时间列表时 */
+.laydate-time-show .layui-laydate-header .layui-icon,
+.laydate-time-show .laydate-set-ym span[lay-type="year"],
+.laydate-time-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 头部结构 */
+.layui-laydate-header {
+  position: relative;
+  line-height: 30px;
+  padding: 10px 70px 5px;
+}
+.layui-laydate-header * {
+  vertical-align: bottom;
+}
+.layui-laydate-header i {
+  position: absolute;
+  top: 10px;
+  padding: 0 5px;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.layui-laydate-header i.laydate-prev-y {
+  left: 15px;
+}
+.layui-laydate-header i.laydate-prev-m {
+  left: 45px;
+}
+.layui-laydate-header i.laydate-next-y {
+  right: 15px;
+}
+.layui-laydate-header i.laydate-next-m {
+  right: 45px;
+}
+.layui-laydate-year-panel-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px 5px;
+  line-height: 30px;
+  border-bottom: 1px solid #e2e2e2;
+
+  .laydate-set-ym {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.laydate-set-ym {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.laydate-set-ym span {
+  padding: 0 10px;
+  cursor: pointer;
+}
+.laydate-time-text {
+  cursor: default !important;
+}
+
+/* 主体结构 */
+.layui-laydate-content {
+  position: relative;
+  padding: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.layui-laydate-content table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.layui-laydate-content th,
+.layui-laydate-content td {
+  width: 36px;
+  height: 30px;
+  padding: 5px;
+  text-align: center !important;
+}
+.layui-laydate-content th {
+  font-weight: 400;
+}
+.layui-laydate-content td {
+  position: relative;
+  cursor: pointer;
+}
+.laydate-day-mark {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 30px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.laydate-day-mark::after {
+  position: absolute;
+  content: "";
+  right: 2px;
+  top: 2px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+/* 底部结构 */
+.layui-laydate-footer {
+  position: relative;
+  height: 46px;
+  line-height: 26px;
+  padding: 10px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span {
+  border-radius: 0px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span:first-child {
+  border-top-left-radius: var(--global-border-radius);
+  border-bottom-left-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer .laydate-footer-btns span:last-child {
+  border-top-right-radius: var(--global-border-radius);
+  border-bottom-right-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer span {
+  display: inline-block;
+  vertical-align: top;
+  height: 26px;
+  line-height: 24px;
+  padding: 0 10px;
+  border: 1px solid #c9c9c9;
+  border-radius: 2px;
+  background-color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+.layui-laydate-footer span:hover {
+  color: var(--global-primary-color);
+}
+.layui-laydate-footer span.layui-laydate-preview {
+  cursor: default;
+  border-color: transparent !important;
+}
+.layui-laydate-footer span.layui-laydate-preview:hover {
+  color: #666;
+}
+.layui-laydate-footer span:first-child.layui-laydate-preview {
+  padding-left: 0;
+}
+.laydate-footer-btns {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.laydate-footer-btns span {
+  margin: 0 0 0 -1px;
+}
+
+/* 年月列表 */
+.layui-laydate-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.layui-laydate-list > li {
+  position: relative;
+  display: inline-block;
+  width: 33.3%;
+  height: 36px;
+  line-height: 36px;
+  margin: 3px 0;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+.laydate-month-list > li {
+  width: 25%;
+  margin: 17px 0;
+}
+.laydate-time-list > li {
+  height: 100%;
+  margin: 0;
+  line-height: normal;
+  cursor: default;
+}
+.laydate-time-list p {
+  position: relative;
+  top: -4px;
+  line-height: 29px;
+}
+.laydate-time-list ol {
+  height: 181px;
+  overflow: hidden;
+}
+.laydate-time-list > li:hover ol {
+  overflow-y: auto;
+}
+
+.laydate-time-list ol li {
+  width: 130%;
+  padding-left: 4px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* 提示 */
+.layui-laydate-hint {
+  top: 115px;
+  left: 50%;
+  width: 250px;
+  margin-left: -125px;
+  line-height: 20px;
+  padding: 15px;
+  text-align: center;
+  font-size: 12px;
+  color: #ff5722;
+}
+
+/* 双日历 */
+.layui-laydate-range {
+  min-width: 546px;
+}
+.layui-laydate-range .layui-laydate-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
+  border-left: 1px solid #e2e2e2;
+}
+
+/* 默认简约主题 */
+.layui-laydate,
+.layui-laydate-hint {
+  background-color: #fff;
+  color: #666;
+}
+.layui-laydate-header {
+  border-bottom: 1px solid #e2e2e2;
+}
+.layui-laydate-header i:hover,
+.layui-laydate-header span:hover {
+  color: #5fb878;
+}
+.layui-laydate-content {
+  border-top: none 0;
+  border-bottom: none 0;
+}
+.layui-laydate-content th {
+  color: #333;
+}
+.layui-laydate-content td {
+  color: #666;
+}
+.layui-laydate-content td.laydate-selected {
+  background-color: #b5fff8;
+}
+.laydate-selected:hover {
+  background-color: #00f7de !important;
+}
+.layui-laydate-content td:hover,
+.layui-laydate-list li:hover {
+  background-color: #eee;
+  color: #333;
+}
+.laydate-time-list li ol {
+  margin: 0;
+  padding: 0;
+  border: 1px solid #e2e2e2;
+}
+.laydate-time-list li:first-child ol {
+  border-left-width: 1px;
+}
+.laydate-time-list > li:hover {
+  background: none;
+}
+.layui-laydate-content .laydate-day-prev,
+.layui-laydate-content .laydate-day-next {
+  color: #d2d2d2;
+}
+.laydate-selected.laydate-day-prev,
+.laydate-selected.laydate-day-next {
+  background-color: #f8f8f8 !important;
+}
+.layui-laydate-footer {
+  border-top: 1px solid #e2e2e2;
+}
+.layui-laydate-hint {
+  color: #ff5722;
+}
+.laydate-day-mark::after {
+  background-color: #5fb878;
+}
+.layui-laydate-content td.layui-this .laydate-day-mark::after {
+  display: none;
+}
+.layui-laydate-footer span[lay-type="date"] {
+  color: #5fb878;
+}
+.layui-laydate .layui-this {
+  background-color: var(--global-primary-color) !important;
+  color: #fff !important;
+}
+
+.layui-laydate .laydate-disabled,
+.layui-laydate .laydate-disabled:hover {
+  background: none !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+/* 墨绿/自定义背景色主题 */
+.laydate-theme-molv {
+  border: none;
+}
+.laydate-theme-molv.layui-laydate-range {
+  width: 548px;
+}
+.laydate-theme-molv .layui-laydate-main {
+  width: 274px;
+}
+.laydate-theme-molv .layui-laydate-header {
+  border: none;
+  background-color: #009688;
+}
+.laydate-theme-molv .layui-laydate-header i,
+.laydate-theme-molv .layui-laydate-header span {
+  color: #f6f6f6;
+}
+.laydate-theme-molv .layui-laydate-header i:hover,
+.laydate-theme-molv .layui-laydate-header span:hover {
+  color: #fff;
+}
+.laydate-theme-molv .layui-laydate-content {
+  border: 1px solid #e2e2e2;
+  border-top: none;
+  border-bottom: none;
+}
+.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
+  border-left: none;
+}
+.laydate-theme-molv .layui-laydate-footer {
+  border: 1px solid #e2e2e2;
+}
+
+/* 格子主题 */
+.laydate-theme-grid .layui-laydate-content td,
+.laydate-theme-grid .layui-laydate-content thead,
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  border: 1px solid #e2e2e2;
+}
+.laydate-theme-grid .laydate-selected,
+.laydate-theme-grid .laydate-selected:hover {
+  background-color: #f2f2f2 !important;
+  color: #009688 !important;
+}
+.laydate-theme-grid .laydate-selected.laydate-day-prev,
+.laydate-theme-grid .laydate-selected.laydate-day-next {
+  color: #d2d2d2 !important;
+}
+.laydate-theme-grid .laydate-year-list,
+.laydate-theme-grid .laydate-month-list {
+  margin: 1px 0 0 1px;
+}
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  margin: 0 -1px -1px 0;
+}
+.laydate-theme-grid .laydate-year-list > li {
+  height: 43px;
+  line-height: 43px;
+}
+.laydate-theme-grid .laydate-month-list > li {
+  height: 71px;
+  line-height: 71px;
+}
+.laydate-range-hover {
+  background-color: var(--global-neutral-color-2) !important;
+}
+.layui-laydate-content .layui-disabled:hover {
+  background-color: transparent !important;
+}
+
+.laydate-range-inputs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border-width: 1px;
+  box-sizing: border-box;
+  width: 100%;
+  border-style: solid;
+  overflow: hidden;
+  display: inline-flex;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  &:hover {
+    border-color: #d2d2d2;
+  }
+  .range-separator {
+    margin: 0 5px;
+    color: var(--global-neutral-color-8);
+    background-color: transparent;
+  }
+  .layui-input-wrapper {
+    border: none;
+    box-sizing: border-box;
+    input {
+      text-align: center;
+      padding: 0;
+    }
+  }
+  .layui-input {
+    border: none;
+  }
+}
+.layui-laydate-range {
+  .laydate-set-ym {
+    overflow: visible;
+    white-space: nowrap;
+  }
+  .laydate-set-ym .layui-dropdown {
+    width: auto !important;
+  }
+
+  .time-panel {
+    .layui-laydate-main {
+      width: 272px;
+      display: unset !important;
+    }
+    .layui-laydate-preview {
+      display: none;
+    }
+  }
+  .layui-laydate-content {
+    .laydate-year-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .layui-laydate-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.layui-laydate-range-datetime {
+  .layui-laydate-main {
+    width: 340px;
+  }
+}
+.layui-laydate-current {
+  background-color: var(--global-neutral-color-3);
+}
+
+.laydate-time-list > li:hover ol::-webkit-scrollbar {
+  width: 0px;
+}
+.layui-laydate-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #eeeeee;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb:hover {
+  background-color: #dddddd;
+}
diff --git a/packages/component/component/datePickerV2/index.ts b/packages/component/component/datePickerV2/index.ts
new file mode 100644
index 00000000..f747fde1
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "../../utils";
+import Component from "./index.vue";
+
+const component = withInstall(Component);
+export default component;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
new file mode 100644
index 00000000..3ee038cb
--- /dev/null
+++ b/packages/component/component/datePickerV2/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type {
+  DatePickerProps as _DatePickerProps,
+  DatePickerType,
+  DatePickerEmits,
+} from "./interface";
+
+import { useDateCommon } from "./hook/useDateCommon";
+import { useDatePicker } from "./hook/useDatePicker";
+
+import CommonBlock from "./component/common/commonBlock.vue";
+
+export type DatePickerProps = _DatePickerProps;
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  modelValue: "",
+  type: "year",
+  disabled: false,
+  readonly: false,
+  allowClear: false,
+  simple: false,
+  range: false,
+  rangeSeparator: "至",
+  prefixIcon: "layui-icon-date",
+  suffixIcon: "",
+  timestamp: false,
+  format: "",
+  yearPage: 15,
+  yearStep: 1,
+});
+
+const emits = defineEmits<DatePickerEmits>();
+
+const { commonBlockProps } = useDateCommon(props);
+const { _modelValue, RenderComponent, renderComponentProps } = useDatePicker(
+  props,
+  emits
+);
+
+defineOptions({
+  name: "LayDatePickerV2",
+});
+</script>
+
+<template>
+  <CommonBlock v-bind="commonBlockProps">
+    <RenderComponent v-bind="renderComponentProps" v-model="_modelValue" />
+  </CommonBlock>
+</template>
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
new file mode 100644
index 00000000..cda39b64
--- /dev/null
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -0,0 +1,84 @@
+import type { Ref, StyleValue, Component, DefineComponent } from "vue";
+import type { CommonSize, CommonClass } from "../../types/common";
+
+export type DatePickerType =
+  | "date"
+  | "datetime"
+  | "year"
+  | "month"
+  | "time"
+  | "yearmonth";
+
+export type TypeMap = {
+  [k in DatePickerType]: {
+    component: Component;
+    format: string;
+  };
+};
+
+export type DatePickerModelValueSingleType = number | string | Date;
+
+export interface DatePickerProps {
+  name?: string;
+  modelValue?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
+  type?: DatePickerType;
+  disabled?: boolean;
+  readonly?: boolean;
+  placeholder?: string | string[];
+  allowClear?: boolean;
+  simple?: boolean;
+  max?: string;
+  min?: string;
+  range?: boolean;
+  rangeSeparator?: string;
+  size?: CommonSize;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  timestamp?: boolean;
+  format?: string;
+  inputFormat?: string;
+  defaultTime?: string | string[];
+  contentStyle?: StyleValue;
+  contentClass?: CommonClass;
+  yearPage?: number;
+  yearStep?: number;
+}
+
+export type DatePickerEmits = {
+  (e: "update:modelValue", value: string | Array<string>): void;
+  (e: "change", value: string | Array<string>): void;
+  (e: "blur", event: Event): void;
+  (e: "focus", event: Event): void;
+  (e: "clear"): void;
+};
+
+export type provideType = {
+  currentYear: Ref;
+  currentMonth: Ref;
+  currentDay: Ref;
+  dateValue: Ref;
+  hms: Ref;
+  type: string;
+  showPanel: Ref;
+  clear: Function;
+  now: Function;
+  ok: Function;
+  range: boolean;
+  rangeValue: {
+    first: string;
+    last: string;
+    hover: string;
+    firstTime: { hh: number; mm: number; ss: number };
+    lastTime: { hh: number; mm: number; ss: number };
+  };
+  rangeSeparator: string;
+  simple: boolean;
+  timestamp: boolean;
+  max: Ref<string>;
+  min: Ref<string>;
+  defaultTime: string | string[];
+  yearPage: Ref<number>;
+  yearStep: Ref<number>;
+};
diff --git a/packages/component/index.ts b/packages/component/index.ts
index 100b7e8e..77562e51 100644
--- a/packages/component/index.ts
+++ b/packages/component/index.ts
@@ -84,6 +84,7 @@ import LayException from "./component/exception/index";
 import LayResult from "./component/result/index";
 import LayFullscreen from "./component/fullscreen/index";
 import LayDatePicker from "./component/datePicker/index";
+import LayDatePickerV2 from "./component/datePickerV2/index";
 import LayTransition from "./component/transition/index";
 import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
@@ -187,6 +188,7 @@ const components: Record<string, Plugin> = {
   LayFullscreen,
   LayConfigProvider,
   LayDatePicker,
+  LayDatePickerV2,
   LayTransition,
   LayUpload,
   LayRipple,
diff --git a/packages/component/types/common.ts b/packages/component/types/common.ts
new file mode 100644
index 00000000..bf9c011c
--- /dev/null
+++ b/packages/component/types/common.ts
@@ -0,0 +1,3 @@
+export type CommonSize = "lg" | "md" | "sm" | "xs";
+
+export type CommonClass = string | Array<string | object> | object;
-- 
Gitee


From f43fbd289c22ed5c29df8d67be5603701c2d825b Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 11 Sep 2024 18:55:43 +0800
Subject: [PATCH 02/45] chore: yaer month

---
 .../datePickerV2/component/Picker.vue         |   92 ++
 .../datePickerV2/component/YearPanel.vue      |    5 -
 .../{commonBlock.vue => InputBlock.vue}       |   70 +-
 .../datePickerV2/component/common/Month.vue   |  151 ++
 .../component/common/PanelFoot.vue            |   45 +
 .../datePickerV2/component/common/Year.vue    |  139 ++
 .../datePickerV2/component/interface.ts       |   30 +-
 .../datePickerV2/hook/useDateCommon.ts        |    5 +-
 .../datePickerV2/hook/useDatePicker.ts        |   32 +-
 .../component/datePickerV2/index.less         | 1298 +++++++++--------
 .../component/datePickerV2/index.vue          |   33 +-
 .../component/datePickerV2/interface.ts       |    3 +-
 12 files changed, 1215 insertions(+), 688 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/Picker.vue
 delete mode 100644 packages/component/component/datePickerV2/component/YearPanel.vue
 rename packages/component/component/datePickerV2/component/common/{commonBlock.vue => InputBlock.vue} (49%)
 create mode 100644 packages/component/component/datePickerV2/component/common/Month.vue
 create mode 100644 packages/component/component/datePickerV2/component/common/PanelFoot.vue
 create mode 100644 packages/component/component/datePickerV2/component/common/Year.vue

diff --git a/packages/component/component/datePickerV2/component/Picker.vue b/packages/component/component/datePickerV2/component/Picker.vue
new file mode 100644
index 00000000..4c2a21d0
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/Picker.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { DatePickerProps } from "../interface";
+import { computed, ref, watch } from "vue";
+import dayjs from "dayjs";
+
+import Year from "./common/Year.vue";
+import Month from "./common/Month.vue";
+
+const props = withDefaults(defineProps<DatePickerProps>(), {});
+
+const emits = defineEmits(["pick"]);
+
+const currentData = ref();
+const currentType = ref();
+
+watch(
+  () => props.modelValue,
+  () => {
+    currentData.value = props.modelValue;
+  },
+  { immediate: true }
+);
+
+const dateType = computed(() => {
+  return props.type!;
+});
+
+watch(
+  () => dateType.value,
+  (val) => {
+    if (val === "yearmonth") {
+      currentType.value = "month";
+      return;
+    }
+    currentType.value = val;
+  },
+  { immediate: true }
+);
+
+const handlePickYear = (year: number) => {
+  const data = currentData.value.year(year);
+
+  if (dateType.value === "date") {
+    // Todo
+  } else if (dateType.value === "yearmonth") {
+    currentData.value = data;
+    currentType.value = "month";
+  } else {
+    currentData.value = data;
+    emits("pick", formatValue());
+  }
+};
+
+const handlePickMonth = (month: number) => {
+  const data = currentData.value.month(month);
+
+  if (dateType.value === "date") {
+    // Todo
+  } else if (dateType.value === "yearmonth") {
+    currentData.value = data;
+    emits("pick", formatValue());
+  } else {
+    emits("pick", formatValue());
+  }
+};
+
+const handleMonthChangeYear = (year: number) => {
+  currentData.value = currentData.value.year(year);
+};
+
+const formatValue = () => {
+  return dayjs(currentData.value).format(props.format);
+};
+</script>
+
+<template>
+  <div></div>
+  <Year
+    v-if="currentType === 'year'"
+    :modelValue="currentData"
+    :dateType="dateType"
+    @pick="handlePickYear"
+  ></Year>
+  <Month
+    v-if="currentType === 'month'"
+    :model-value="currentData"
+    :dateType="dateType"
+    @pick="handlePickMonth"
+    @year-change="handleMonthChangeYear"
+    @type-change="currentType = 'year'"
+  ></Month>
+</template>
diff --git a/packages/component/component/datePickerV2/component/YearPanel.vue b/packages/component/component/datePickerV2/component/YearPanel.vue
deleted file mode 100644
index 5c3efa95..00000000
--- a/packages/component/component/datePickerV2/component/YearPanel.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
diff --git a/packages/component/component/datePickerV2/component/common/commonBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
similarity index 49%
rename from packages/component/component/datePickerV2/component/common/commonBlock.vue
rename to packages/component/component/datePickerV2/component/common/InputBlock.vue
index 8bc75121..3bc97cf4 100644
--- a/packages/component/component/datePickerV2/component/common/commonBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -1,14 +1,70 @@
 <script setup lang="ts">
-import type { CommonBlockProps } from "../interface";
+import dayjs, { type Dayjs } from "dayjs";
+import { type CommonBlockProps, COMMON_BLOCK_CONTEXT } from "../interface";
+import type {
+  DatePickerModelValueSingleType,
+  DatePickerProps,
+} from "../../interface";
+import LayDropdown from "../../../dropdown/index.vue";
 
-const props = withDefaults(defineProps<CommonBlockProps>(), {});
+import { computed, ref, provide, watchEffect } from "vue";
+import { isArray } from "../../../../utils";
+
+const props = withDefaults(defineProps<DatePickerProps>(), {});
+const emits = defineEmits(["update:modelValue"]);
+
+const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
+
+const initDate = computed<Dayjs | Array<Dayjs>>(() => {
+  if (isArray(props.modelValue)) {
+    return props.modelValue.map((date: DatePickerModelValueSingleType) => {
+      return dayjs(date || new Date());
+    });
+  } else {
+    return dayjs(props.modelValue || new Date());
+  }
+});
 
-const dateValue = "";
 const startPlaceholder = "";
 const endPlaceholder = "";
 
 const onChange = () => {};
 const handleClear = () => {};
+
+const classes = computed(() => {
+  return ["layui-date-picker", { "layui-date-range-picker": props.range }];
+});
+
+// function setNowDate() {
+//   initDate.value.forEach((date) => {
+//     date = dayjs();
+//   });
+// }
+const dateValue = computed(() => {
+  return props.range
+    ? (props.modelValue as Array<DatePickerModelValueSingleType>).map(
+        (data) => {
+          return dayjs(data).format(props.format);
+        }
+      )
+    : props.modelValue
+    ? dayjs(props.modelValue as DatePickerModelValueSingleType).format(
+        props.format
+      )
+    : "";
+});
+
+function onPick(item) {
+  console.log(item, "inputBlock");
+
+  emits("update:modelValue", item);
+  dropdownRef.value?.hide();
+}
+
+provide(COMMON_BLOCK_CONTEXT, {
+  // initDate,
+  // setNowDate,
+});
 </script>
 
 <template>
@@ -27,7 +83,7 @@ const handleClear = () => {};
         :prefix-icon="prefixIcon"
         :suffix-icon="suffixIcon"
         :disabled="disabled"
-        v-model="dateValue"
+        :modelValue="dateValue"
         v-if="!range"
         @change="onChange"
         @blur="$emit('blur')"
@@ -41,7 +97,7 @@ const handleClear = () => {};
         <lay-input
           :readonly="readonly"
           :name="name"
-          v-model="dateValue[0]"
+          :modelValue="dateValue[0]"
           :placeholder="startPlaceholder"
           :disabled="disabled"
           @change="onChange"
@@ -57,7 +113,7 @@ const handleClear = () => {};
           :name="name"
           :allow-clear="!disabled && allowClear"
           :placeholder="endPlaceholder"
-          v-model="dateValue[1]"
+          :modelValue="dateValue[1]"
           :disabled="disabled"
           @change="onChange"
           @blur="$emit('blur')"
@@ -69,7 +125,7 @@ const handleClear = () => {};
         </lay-input>
       </div>
       <template #content>
-        <slot></slot>
+        <slot :initDate="initDate" :onPick="onPick"></slot>
       </template>
     </lay-dropdown>
   </div>
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
new file mode 100644
index 00000000..b8e17dba
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="layui-laydate">
+    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+      <div class="layui-laydate-header">
+        <div class="laydate-set-ym" v-if="dateType === 'month'">
+          <span>{{
+            typeof Month !== "string"
+              ? MONTH_NAME[Month]
+              : t("datePicker.selectMonth")
+          }}</span>
+        </div>
+        <template v-else>
+          <lay-icon
+            type="layui-icon-prev"
+            @click="handleYearChange(-1)"
+          ></lay-icon>
+          <div class="laydate-set-ym">
+            <span @click="emits('type-change')">{{ modelValue.year() }}</span>
+          </div>
+          <lay-icon
+            type="layui-icon-next"
+            @click="handleYearChange(1)"
+          ></lay-icon>
+        </template>
+      </div>
+    </div>
+    <div class="layui-laydate-content" style="height: 220px">
+      <ul class="layui-laydate-list laydate-month-list">
+        <li
+          v-for="item of MONTH_NAME"
+          :key="item"
+          :class="{
+            'layui-this': MONTH_NAME.indexOf(item) === Month,
+            'layui-laydate-current':
+              MONTH_NAME.indexOf(item) === dayjs().month(),
+            'layui-disabled': cellDisabled(item),
+          }"
+          @click="handleMonthClick(item)"
+        >
+          {{ item.slice(0, 3) }}
+        </li>
+      </ul>
+    </div>
+    <!-- <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span
+        v-if="datePicker.type === 'yearmonth'"
+        @click="datePicker.showPanel.value = 'year'"
+        class="laydate-btns-time"
+        >{{ t("datePicker.selectYear") }}</span
+      >
+    </PanelFoot> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import dayjs, { type Dayjs } from "dayjs";
+import { useI18n } from "../../../../language";
+import { computed, inject, ref, watch } from "vue";
+import { BaseDateTypeProps } from "../interface";
+import { provideType, DatePickerProps } from "../../interface";
+import PanelFoot from "./PanelFoot.vue";
+import LayIcon from "../../../icon";
+
+defineOptions({
+  name: "MonthPanel",
+});
+
+const props = withDefaults(defineProps<BaseDateTypeProps>(), {
+  // max: dayjs().year() + 100,
+});
+
+const emits = defineEmits(["pick", "year-change", "type-change"]);
+
+const Month = ref();
+
+const { t } = useI18n();
+
+const MONTH_NAME = computed(() => [
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
+]);
+
+// 判断单元格是否可以点击(禁用)
+const cellDisabled = computed(() => {
+  return (item: string) => {
+    const month = MONTH_NAME.value.indexOf(item);
+    if (props.min && month < dayjs(props.min).month() + 1) {
+      return true;
+    }
+    if (props.max && month > dayjs(props.max).month() + 1) {
+      return true;
+    }
+    return false;
+  };
+});
+
+// 点击月份
+const handleMonthClick = (item: string) => {
+  if (cellDisabled.value(item)) {
+    return;
+  }
+
+  const month = MONTH_NAME.value.indexOf(item);
+
+  Month.value = month;
+  emits("pick", month);
+};
+
+watch(
+  () => props.modelValue,
+  () => {
+    Month.value = props.modelValue.month();
+  },
+  {
+    immediate: true,
+  }
+);
+
+const handleYearChange = (val: number) => {
+  emits("year-change", props.modelValue.year() + val);
+};
+
+//关闭回调
+// const footOnOk = () => {
+//   emits(
+//     "update:modelValue",
+//     Month.value || Month.value === 0 ? Month.value : -1
+//   );
+//   if (datePicker.range) {
+//     //关闭菜单
+//     emits("ok");
+//     return;
+//   } else {
+//     if (datePicker.type === "datetime" || datePicker.type === "date") {
+//       datePicker.showPanel.value = datePicker.type;
+//     } else {
+//       datePicker.ok();
+//     }
+//   }
+// };
+</script>
diff --git a/packages/component/component/datePickerV2/component/common/PanelFoot.vue b/packages/component/component/datePickerV2/component/common/PanelFoot.vue
new file mode 100644
index 00000000..3bcf1826
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/PanelFoot.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="layui-laydate-footer">
+    <slot></slot>
+    <div class="laydate-footer-btns">
+      <span
+        lay-type="now"
+        v-if="props.showNow"
+        class="laydate-btns-now"
+        @click="handelNow"
+        >{{ t("datePicker.now") }}</span
+      >
+      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">{{
+        t("datePicker.confirm")
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "../../../../language";
+
+export interface PanelFoot {
+  showNow?: boolean;
+}
+
+defineOptions({
+  name: "PanelFoot",
+});
+
+const props = withDefaults(defineProps<PanelFoot>(), {
+  showNow: true,
+});
+
+const { t } = useI18n();
+
+const emits = defineEmits(["ok", "clear", "now"]);
+
+const handelOk = () => {
+  emits("ok");
+};
+
+const handelNow = () => {
+  emits("now");
+};
+</script>
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
new file mode 100644
index 00000000..8860564e
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="layui-laydate">
+    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+      <div class="layui-laydate-year-panel-header">
+        <div class="laydate-set-ym">
+          <lay-icon
+            type="layui-icon-left"
+            @click="_currentDate -= yearPage ?? 15"
+          ></lay-icon>
+          <span class="laydate-time-text">
+            {{ yearRange.join(" - ") }}
+          </span>
+          <lay-icon
+            type="layui-icon-right"
+            @click="_currentDate += yearPage ?? 15"
+          ></lay-icon>
+        </div>
+      </div>
+    </div>
+    <div
+      class="layui-laydate-content"
+      style="height: 220px; overflow-y: auto"
+      ref="ScrollRef"
+    >
+      <ul class="layui-laydate-list laydate-year-list">
+        <li
+          v-for="item of yearList"
+          :key="item"
+          :class="{
+            'layui-this': _currentYear === item,
+            'layui-laydate-current': item === dayjs().year(),
+            'layui-disabled': cellDisabled(item),
+          }"
+          @click="handleYearClick(item)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <!--<PanelFoot @ok="footOnOk" @now="footOnNow">
+       <span
+        v-if="datePicker.type === 'yearmonth'"
+        @click="datePicker.showPanel.value = 'month'"
+        class="laydate-btns-time"
+        >{{ t("datePicker.selectMonth") }}</span
+      >
+      <template v-else-if="parseInt(Year.toString()) > 0">{{ Year }}</template> 
+      {{ _currentYear }}
+    </PanelFoot>-->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type BaseDateTypeProps } from "../interface";
+import type {
+  provideType,
+  DatePickerProps,
+  DatePickerModelValueSingleType,
+} from "../../interface";
+
+import dayjs, { Dayjs } from "dayjs";
+import { useI18n } from "../../../../language";
+import { computed, inject, ref, watch } from "vue";
+import { getYears } from "../../day";
+import PanelFoot from "./PanelFoot.vue";
+import LayIcon from "../../../icon";
+
+export interface TimePanelProps {
+  modelValue: number | string;
+}
+
+defineOptions({
+  name: "YearPanel",
+});
+
+const props = withDefaults(defineProps<BaseDateTypeProps>(), {
+  // modelValue: "",
+  // type: "date",
+  // disabled: false,
+  // readonly: false,
+  // allowClear: false,
+  // simple: false,
+  // range: false,
+  // rangeSeparator: "至",
+  // prefixIcon: "layui-icon-date",
+  // suffixIcon: "",
+  // timestamp: false,
+  // format: "",
+  // yearPage: 15,
+  // yearStep: 1,
+});
+
+const emits = defineEmits(["pick"]);
+
+const _currentYear = ref();
+const _currentDate = ref();
+
+const yearList = computed<number[]>(() =>
+  getYears(_currentDate.value, props.yearPage, props.yearStep)
+);
+const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
+
+watch(
+  () => props.modelValue,
+  () => {
+    _currentDate.value = _currentYear.value = (
+      props.modelValue as Dayjs
+    ).year();
+  },
+  {
+    immediate: true,
+  }
+);
+
+const { t } = useI18n();
+
+// 判断单元格是否可以点击(禁用)
+const cellDisabled = computed(() => {
+  return (item: number) => {
+    if (props.min && item < dayjs(props.min).year()) {
+      return true;
+    }
+    if (props.max && item > dayjs(props.max).year()) {
+      return true;
+    }
+    return false;
+  };
+});
+
+// 点击年份
+const handleYearClick = (item: number) => {
+  if (cellDisabled.value(item)) {
+    return true;
+  }
+
+  _currentYear.value = item;
+  emits("pick", item);
+};
+</script>
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index fe6cd3cc..5639a798 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -1,12 +1,22 @@
-import type { StyleValue } from "vue";
+import type { ComputedRef, StyleValue } from "vue";
+import type { Dayjs } from "dayjs";
+import type {
+  DatePickerModelValueSingleType,
+  DatePickerProps,
+  DatePickerType,
+} from "../interface";
 import type { CommonSize, CommonClass } from "../../../types/common";
 
 export interface CommonBlockProps {
-  name: string;
+  name?: string;
+  modelValue:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
   classes: CommonClass;
   size: CommonSize;
   disabled: boolean;
   allowClear: boolean;
+  format?: string;
   range: boolean;
   rangeSeparator: string;
   readonly: boolean;
@@ -14,4 +24,20 @@ export interface CommonBlockProps {
   suffixIcon?: string;
   contentClass?: CommonClass;
   contentStyle?: StyleValue;
+  [key: string]: any;
 }
+
+export type BaseDateTypeProps = DatePickerProps & {
+  modelValue: Dayjs;
+  dateType: DatePickerType;
+};
+
+import type { InjectionKey } from "vue";
+
+export type CommonBlockContext = {
+  // initDate: ComputedRef<Array<Dayjs>>;
+  // setNowDate: () => void;
+};
+
+export const COMMON_BLOCK_CONTEXT: InjectionKey<CommonBlockContext> =
+  Symbol("CommonBlock");
diff --git a/packages/component/component/datePickerV2/hook/useDateCommon.ts b/packages/component/component/datePickerV2/hook/useDateCommon.ts
index a92d7bfa..9c705559 100644
--- a/packages/component/component/datePickerV2/hook/useDateCommon.ts
+++ b/packages/component/component/datePickerV2/hook/useDateCommon.ts
@@ -3,10 +3,12 @@ import type { CommonBlockProps } from "../component/interface";
 
 import { computed } from "vue";
 
-export const useDateCommon = (props: DatePickerProps) => {
+export const useDateCommon = (props: DatePickerProps, attrs: any) => {
   const commonBlockProps = computed<CommonBlockProps>(() => {
+    // console.log(props.modelValue, "props.modelValue2");
     return {
       name: props.name!,
+      modelValue: props.modelValue,
       classes: [
         "layui-date-picker",
         { "layui-date-range-picker": props.range },
@@ -21,6 +23,7 @@ export const useDateCommon = (props: DatePickerProps) => {
       suffixIcon: props.suffixIcon,
       contentClass: props.contentClass!,
       contentStyle: props.contentStyle!,
+      ...attrs,
     };
   });
 
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 9cddde7f..7febad8a 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -2,20 +2,22 @@ import type { DatePickerProps, DatePickerEmits, TypeMap } from "../interface";
 
 import { computed } from "vue";
 // import dayjs from "dayjs";
-import YearPanel from "../component/YearPanel.vue";
+import YearPanel from "../component/common/Year.vue";
+import MonthPanel from "../component/common/Month.vue";
+import Picker from "../component/Picker.vue";
 
 export const useDatePicker = (
-  props: DatePickerProps,
-  emits: DatePickerEmits
+  props: DatePickerProps
+  // emits: DatePickerEmits
 ) => {
-  const _modelValue = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(val) {
-      return emits("update:modelValue", val as string | Array<string>);
-    },
-  });
+  // const _modelValue = computed({
+  //   get() {
+  //     return props.modelValue;
+  //   },
+  //   set(val) {
+  //     return emits("update:modelValue", val as string | Array<string>);
+  //   },
+  // });
 
   const _format = computed(() => {
     return props.format ?? typeMap.value.format;
@@ -29,10 +31,10 @@ export const useDatePicker = (
   const TYPE_MAP: TypeMap = {
     date: { component: YearPanel, format: "YYYY-MM-DD" },
     datetime: { component: YearPanel, format: "YYYY-MM-DD HH:mm:ss" },
-    year: { component: YearPanel, format: "YYYY" },
-    month: { component: YearPanel, format: "MM" },
+    year: { component: Picker, format: "YYYY" },
+    month: { component: Picker, format: "MM" },
+    yearmonth: { component: Picker, format: "YYYY-MM" },
     time: { component: YearPanel, format: "HH:mm:ss" },
-    yearmonth: { component: YearPanel, format: "YYYY-MM" },
   };
 
   const renderComponentProps = computed<DatePickerProps>(() => {
@@ -52,7 +54,7 @@ export const useDatePicker = (
   });
 
   return {
-    _modelValue,
+    // _modelValue,
     RenderComponent,
     renderComponentProps,
   };
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index 09c43cdc..dd6016ba 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -1,647 +1,651 @@
-@import "../dropdown/index.less";
-@import "../input/index.less";
-
-@lg: 44px;
-@md: 38px;
-@sm: 32px;
-@xs: 26px;
-@lg-width: 260px;
-@md-width: 220px;
-@sm-width: 180px;
-@xs-width: 140px;
-@lg-range-width: 520px;
-@md-range-width: 440px;
-@sm-range-width: 360px;
-@xs-range-width: 280px;
-
-.set-size(@size,@width) {
-  & {
-    width: @width;
-    height: @size;
-    .layui-input {
-      height: @size;
-      line-height: @size;
-    }
-  }
-}
-
-.layui-date-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-width);
-  }
-}
-.layui-date-range-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-range-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-range-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-range-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-range-width);
-  }
-}
-
-@font-face {
-  font-family: "laydate-icon";
-  src: url("./font/iconfont.eot");
-  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
-    url("./font/iconfont.svg#iconfont") format("svg"),
-    url("./font/iconfont.woff") format("woff"),
-    url("./font/iconfont.ttf") format("truetype");
-}
-
-.laydate-icon {
-  font-family: "laydate-icon" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html #layuicss-laydate {
-  display: none;
-  position: absolute;
-  width: 1989px;
-}
-
-/* 初始化 */
-.layui-laydate * {
-  margin: 0;
-  padding: 0;
-}
-
-/* 主体结构 */
-.layui-laydate,
-.layui-laydate * {
-  box-sizing: border-box;
-}
-.layui-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;
-  }
-}
-.layui-laydate-main {
-  width: 272px;
-}
-.layui-laydate-header *,
-.layui-laydate-content td,
-.layui-laydate-list li {
-  transition-duration: 0.3s;
-  -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 {
-  display: none !important;
-}
-.laydate-ym-show .laydate-prev-y,
-.laydate-ym-show .laydate-next-y {
-  display: inline-block !important;
-}
-.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 展开时间列表时 */
-.laydate-time-show .layui-laydate-header .layui-icon,
-.laydate-time-show .laydate-set-ym span[lay-type="year"],
-.laydate-time-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 头部结构 */
-.layui-laydate-header {
-  position: relative;
-  line-height: 30px;
-  padding: 10px 70px 5px;
-}
-.layui-laydate-header * {
-  vertical-align: bottom;
-}
-.layui-laydate-header i {
-  position: absolute;
-  top: 10px;
-  padding: 0 5px;
-  color: #999;
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-.layui-laydate-header i.laydate-prev-y {
-  left: 15px;
-}
-.layui-laydate-header i.laydate-prev-m {
-  left: 45px;
-}
-.layui-laydate-header i.laydate-next-y {
-  right: 15px;
-}
-.layui-laydate-header i.laydate-next-m {
-  right: 45px;
-}
-.layui-laydate-year-panel-header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 14px 5px;
-  line-height: 30px;
-  border-bottom: 1px solid #e2e2e2;
-
-  .laydate-set-ym {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    i {
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-}
-.laydate-set-ym {
-  width: 100%;
-  text-align: center;
-  box-sizing: border-box;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.laydate-set-ym span {
-  padding: 0 10px;
-  cursor: pointer;
-}
-.laydate-time-text {
-  cursor: default !important;
-}
-
-/* 主体结构 */
-.layui-laydate-content {
-  position: relative;
-  padding: 10px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-.layui-laydate-content table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-.layui-laydate-content th,
-.layui-laydate-content td {
-  width: 36px;
-  height: 30px;
-  padding: 5px;
-  text-align: center !important;
-}
-.layui-laydate-content th {
-  font-weight: 400;
-}
-.layui-laydate-content td {
-  position: relative;
-  cursor: pointer;
-}
-.laydate-day-mark {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  line-height: 30px;
-  font-size: 12px;
-  overflow: hidden;
-}
-.laydate-day-mark::after {
-  position: absolute;
-  content: "";
-  right: 2px;
-  top: 2px;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-}
-
-/* 底部结构 */
-.layui-laydate-footer {
-  position: relative;
-  height: 46px;
-  line-height: 26px;
-  padding: 10px;
-}
-
-.layui-laydate-footer .laydate-footer-btns span {
-  border-radius: 0px;
-}
-
-.layui-laydate-footer .laydate-footer-btns span:first-child {
-  border-top-left-radius: var(--global-border-radius);
-  border-bottom-left-radius: var(--global-border-radius);
-}
-
-.layui-laydate-footer .laydate-footer-btns span:last-child {
-  border-top-right-radius: var(--global-border-radius);
-  border-bottom-right-radius: var(--global-border-radius);
-}
-
-.layui-laydate-footer span {
-  display: inline-block;
-  vertical-align: top;
-  height: 26px;
-  line-height: 24px;
-  padding: 0 10px;
-  border: 1px solid #c9c9c9;
-  border-radius: 2px;
-  background-color: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.3s;
-}
-.layui-laydate-footer span:hover {
-  color: var(--global-primary-color);
-}
-.layui-laydate-footer span.layui-laydate-preview {
-  cursor: default;
-  border-color: transparent !important;
-}
-.layui-laydate-footer span.layui-laydate-preview:hover {
-  color: #666;
-}
-.layui-laydate-footer span:first-child.layui-laydate-preview {
-  padding-left: 0;
-}
-.laydate-footer-btns {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-.laydate-footer-btns span {
-  margin: 0 0 0 -1px;
-}
-
-/* 年月列表 */
-.layui-laydate-list {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-.layui-laydate-list > li {
-  position: relative;
-  display: inline-block;
-  width: 33.3%;
-  height: 36px;
-  line-height: 36px;
-  margin: 3px 0;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-.laydate-month-list > li {
-  width: 25%;
-  margin: 17px 0;
-}
-.laydate-time-list > li {
-  height: 100%;
-  margin: 0;
-  line-height: normal;
-  cursor: default;
-}
-.laydate-time-list p {
-  position: relative;
-  top: -4px;
-  line-height: 29px;
-}
-.laydate-time-list ol {
-  height: 181px;
-  overflow: hidden;
-}
-.laydate-time-list > li:hover ol {
-  overflow-y: auto;
-}
-
-.laydate-time-list ol li {
-  width: 130%;
-  padding-left: 4px;
-  height: 30px;
-  line-height: 30px;
-  text-align: left;
-  cursor: pointer;
-}
-
-/* 提示 */
-.layui-laydate-hint {
-  top: 115px;
-  left: 50%;
-  width: 250px;
-  margin-left: -125px;
-  line-height: 20px;
-  padding: 15px;
-  text-align: center;
-  font-size: 12px;
-  color: #ff5722;
-}
-
-/* 双日历 */
-.layui-laydate-range {
-  min-width: 546px;
-}
-.layui-laydate-range .layui-laydate-main {
-  display: inline-block;
-  vertical-align: middle;
-}
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
-  border-left: 1px solid #e2e2e2;
-}
-
-/* 默认简约主题 */
-.layui-laydate,
-.layui-laydate-hint {
-  background-color: #fff;
-  color: #666;
-}
-.layui-laydate-header {
-  border-bottom: 1px solid #e2e2e2;
-}
-.layui-laydate-header i:hover,
-.layui-laydate-header span:hover {
-  color: #5fb878;
-}
-.layui-laydate-content {
-  border-top: none 0;
-  border-bottom: none 0;
-}
-.layui-laydate-content th {
-  color: #333;
-}
-.layui-laydate-content td {
-  color: #666;
-}
-.layui-laydate-content td.laydate-selected {
-  background-color: #b5fff8;
-}
-.laydate-selected:hover {
-  background-color: #00f7de !important;
-}
-.layui-laydate-content td:hover,
-.layui-laydate-list li:hover {
-  background-color: #eee;
-  color: #333;
-}
-.laydate-time-list li ol {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #e2e2e2;
-}
-.laydate-time-list li:first-child ol {
-  border-left-width: 1px;
-}
-.laydate-time-list > li:hover {
-  background: none;
-}
-.layui-laydate-content .laydate-day-prev,
-.layui-laydate-content .laydate-day-next {
-  color: #d2d2d2;
-}
-.laydate-selected.laydate-day-prev,
-.laydate-selected.laydate-day-next {
-  background-color: #f8f8f8 !important;
-}
-.layui-laydate-footer {
-  border-top: 1px solid #e2e2e2;
-}
-.layui-laydate-hint {
-  color: #ff5722;
-}
-.laydate-day-mark::after {
-  background-color: #5fb878;
-}
-.layui-laydate-content td.layui-this .laydate-day-mark::after {
-  display: none;
-}
-.layui-laydate-footer span[lay-type="date"] {
-  color: #5fb878;
-}
-.layui-laydate .layui-this {
-  background-color: var(--global-primary-color) !important;
-  color: #fff !important;
-}
-
-.layui-laydate .laydate-disabled,
-.layui-laydate .laydate-disabled:hover {
-  background: none !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-/* 墨绿/自定义背景色主题 */
-.laydate-theme-molv {
-  border: none;
-}
-.laydate-theme-molv.layui-laydate-range {
-  width: 548px;
-}
-.laydate-theme-molv .layui-laydate-main {
-  width: 274px;
-}
-.laydate-theme-molv .layui-laydate-header {
-  border: none;
-  background-color: #009688;
-}
-.laydate-theme-molv .layui-laydate-header i,
-.laydate-theme-molv .layui-laydate-header span {
-  color: #f6f6f6;
-}
-.laydate-theme-molv .layui-laydate-header i:hover,
-.laydate-theme-molv .layui-laydate-header span:hover {
-  color: #fff;
-}
-.laydate-theme-molv .layui-laydate-content {
-  border: 1px solid #e2e2e2;
-  border-top: none;
-  border-bottom: none;
-}
-.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
-  border-left: none;
-}
-.laydate-theme-molv .layui-laydate-footer {
-  border: 1px solid #e2e2e2;
-}
-
-/* 格子主题 */
-.laydate-theme-grid .layui-laydate-content td,
-.laydate-theme-grid .layui-laydate-content thead,
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  border: 1px solid #e2e2e2;
-}
-.laydate-theme-grid .laydate-selected,
-.laydate-theme-grid .laydate-selected:hover {
-  background-color: #f2f2f2 !important;
-  color: #009688 !important;
-}
-.laydate-theme-grid .laydate-selected.laydate-day-prev,
-.laydate-theme-grid .laydate-selected.laydate-day-next {
-  color: #d2d2d2 !important;
-}
-.laydate-theme-grid .laydate-year-list,
-.laydate-theme-grid .laydate-month-list {
-  margin: 1px 0 0 1px;
-}
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  margin: 0 -1px -1px 0;
-}
-.laydate-theme-grid .laydate-year-list > li {
-  height: 43px;
-  line-height: 43px;
-}
-.laydate-theme-grid .laydate-month-list > li {
-  height: 71px;
-  line-height: 71px;
-}
-.laydate-range-hover {
-  background-color: var(--global-neutral-color-2) !important;
-}
-.layui-laydate-content .layui-disabled:hover {
-  background-color: transparent !important;
-}
-
-.laydate-range-inputs {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  border-width: 1px;
-  box-sizing: border-box;
-  width: 100%;
-  border-style: solid;
-  overflow: hidden;
-  display: inline-flex;
-  border-color: var(--input-border-color);
-  border-radius: var(--input-border-radius);
-  &:hover {
-    border-color: #d2d2d2;
-  }
-  .range-separator {
-    margin: 0 5px;
-    color: var(--global-neutral-color-8);
-    background-color: transparent;
-  }
-  .layui-input-wrapper {
-    border: none;
-    box-sizing: border-box;
-    input {
-      text-align: center;
-      padding: 0;
-    }
-  }
-  .layui-input {
-    border: none;
-  }
-}
-.layui-laydate-range {
-  .laydate-set-ym {
-    overflow: visible;
-    white-space: nowrap;
-  }
-  .laydate-set-ym .layui-dropdown {
-    width: auto !important;
-  }
-
-  .time-panel {
-    .layui-laydate-main {
-      width: 272px;
-      display: unset !important;
-    }
-    .layui-laydate-preview {
-      display: none;
-    }
-  }
-  .layui-laydate-content {
-    .laydate-year-list {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-  .layui-laydate-list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-.layui-laydate-range-datetime {
-  .layui-laydate-main {
-    width: 340px;
-  }
-}
-.layui-laydate-current {
-  background-color: var(--global-neutral-color-3);
-}
-
-.laydate-time-list > li:hover ol::-webkit-scrollbar {
-  width: 0px;
-}
-.layui-laydate-content::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #eeeeee;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb:hover {
-  background-color: #dddddd;
-}
+@import "../dropdown/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-width: 260px;
+@md-width: 220px;
+@sm-width: 180px;
+@xs-width: 140px;
+@lg-range-width: 520px;
+@md-range-width: 440px;
+@sm-range-width: 360px;
+@xs-range-width: 280px;
+
+.set-size(@size,@width) {
+  & {
+    width: @width;
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
+.layui-date-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
+}
+.layui-date-range-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-range-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-range-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-range-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-range-width);
+  }
+}
+
+@font-face {
+  font-family: "laydate-icon";
+  src: url("./font/iconfont.eot");
+  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
+    url("./font/iconfont.svg#iconfont") format("svg"),
+    url("./font/iconfont.woff") format("woff"),
+    url("./font/iconfont.ttf") format("truetype");
+}
+
+.laydate-icon {
+  font-family: "laydate-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html #layuicss-laydate {
+  display: none;
+  position: absolute;
+  width: 1989px;
+}
+
+/* 初始化 */
+.layui-laydate * {
+  margin: 0;
+  padding: 0;
+}
+
+/* 主体结构 */
+.layui-laydate,
+.layui-laydate * {
+  box-sizing: border-box;
+}
+.layui-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;
+  }
+}
+.layui-laydate-main {
+  width: 272px;
+}
+.layui-laydate-header *,
+.layui-laydate-content td,
+.layui-laydate-list li {
+  transition-duration: 0.3s;
+  -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 {
+  display: none !important;
+}
+.laydate-ym-show .laydate-prev-y,
+.laydate-ym-show .laydate-next-y {
+  display: inline-block !important;
+}
+.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 展开时间列表时 */
+.laydate-time-show .layui-laydate-header .layui-icon,
+.laydate-time-show .laydate-set-ym span[lay-type="year"],
+.laydate-time-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 头部结构 */
+.layui-laydate-header {
+  position: relative;
+  line-height: 30px;
+  padding: 10px 70px 5px;
+}
+.layui-laydate-header * {
+  vertical-align: bottom;
+}
+.layui-laydate-header i {
+  position: absolute;
+  top: 10px;
+  padding: 0 5px;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.layui-laydate-header i.laydate-prev-y,
+.layui-laydate-header .layui-icon-prev{
+  left: 15px;
+}
+.layui-laydate-header i.laydate-prev-m,
+.layui-laydate-header .layui-icon-left {
+  left: 45px;
+}
+.layui-laydate-header i.laydate-next-y,
+.layui-laydate-header .layui-icon-next {
+  right: 15px;
+}
+.layui-laydate-header i.laydate-next-m,
+.layui-laydate-header .layui-icon-right {
+  right: 45px;
+}
+.layui-laydate-year-panel-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px 5px;
+  line-height: 30px;
+  border-bottom: 1px solid #e2e2e2;
+
+  .laydate-set-ym {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.laydate-set-ym {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.laydate-set-ym span {
+  padding: 0 10px;
+  cursor: pointer;
+}
+.laydate-time-text {
+  cursor: default !important;
+}
+
+/* 主体结构 */
+.layui-laydate-content {
+  position: relative;
+  padding: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.layui-laydate-content table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.layui-laydate-content th,
+.layui-laydate-content td {
+  width: 36px;
+  height: 30px;
+  padding: 5px;
+  text-align: center !important;
+}
+.layui-laydate-content th {
+  font-weight: 400;
+}
+.layui-laydate-content td {
+  position: relative;
+  cursor: pointer;
+}
+.laydate-day-mark {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 30px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.laydate-day-mark::after {
+  position: absolute;
+  content: "";
+  right: 2px;
+  top: 2px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+/* 底部结构 */
+.layui-laydate-footer {
+  position: relative;
+  height: 46px;
+  line-height: 26px;
+  padding: 10px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span {
+  border-radius: 0px;
+}
+
+.layui-laydate-footer .laydate-footer-btns span:first-child {
+  border-top-left-radius: var(--global-border-radius);
+  border-bottom-left-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer .laydate-footer-btns span:last-child {
+  border-top-right-radius: var(--global-border-radius);
+  border-bottom-right-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer span {
+  display: inline-block;
+  vertical-align: top;
+  height: 26px;
+  line-height: 24px;
+  padding: 0 10px;
+  border: 1px solid #c9c9c9;
+  border-radius: 2px;
+  background-color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+.layui-laydate-footer span:hover {
+  color: var(--global-primary-color);
+}
+.layui-laydate-footer span.layui-laydate-preview {
+  cursor: default;
+  border-color: transparent !important;
+}
+.layui-laydate-footer span.layui-laydate-preview:hover {
+  color: #666;
+}
+.layui-laydate-footer span:first-child.layui-laydate-preview {
+  padding-left: 0;
+}
+.laydate-footer-btns {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.laydate-footer-btns span {
+  margin: 0 0 0 -1px;
+}
+
+/* 年月列表 */
+.layui-laydate-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.layui-laydate-list > li {
+  position: relative;
+  display: inline-block;
+  width: 33.3%;
+  height: 36px;
+  line-height: 36px;
+  margin: 3px 0;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+.laydate-month-list > li {
+  width: 25%;
+  margin: 17px 0;
+}
+.laydate-time-list > li {
+  height: 100%;
+  margin: 0;
+  line-height: normal;
+  cursor: default;
+}
+.laydate-time-list p {
+  position: relative;
+  top: -4px;
+  line-height: 29px;
+}
+.laydate-time-list ol {
+  height: 181px;
+  overflow: hidden;
+}
+.laydate-time-list > li:hover ol {
+  overflow-y: auto;
+}
+
+.laydate-time-list ol li {
+  width: 130%;
+  padding-left: 4px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* 提示 */
+.layui-laydate-hint {
+  top: 115px;
+  left: 50%;
+  width: 250px;
+  margin-left: -125px;
+  line-height: 20px;
+  padding: 15px;
+  text-align: center;
+  font-size: 12px;
+  color: #ff5722;
+}
+
+/* 双日历 */
+.layui-laydate-range {
+  min-width: 546px;
+}
+.layui-laydate-range .layui-laydate-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
+  border-left: 1px solid #e2e2e2;
+}
+
+/* 默认简约主题 */
+.layui-laydate,
+.layui-laydate-hint {
+  background-color: #fff;
+  color: #666;
+}
+.layui-laydate-header {
+  border-bottom: 1px solid #e2e2e2;
+}
+.layui-laydate-header i:hover,
+.layui-laydate-header span:hover {
+  color: #5fb878;
+}
+.layui-laydate-content {
+  border-top: none 0;
+  border-bottom: none 0;
+}
+.layui-laydate-content th {
+  color: #333;
+}
+.layui-laydate-content td {
+  color: #666;
+}
+.layui-laydate-content td.laydate-selected {
+  background-color: #b5fff8;
+}
+.laydate-selected:hover {
+  background-color: #00f7de !important;
+}
+.layui-laydate-content td:hover,
+.layui-laydate-list li:hover {
+  background-color: #eee;
+  color: #333;
+}
+.laydate-time-list li ol {
+  margin: 0;
+  padding: 0;
+  border: 1px solid #e2e2e2;
+}
+.laydate-time-list li:first-child ol {
+  border-left-width: 1px;
+}
+.laydate-time-list > li:hover {
+  background: none;
+}
+.layui-laydate-content .laydate-day-prev,
+.layui-laydate-content .laydate-day-next {
+  color: #d2d2d2;
+}
+.laydate-selected.laydate-day-prev,
+.laydate-selected.laydate-day-next {
+  background-color: #f8f8f8 !important;
+}
+.layui-laydate-footer {
+  border-top: 1px solid #e2e2e2;
+}
+.layui-laydate-hint {
+  color: #ff5722;
+}
+.laydate-day-mark::after {
+  background-color: #5fb878;
+}
+.layui-laydate-content td.layui-this .laydate-day-mark::after {
+  display: none;
+}
+.layui-laydate-footer span[lay-type="date"] {
+  color: #5fb878;
+}
+.layui-laydate .layui-this {
+  background-color: var(--global-primary-color) !important;
+  color: #fff !important;
+}
+
+.layui-laydate .laydate-disabled,
+.layui-laydate .laydate-disabled:hover {
+  background: none !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+/* 墨绿/自定义背景色主题 */
+.laydate-theme-molv {
+  border: none;
+}
+.laydate-theme-molv.layui-laydate-range {
+  width: 548px;
+}
+.laydate-theme-molv .layui-laydate-main {
+  width: 274px;
+}
+.laydate-theme-molv .layui-laydate-header {
+  border: none;
+  background-color: #009688;
+}
+.laydate-theme-molv .layui-laydate-header i,
+.laydate-theme-molv .layui-laydate-header span {
+  color: #f6f6f6;
+}
+.laydate-theme-molv .layui-laydate-header i:hover,
+.laydate-theme-molv .layui-laydate-header span:hover {
+  color: #fff;
+}
+.laydate-theme-molv .layui-laydate-content {
+  border: 1px solid #e2e2e2;
+  border-top: none;
+  border-bottom: none;
+}
+.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
+  border-left: none;
+}
+.laydate-theme-molv .layui-laydate-footer {
+  border: 1px solid #e2e2e2;
+}
+
+/* 格子主题 */
+.laydate-theme-grid .layui-laydate-content td,
+.laydate-theme-grid .layui-laydate-content thead,
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  border: 1px solid #e2e2e2;
+}
+.laydate-theme-grid .laydate-selected,
+.laydate-theme-grid .laydate-selected:hover {
+  background-color: #f2f2f2 !important;
+  color: #009688 !important;
+}
+.laydate-theme-grid .laydate-selected.laydate-day-prev,
+.laydate-theme-grid .laydate-selected.laydate-day-next {
+  color: #d2d2d2 !important;
+}
+.laydate-theme-grid .laydate-year-list,
+.laydate-theme-grid .laydate-month-list {
+  margin: 1px 0 0 1px;
+}
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  margin: 0 -1px -1px 0;
+}
+.laydate-theme-grid .laydate-year-list > li {
+  height: 43px;
+  line-height: 43px;
+}
+.laydate-theme-grid .laydate-month-list > li {
+  height: 71px;
+  line-height: 71px;
+}
+.laydate-range-hover {
+  background-color: var(--global-neutral-color-2) !important;
+}
+.layui-laydate-content .layui-disabled:hover {
+  background-color: transparent !important;
+}
+
+.laydate-range-inputs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border-width: 1px;
+  box-sizing: border-box;
+  width: 100%;
+  border-style: solid;
+  overflow: hidden;
+  display: inline-flex;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  &:hover {
+    border-color: #d2d2d2;
+  }
+  .range-separator {
+    margin: 0 5px;
+    color: var(--global-neutral-color-8);
+    background-color: transparent;
+  }
+  .layui-input-wrapper {
+    border: none;
+    box-sizing: border-box;
+    input {
+      text-align: center;
+      padding: 0;
+    }
+  }
+  .layui-input {
+    border: none;
+  }
+}
+.layui-laydate-range {
+  .laydate-set-ym {
+    overflow: visible;
+    white-space: nowrap;
+  }
+  .laydate-set-ym .layui-dropdown {
+    width: auto !important;
+  }
+
+  .time-panel {
+    .layui-laydate-main {
+      width: 272px;
+      display: unset !important;
+    }
+    .layui-laydate-preview {
+      display: none;
+    }
+  }
+  .layui-laydate-content {
+    .laydate-year-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .layui-laydate-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.layui-laydate-range-datetime {
+  .layui-laydate-main {
+    width: 340px;
+  }
+}
+.layui-laydate-current {
+  background-color: var(--global-neutral-color-3);
+}
+
+.laydate-time-list > li:hover ol::-webkit-scrollbar {
+  width: 0px;
+}
+.layui-laydate-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #eeeeee;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb:hover {
+  background-color: #dddddd;
+}
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index 3ee038cb..6d6fe0a2 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import "./index.less";
+import dayjs from "dayjs";
 import type {
   DatePickerProps as _DatePickerProps,
   DatePickerType,
@@ -8,7 +10,8 @@ import type {
 import { useDateCommon } from "./hook/useDateCommon";
 import { useDatePicker } from "./hook/useDatePicker";
 
-import CommonBlock from "./component/common/commonBlock.vue";
+import InputBlock from "./component/common/InputBlock.vue";
+import { computed, useAttrs } from "vue";
 
 export type DatePickerProps = _DatePickerProps;
 
@@ -24,26 +27,36 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   prefixIcon: "layui-icon-date",
   suffixIcon: "",
   timestamp: false,
-  format: "",
   yearPage: 15,
   yearStep: 1,
 });
 
-const emits = defineEmits<DatePickerEmits>();
+// const emits = defineEmits<DatePickerEmits>();
+const attrs = useAttrs();
+// const { commonBlockProps } = useDateCommon(props, attrs);
 
-const { commonBlockProps } = useDateCommon(props);
-const { _modelValue, RenderComponent, renderComponentProps } = useDatePicker(
-  props,
-  emits
+const { RenderComponent, renderComponentProps } = useDatePicker(
+  props
+  // emits
 );
 
+const format = computed<string>(() => {
+  return props.inputFormat ?? renderComponentProps.value.inputFormat!;
+});
+
 defineOptions({
   name: "LayDatePickerV2",
 });
 </script>
 
 <template>
-  <CommonBlock v-bind="commonBlockProps">
-    <RenderComponent v-bind="renderComponentProps" v-model="_modelValue" />
-  </CommonBlock>
+  <InputBlock v-bind="{ ...props, ...$attrs }" :format="format">
+    <template #default="{ initDate, onPick }">
+      <RenderComponent
+        v-bind="renderComponentProps"
+        :modelValue="initDate"
+        @pick="onPick"
+      />
+    </template>
+  </InputBlock>
 </template>
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index cda39b64..b53df83b 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -1,3 +1,4 @@
+import type { Dayjs, ConfigType } from "dayjs";
 import type { Ref, StyleValue, Component, DefineComponent } from "vue";
 import type { CommonSize, CommonClass } from "../../types/common";
 
@@ -16,7 +17,7 @@ export type TypeMap = {
   };
 };
 
-export type DatePickerModelValueSingleType = number | string | Date;
+export type DatePickerModelValueSingleType = ConfigType;
 
 export interface DatePickerProps {
   name?: string;
-- 
Gitee


From ed14de11aef4d96e9e3787b2cbf568cb95e173c2 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 12 Sep 2024 09:18:45 +0800
Subject: [PATCH 03/45] chore: update

---
 .../datePickerV2/component/Picker.vue         | 30 +++++++++++++++----
 .../common/{PanelFoot.vue => Footer.vue}      |  4 +--
 .../datePickerV2/component/common/Month.vue   |  2 +-
 .../datePickerV2/component/common/Year.vue    | 24 ++++++---------
 4 files changed, 36 insertions(+), 24 deletions(-)
 rename packages/component/component/datePickerV2/component/common/{PanelFoot.vue => Footer.vue} (91%)

diff --git a/packages/component/component/datePickerV2/component/Picker.vue b/packages/component/component/datePickerV2/component/Picker.vue
index 4c2a21d0..9f077d02 100644
--- a/packages/component/component/datePickerV2/component/Picker.vue
+++ b/packages/component/component/datePickerV2/component/Picker.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import type { DatePickerProps } from "../interface";
 import { computed, ref, watch } from "vue";
-import dayjs from "dayjs";
+import dayjs, { type Dayjs } from "dayjs";
 
 import Year from "./common/Year.vue";
 import Month from "./common/Month.vue";
+import Footer from "./common/Footer.vue";
 
-const props = withDefaults(defineProps<DatePickerProps>(), {});
+interface PickerProps extends DatePickerProps {
+  modelValue: Dayjs;
+}
+
+const props = defineProps<PickerProps>();
 
 const emits = defineEmits(["pick"]);
 
-const currentData = ref();
+const currentData = ref<Dayjs>(dayjs());
 const currentType = ref();
 
 watch(
@@ -47,7 +52,7 @@ const handlePickYear = (year: number) => {
     currentType.value = "month";
   } else {
     currentData.value = data;
-    emits("pick", formatValue());
+    handleConfirm();
   }
 };
 
@@ -60,7 +65,7 @@ const handlePickMonth = (month: number) => {
     currentData.value = data;
     emits("pick", formatValue());
   } else {
-    emits("pick", formatValue());
+    handleConfirm();
   }
 };
 
@@ -68,6 +73,16 @@ const handleMonthChangeYear = (year: number) => {
   currentData.value = currentData.value.year(year);
 };
 
+const handleConfirm = (isConfirm = false) => {
+  if (props.simple || isConfirm) {
+    emits("pick", formatValue());
+  }
+};
+
+const handleNow = () => {
+  currentData.value = dayjs();
+};
+
 const formatValue = () => {
   return dayjs(currentData.value).format(props.format);
 };
@@ -83,10 +98,13 @@ const formatValue = () => {
   ></Year>
   <Month
     v-if="currentType === 'month'"
-    :model-value="currentData"
+    :modelValue="currentData"
     :dateType="dateType"
     @pick="handlePickMonth"
     @year-change="handleMonthChangeYear"
     @type-change="currentType = 'year'"
   ></Month>
+  <Footer @confirm="handleConfirm(true)" @now="handleNow">
+    {{ formatValue() }}
+  </Footer>
 </template>
diff --git a/packages/component/component/datePickerV2/component/common/PanelFoot.vue b/packages/component/component/datePickerV2/component/common/Footer.vue
similarity index 91%
rename from packages/component/component/datePickerV2/component/common/PanelFoot.vue
rename to packages/component/component/datePickerV2/component/common/Footer.vue
index 3bcf1826..fe159f5b 100644
--- a/packages/component/component/datePickerV2/component/common/PanelFoot.vue
+++ b/packages/component/component/datePickerV2/component/common/Footer.vue
@@ -33,10 +33,10 @@ const props = withDefaults(defineProps<PanelFoot>(), {
 
 const { t } = useI18n();
 
-const emits = defineEmits(["ok", "clear", "now"]);
+const emits = defineEmits(["confirm", "clear", "now"]);
 
 const handelOk = () => {
-  emits("ok");
+  emits("confirm");
 };
 
 const handelNow = () => {
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index b8e17dba..6c5664fe 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -58,7 +58,7 @@ import { useI18n } from "../../../../language";
 import { computed, inject, ref, watch } from "vue";
 import { BaseDateTypeProps } from "../interface";
 import { provideType, DatePickerProps } from "../../interface";
-import PanelFoot from "./PanelFoot.vue";
+import PanelFoot from "./Footer.vue";
 import LayIcon from "../../../icon";
 
 defineOptions({
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 8860564e..28b71707 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -5,14 +5,14 @@
         <div class="laydate-set-ym">
           <lay-icon
             type="layui-icon-left"
-            @click="_currentDate -= yearPage ?? 15"
+            @click="currentDate -= yearPage ?? 15"
           ></lay-icon>
           <span class="laydate-time-text">
             {{ yearRange.join(" - ") }}
           </span>
           <lay-icon
             type="layui-icon-right"
-            @click="_currentDate += yearPage ?? 15"
+            @click="currentDate += yearPage ?? 15"
           ></lay-icon>
         </div>
       </div>
@@ -27,7 +27,7 @@
           v-for="item of yearList"
           :key="item"
           :class="{
-            'layui-this': _currentYear === item,
+            'layui-this': currentYear === item,
             'layui-laydate-current': item === dayjs().year(),
             'layui-disabled': cellDisabled(item),
           }"
@@ -62,13 +62,9 @@ import dayjs, { Dayjs } from "dayjs";
 import { useI18n } from "../../../../language";
 import { computed, inject, ref, watch } from "vue";
 import { getYears } from "../../day";
-import PanelFoot from "./PanelFoot.vue";
+import PanelFoot from "./Footer.vue";
 import LayIcon from "../../../icon";
 
-export interface TimePanelProps {
-  modelValue: number | string;
-}
-
 defineOptions({
   name: "YearPanel",
 });
@@ -92,20 +88,18 @@ const props = withDefaults(defineProps<BaseDateTypeProps>(), {
 
 const emits = defineEmits(["pick"]);
 
-const _currentYear = ref();
-const _currentDate = ref();
+const currentYear = ref();
+const currentDate = ref();
 
 const yearList = computed<number[]>(() =>
-  getYears(_currentDate.value, props.yearPage, props.yearStep)
+  getYears(currentDate.value, props.yearPage, props.yearStep)
 );
 const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
 
 watch(
   () => props.modelValue,
   () => {
-    _currentDate.value = _currentYear.value = (
-      props.modelValue as Dayjs
-    ).year();
+    currentDate.value = currentYear.value = props.modelValue.year();
   },
   {
     immediate: true,
@@ -133,7 +127,7 @@ const handleYearClick = (item: number) => {
     return true;
   }
 
-  _currentYear.value = item;
+  currentYear.value = item;
   emits("pick", item);
 };
 </script>
-- 
Gitee


From f578cc2a00739bb0a3009ccaf30ad4a34c211425 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 13 Sep 2024 19:57:39 +0800
Subject: [PATCH 04/45] feat: Complete year month yearmonth date type

---
 .../datePickerV2/__tests__/yearPanel.test.tsx |  65 ++++++
 .../component/{Picker.vue => DatePicker.vue}  |  56 +++--
 .../datePickerV2/component/common/Date.vue    | 125 +++++++++++
 .../component/common/DateContent.vue          | 197 ++++++++++++++++++
 .../datePickerV2/component/common/Footer.vue  |  12 +-
 .../component/common/InputBlock.vue           |  33 +--
 .../datePickerV2/component/common/Month.vue   |  55 ++---
 .../datePickerV2/component/common/Year.vue    |  60 ++----
 .../datePickerV2/component/interface.ts       |  44 +---
 .../component/component/datePickerV2/day.ts   |   2 +-
 .../datePickerV2/hook/useDateCommon.ts        |  33 ---
 .../datePickerV2/hook/useDatePicker.ts        |  64 +++---
 .../component/datePickerV2/index.vue          |  34 ++-
 .../component/datePickerV2/interface.ts       |  57 +++--
 packages/component/types/util.ts              |   4 +
 15 files changed, 569 insertions(+), 272 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
 rename packages/component/component/datePickerV2/component/{Picker.vue => DatePicker.vue} (61%)
 create mode 100644 packages/component/component/datePickerV2/component/common/Date.vue
 create mode 100644 packages/component/component/datePickerV2/component/common/DateContent.vue
 delete mode 100644 packages/component/component/datePickerV2/hook/useDateCommon.ts
 create mode 100644 packages/component/types/util.ts

diff --git a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
new file mode 100644
index 00000000..887fae56
--- /dev/null
+++ b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
@@ -0,0 +1,65 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test } from "vitest";
+import { nextTick } from "vue";
+import { sleep } from "../../../test-utils";
+
+import LayDatePicker from "../index.vue";
+import LayDropdown from "../../dropdown/index.vue";
+import Year from "../component/common/Year.vue";
+import { getYears } from "../day";
+
+describe("YearPanel", () => {
+  afterEach(() => {
+    document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
+  });
+
+  test("render", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    const dropdownInstance = datePickerInstance.findComponent(LayDropdown);
+    await nextTick();
+
+    await datePickerInstance.find(".layui-input").trigger("click");
+    await nextTick();
+    await sleep();
+
+    const yearPanelInstance = datePickerInstance.findComponent(Year);
+
+    expect(dropdownInstance.exists()).toBe(true);
+    expect((dropdownInstance.vm as any).open).toBe(true);
+    expect(yearPanelInstance.findAll("li").length).toBe(getYears().length);
+  });
+
+  test("year 外部修改modelValue 内部状态更新", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    await datePickerInstance.find(".layui-input").trigger("click");
+    await nextTick();
+    await sleep();
+
+    const yearPanelInstance = datePickerInstance.findComponent(Year);
+    expect(yearPanelInstance.exists()).toBe(true);
+    expect((yearPanelInstance.vm as any).currentYear).toBe(2024);
+
+    wrapper.setProps({
+      modelValue: "2023/10/01 10:00:00",
+    });
+    await nextTick();
+    await sleep();
+
+    expect((yearPanelInstance.vm as any).currentYear).toBe(2023);
+  });
+});
diff --git a/packages/component/component/datePickerV2/component/Picker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
similarity index 61%
rename from packages/component/component/datePickerV2/component/Picker.vue
rename to packages/component/component/datePickerV2/component/DatePicker.vue
index 9f077d02..632de784 100644
--- a/packages/component/component/datePickerV2/component/Picker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import type { DatePickerProps } from "../interface";
+import type { UniquePickerProps } from "./interface";
 import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 
+import Date from "./common/Date.vue";
 import Year from "./common/Year.vue";
 import Month from "./common/Month.vue";
 import Footer from "./common/Footer.vue";
 
-interface PickerProps extends DatePickerProps {
-  modelValue: Dayjs;
-}
-
-const props = defineProps<PickerProps>();
+const props = withDefaults(defineProps<UniquePickerProps>(), {});
 
 const emits = defineEmits(["pick"]);
 
+const inputDate = ref<Dayjs>(dayjs());
 const currentData = ref<Dayjs>(dayjs());
 const currentType = ref();
 
@@ -22,6 +20,7 @@ watch(
   () => props.modelValue,
   () => {
     currentData.value = props.modelValue;
+    inputDate.value = props.modelValue;
   },
   { immediate: true }
 );
@@ -42,11 +41,17 @@ watch(
   { immediate: true }
 );
 
+const handlePickDate = (value: Dayjs) => {
+  currentData.value = value;
+  handleConfirm();
+};
+
 const handlePickYear = (year: number) => {
   const data = currentData.value.year(year);
 
   if (dateType.value === "date") {
-    // Todo
+    currentData.value = data;
+    currentType.value = "date";
   } else if (dateType.value === "yearmonth") {
     currentData.value = data;
     currentType.value = "month";
@@ -60,11 +65,10 @@ const handlePickMonth = (month: number) => {
   const data = currentData.value.month(month);
 
   if (dateType.value === "date") {
-    // Todo
-  } else if (dateType.value === "yearmonth") {
     currentData.value = data;
-    emits("pick", formatValue());
+    currentType.value = "date";
   } else {
+    currentData.value = data;
     handleConfirm();
   }
 };
@@ -73,6 +77,10 @@ const handleMonthChangeYear = (year: number) => {
   currentData.value = currentData.value.year(year);
 };
 
+const handleDateChangeYearMonth = (data: Dayjs) => {
+  currentData.value = data;
+};
+
 const handleConfirm = (isConfirm = false) => {
   if (props.simple || isConfirm) {
     emits("pick", formatValue());
@@ -81,15 +89,31 @@ const handleConfirm = (isConfirm = false) => {
 
 const handleNow = () => {
   currentData.value = dayjs();
+  inputDate.value = dayjs();
 };
 
 const formatValue = () => {
-  return dayjs(currentData.value).format(props.format);
+  // format 正确传 format后的格式，否则传Date对象
+  return props.format
+    ? dayjs(currentData.value).format(props.format)
+    : dayjs(currentData.value).toDate();
+};
+
+const footerValue = () => {
+  return dayjs(currentData.value).format(props.defaultFormat);
 };
 </script>
 
 <template>
-  <div></div>
+  <Date
+    v-if="currentType === 'date'"
+    :modelValue="currentData"
+    :inputDate="inputDate"
+    :dateType="dateType"
+    @pick="handlePickDate"
+    @year-month-change="handleDateChangeYearMonth"
+    @type-change="(type) => (currentType = type)"
+  ></Date>
   <Year
     v-if="currentType === 'year'"
     :modelValue="currentData"
@@ -104,7 +128,11 @@ const formatValue = () => {
     @year-change="handleMonthChangeYear"
     @type-change="currentType = 'year'"
   ></Month>
-  <Footer @confirm="handleConfirm(true)" @now="handleNow">
-    {{ formatValue() }}
+  <Footer
+    :showConfirm="!simple"
+    @confirm="handleConfirm(true)"
+    @now="handleNow"
+  >
+    {{ footerValue() }}
   </Footer>
 </template>
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
new file mode 100644
index 00000000..36e47097
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="layui-laydate">
+    <div class="layui-laydate-main laydate-main-list-0">
+      <div class="layui-laydate-header">
+        <LayIcon
+          type="layui-icon-prev"
+          @click="handleYearMonthChange('subtract', 'year')"
+        ></LayIcon>
+        <LayIcon
+          type="layui-icon-left"
+          @click="handleYearMonthChange('subtract', 'month')"
+        ></LayIcon>
+        <div class="laydate-set-ym">
+          <span @click="handleTypeChange('year')"
+            >{{ Year }} {{ t("datePicker.year") }}</span
+          >
+          <span @click="handleTypeChange('month')">
+            {{ MONTH_NAME[Month] }}
+          </span>
+        </div>
+        <LayIcon
+          type="layui-icon-right"
+          @click="handleYearMonthChange('add', 'month')"
+        ></LayIcon>
+        <LayIcon
+          type="layui-icon-next"
+          @click="handleYearMonthChange('add', 'year')"
+        ></LayIcon>
+      </div>
+
+      <DateContent
+        :date-list="dateList"
+        :model-value="Day"
+        @update:model-value="handlePickDay"
+      ></DateContent>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type BasePanelProps } from "../interface";
+
+import { computed, nextTick, ref, watch } from "vue";
+import dayjs, { type Dayjs } from "dayjs";
+import { useI18n } from "../../../../language";
+
+import { setDateList } from "../../day";
+import LayIcon from "../../../icon";
+import DateContent from "./DateContent.vue";
+
+defineOptions({
+  name: "DatePanel",
+});
+
+// inputDate 用于保持 day 日期的状态，不被modelValue改变
+const props = withDefaults(
+  defineProps<BasePanelProps & { inputDate: Dayjs }>(),
+  {}
+);
+const emits = defineEmits<{
+  (e: "year-month-change", data: Dayjs): void;
+  (e: "type-change", type: "year" | "month"): void;
+  (e: "pick", value: Dayjs): void;
+}>();
+
+const { t } = useI18n();
+
+const Day = ref();
+const Year = ref();
+const Month = ref();
+const dateList = ref<any>([]);
+
+const MONTH_NAME = computed(() => [
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
+]);
+
+watch(
+  () => props.modelValue,
+  () => {
+    Day.value = dayjs(props.inputDate).startOf("day").valueOf(); //unix
+
+    Year.value = dayjs(props.modelValue).year();
+    Month.value = dayjs(props.modelValue).month();
+
+    dateList.value = setDateList(Year.value, Month.value);
+  },
+
+  {
+    immediate: true,
+  }
+);
+
+const handleYearMonthChange = (
+  calc: "add" | "subtract",
+  type: "year" | "month"
+) => {
+  const date = props.modelValue[calc](1, type);
+
+  emits("year-month-change", date);
+};
+
+const handleTypeChange = (type: "year" | "month") => {
+  emits("type-change", type);
+};
+
+const handlePickDay = (val: number) => {
+  emits("pick", dayjs(val));
+  // 等待 props.modelValue watch 结束
+  // 防止 Day.value 被inputData改变
+  nextTick(() => {
+    Day.value = val;
+  });
+};
+</script>
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePickerV2/component/common/DateContent.vue
new file mode 100644
index 00000000..57c32064
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/DateContent.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="layui-laydate-content">
+    <table style="width: 100%">
+      <thead>
+        <tr>
+          <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template
+          v-for="(o, i) of dateList.length % 7 == 0
+            ? dateList.length / 7
+            : Math.floor(dateList.length / 7) + 1"
+          :key="i"
+        >
+          <tr>
+            <td
+              v-for="(item, index) of dateList.slice(i * 7, i * 7 + 7)"
+              :key="index"
+              :data-unix="item.value"
+              :class="{
+                'laydate-day-prev': item.type !== 'current',
+                'layui-this':
+                  item.value === modelValue ||
+                  (DatePickerContext.range &&
+                    item.type === 'current' &&
+                    (item.value == startDate || item.value == endDate)),
+                'laydate-range-hover': ifHasRangeHoverClass(item),
+                'layui-disabled': cellDisabled(item),
+                'layui-laydate-current':
+                  item.value === dayjs().startOf('day').valueOf(),
+              }"
+              @click="handleDayClick(item)"
+              @mouseenter="dayItemMouseEnter($event, item)"
+            >
+              {{ item.day }}
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "../../../../language";
+import { computed, inject } from "vue";
+import { DATE_PICKER_CONTEXT } from "../../interface";
+import dayjs from "dayjs";
+
+export interface DateContentProps {
+  dateList: any;
+  modelValue?: number;
+  startDate?: number;
+  endDate?: number;
+  hoverDate?: number;
+}
+
+defineOptions({
+  name: "DateContent",
+});
+
+const props = withDefaults(defineProps<DateContentProps>(), {
+  dateList: [],
+  modelValue: -1,
+  hoverDate: -1,
+  startDate: -1,
+  endDate: -1,
+});
+
+const { t } = useI18n();
+
+const WEEK_NAME = computed(() => [
+  t("datePicker.sunday"),
+  t("datePicker.monday"),
+  t("datePicker.tuesday"),
+  t("datePicker.wednesday"),
+  t("datePicker.thursday"),
+  t("datePicker.friday"),
+  t("datePicker.saturday"),
+]);
+
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
+const emits = defineEmits([
+  "update:modelValue",
+  "update:startDate",
+  "update:endDate",
+  "update:hoverDate",
+  "simple",
+]);
+
+// 判断日期是否可以点击
+const cellDisabled = computed(() => {
+  return (item: { type: string; value: number }) => {
+    if (item.type !== "current" && DatePickerContext.range) {
+      return true;
+    }
+    if (
+      DatePickerContext.min &&
+      dayjs(item.value).isBefore(dayjs(DatePickerContext.min))
+    ) {
+      return true;
+    }
+    if (
+      DatePickerContext.max &&
+      dayjs(item.value).isAfter(dayjs(DatePickerContext.max))
+    ) {
+      return true;
+    }
+    return false;
+  };
+});
+
+// 点击日期
+const handleDayClick = (item: any) => {
+  if (cellDisabled.value(item)) {
+    return;
+  }
+  if (DatePickerContext.range) {
+    if (item.type !== "current") {
+      return;
+    }
+
+    if (props.startDate === -1 && props.endDate === -1) {
+      emits("update:startDate", item.value);
+    } else if (props.startDate !== -1 && props.endDate !== -1) {
+      emits("update:hoverDate", item.value);
+      emits("update:startDate", item.value);
+      emits("update:endDate", -1);
+    } else if (props.startDate !== -1 && props.endDate === -1) {
+      emits("update:endDate", item.value);
+      if (item.value < props.startDate) {
+        //swap
+        const first = props.startDate;
+        const last = item.value;
+        emits("update:startDate", last);
+        emits("update:endDate", first);
+      }
+    }
+  } else {
+    emits("update:modelValue", item.value);
+    // if (item.type !== "current") {
+    //   datePicker.currentMonth.value =
+    //     item.type === "prev"
+    //       ? datePicker.currentMonth.value - 1
+    //       : datePicker.currentMonth.value + 1;
+    // }
+    // if (datePicker.simple) {
+    //   emits("simple");
+    // }
+  }
+};
+
+const dayItemMouseEnter = (event: MouseEvent, item: any) => {
+  if (!DatePickerContext.range) {
+    return;
+  }
+  if (props.startDate === -1) {
+    return;
+  }
+  if (item.type !== "current") {
+    return;
+  }
+  if (props.startDate !== -1 && props.endDate !== -1) {
+    emits("update:hoverDate", -1);
+    return;
+  }
+  emits(
+    "update:hoverDate",
+    parseInt((event.target as HTMLElement).dataset.unix as string)
+  );
+};
+const ifHasRangeHoverClass = computed(() => {
+  return function (item: any) {
+    if (!DatePickerContext.range) {
+      return false;
+    }
+    if (props.startDate === -1) {
+      return false;
+    }
+    if (item.type !== "current") {
+      return false;
+    }
+    if (props.hoverDate === -1 && props.endDate === -1) {
+      return false;
+    }
+    let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
+    let max = props.startDate > hover ? props.startDate : hover;
+    let min = props.startDate < hover ? props.startDate : hover;
+    if (item.value >= min && item.value <= max) {
+      return true;
+    }
+    return false;
+  };
+});
+</script>
diff --git a/packages/component/component/datePickerV2/component/common/Footer.vue b/packages/component/component/datePickerV2/component/common/Footer.vue
index fe159f5b..cc29fae1 100644
--- a/packages/component/component/datePickerV2/component/common/Footer.vue
+++ b/packages/component/component/datePickerV2/component/common/Footer.vue
@@ -9,9 +9,13 @@
         @click="handelNow"
         >{{ t("datePicker.now") }}</span
       >
-      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">{{
-        t("datePicker.confirm")
-      }}</span>
+      <span
+        v-if="props.showConfirm"
+        lay-type="confirm"
+        class="laydate-btns-confirm"
+        @click="handelOk"
+        >{{ t("datePicker.confirm") }}</span
+      >
     </div>
   </div>
 </template>
@@ -21,6 +25,7 @@ import { useI18n } from "../../../../language";
 
 export interface PanelFoot {
   showNow?: boolean;
+  showConfirm?: boolean;
 }
 
 defineOptions({
@@ -29,6 +34,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<PanelFoot>(), {
   showNow: true,
+  showConfirm: true,
 });
 
 const { t } = useI18n();
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 3bc97cf4..7f50028c 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -1,30 +1,19 @@
 <script setup lang="ts">
-import dayjs, { type Dayjs } from "dayjs";
-import { type CommonBlockProps, COMMON_BLOCK_CONTEXT } from "../interface";
+import dayjs from "dayjs";
 import type {
   DatePickerModelValueSingleType,
   DatePickerProps,
 } from "../../interface";
 import LayDropdown from "../../../dropdown/index.vue";
+import LayInput from "../../../input/index.vue";
 
-import { computed, ref, provide, watchEffect } from "vue";
-import { isArray } from "../../../../utils";
+import { computed, ref } from "vue";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
 const emits = defineEmits(["update:modelValue"]);
 
 const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
 
-const initDate = computed<Dayjs | Array<Dayjs>>(() => {
-  if (isArray(props.modelValue)) {
-    return props.modelValue.map((date: DatePickerModelValueSingleType) => {
-      return dayjs(date || new Date());
-    });
-  } else {
-    return dayjs(props.modelValue || new Date());
-  }
-});
-
 const startPlaceholder = "";
 const endPlaceholder = "";
 
@@ -35,11 +24,6 @@ const classes = computed(() => {
   return ["layui-date-picker", { "layui-date-range-picker": props.range }];
 });
 
-// function setNowDate() {
-//   initDate.value.forEach((date) => {
-//     date = dayjs();
-//   });
-// }
 const dateValue = computed(() => {
   return props.range
     ? (props.modelValue as Array<DatePickerModelValueSingleType>).map(
@@ -54,17 +38,10 @@ const dateValue = computed(() => {
     : "";
 });
 
-function onPick(item) {
-  console.log(item, "inputBlock");
-
+function onPick(item: string | Date) {
   emits("update:modelValue", item);
   dropdownRef.value?.hide();
 }
-
-provide(COMMON_BLOCK_CONTEXT, {
-  // initDate,
-  // setNowDate,
-});
 </script>
 
 <template>
@@ -125,7 +102,7 @@ provide(COMMON_BLOCK_CONTEXT, {
         </lay-input>
       </div>
       <template #content>
-        <slot :initDate="initDate" :onPick="onPick"></slot>
+        <slot :onPick="onPick"></slot>
       </template>
     </lay-dropdown>
   </div>
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 6c5664fe..9a50c184 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -41,36 +41,28 @@
         </li>
       </ul>
     </div>
-    <!-- <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span
-        v-if="datePicker.type === 'yearmonth'"
-        @click="datePicker.showPanel.value = 'year'"
-        class="laydate-btns-time"
-        >{{ t("datePicker.selectYear") }}</span
-      >
-    </PanelFoot> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import dayjs, { type Dayjs } from "dayjs";
+import dayjs from "dayjs";
+import { type BasePanelProps } from "../interface";
+import { DATE_PICKER_CONTEXT } from "../../interface";
+
 import { useI18n } from "../../../../language";
-import { computed, inject, ref, watch } from "vue";
-import { BaseDateTypeProps } from "../interface";
-import { provideType, DatePickerProps } from "../../interface";
-import PanelFoot from "./Footer.vue";
+import { computed, ref, watch, inject } from "vue";
+
 import LayIcon from "../../../icon";
 
 defineOptions({
   name: "MonthPanel",
 });
 
-const props = withDefaults(defineProps<BaseDateTypeProps>(), {
-  // max: dayjs().year() + 100,
-});
-
+const props = withDefaults(defineProps<BasePanelProps>(), {});
 const emits = defineEmits(["pick", "year-change", "type-change"]);
 
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
 const Month = ref();
 
 const { t } = useI18n();
@@ -94,10 +86,16 @@ const MONTH_NAME = computed(() => [
 const cellDisabled = computed(() => {
   return (item: string) => {
     const month = MONTH_NAME.value.indexOf(item);
-    if (props.min && month < dayjs(props.min).month() + 1) {
+    if (
+      DatePickerContext.min &&
+      month < dayjs(DatePickerContext.min).month() + 1
+    ) {
       return true;
     }
-    if (props.max && month > dayjs(props.max).month() + 1) {
+    if (
+      DatePickerContext.max &&
+      month > dayjs(DatePickerContext.max).month() + 1
+    ) {
       return true;
     }
     return false;
@@ -129,23 +127,4 @@ watch(
 const handleYearChange = (val: number) => {
   emits("year-change", props.modelValue.year() + val);
 };
-
-//关闭回调
-// const footOnOk = () => {
-//   emits(
-//     "update:modelValue",
-//     Month.value || Month.value === 0 ? Month.value : -1
-//   );
-//   if (datePicker.range) {
-//     //关闭菜单
-//     emits("ok");
-//     return;
-//   } else {
-//     if (datePicker.type === "datetime" || datePicker.type === "date") {
-//       datePicker.showPanel.value = datePicker.type;
-//     } else {
-//       datePicker.ok();
-//     }
-//   }
-// };
 </script>
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 28b71707..a37ae3f8 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -5,14 +5,14 @@
         <div class="laydate-set-ym">
           <lay-icon
             type="layui-icon-left"
-            @click="currentDate -= yearPage ?? 15"
+            @click="currentDate -= DatePickerContext.yearPage"
           ></lay-icon>
           <span class="laydate-time-text">
             {{ yearRange.join(" - ") }}
           </span>
           <lay-icon
             type="layui-icon-right"
-            @click="currentDate += yearPage ?? 15"
+            @click="currentDate += DatePickerContext.yearPage"
           ></lay-icon>
         </div>
       </div>
@@ -37,62 +37,38 @@
         </li>
       </ul>
     </div>
-    <!--<PanelFoot @ok="footOnOk" @now="footOnNow">
-       <span
-        v-if="datePicker.type === 'yearmonth'"
-        @click="datePicker.showPanel.value = 'month'"
-        class="laydate-btns-time"
-        >{{ t("datePicker.selectMonth") }}</span
-      >
-      <template v-else-if="parseInt(Year.toString()) > 0">{{ Year }}</template> 
-      {{ _currentYear }}
-    </PanelFoot>-->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { type BaseDateTypeProps } from "../interface";
-import type {
-  provideType,
-  DatePickerProps,
-  DatePickerModelValueSingleType,
-} from "../../interface";
+import type { BasePanelProps } from "../interface";
 
-import dayjs, { Dayjs } from "dayjs";
+import dayjs from "dayjs";
+import { computed, ref, watch, inject } from "vue";
+
+import LayIcon from "../../../icon";
 import { useI18n } from "../../../../language";
-import { computed, inject, ref, watch } from "vue";
+import { DATE_PICKER_CONTEXT } from "../../interface";
 import { getYears } from "../../day";
-import PanelFoot from "./Footer.vue";
-import LayIcon from "../../../icon";
 
 defineOptions({
   name: "YearPanel",
 });
 
-const props = withDefaults(defineProps<BaseDateTypeProps>(), {
-  // modelValue: "",
-  // type: "date",
-  // disabled: false,
-  // readonly: false,
-  // allowClear: false,
-  // simple: false,
-  // range: false,
-  // rangeSeparator: "至",
-  // prefixIcon: "layui-icon-date",
-  // suffixIcon: "",
-  // timestamp: false,
-  // format: "",
-  // yearPage: 15,
-  // yearStep: 1,
-});
-
+const props = withDefaults(defineProps<BasePanelProps>(), {});
 const emits = defineEmits(["pick"]);
 
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
 const currentYear = ref();
 const currentDate = ref();
 
 const yearList = computed<number[]>(() =>
-  getYears(currentDate.value, props.yearPage, props.yearStep)
+  getYears(
+    currentDate.value,
+    DatePickerContext.yearPage,
+    DatePickerContext.yearStep
+  )
 );
 const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
 
@@ -111,10 +87,10 @@ const { t } = useI18n();
 // 判断单元格是否可以点击(禁用)
 const cellDisabled = computed(() => {
   return (item: number) => {
-    if (props.min && item < dayjs(props.min).year()) {
+    if (DatePickerContext.min && item < dayjs(DatePickerContext.min).year()) {
       return true;
     }
-    if (props.max && item > dayjs(props.max).year()) {
+    if (DatePickerContext.max && item > dayjs(DatePickerContext.max).year()) {
       return true;
     }
     return false;
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index 5639a798..11c5b1db 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -1,43 +1,11 @@
-import type { ComputedRef, StyleValue } from "vue";
 import type { Dayjs } from "dayjs";
-import type {
-  DatePickerModelValueSingleType,
-  DatePickerProps,
-  DatePickerType,
-} from "../interface";
-import type { CommonSize, CommonClass } from "../../../types/common";
+import type { DatePickerType, PanelPickerProps } from "../interface";
 
-export interface CommonBlockProps {
-  name?: string;
-  modelValue:
-    | DatePickerModelValueSingleType
-    | Array<DatePickerModelValueSingleType>;
-  classes: CommonClass;
-  size: CommonSize;
-  disabled: boolean;
-  allowClear: boolean;
-  format?: string;
-  range: boolean;
-  rangeSeparator: string;
-  readonly: boolean;
-  prefixIcon?: string;
-  suffixIcon?: string;
-  contentClass?: CommonClass;
-  contentStyle?: StyleValue;
-  [key: string]: any;
-}
-
-export type BaseDateTypeProps = DatePickerProps & {
+export interface BasePanelProps {
   modelValue: Dayjs;
   dateType: DatePickerType;
-};
-
-import type { InjectionKey } from "vue";
-
-export type CommonBlockContext = {
-  // initDate: ComputedRef<Array<Dayjs>>;
-  // setNowDate: () => void;
-};
+}
 
-export const COMMON_BLOCK_CONTEXT: InjectionKey<CommonBlockContext> =
-  Symbol("CommonBlock");
+export interface UniquePickerProps extends PanelPickerProps {
+  modelValue: Dayjs;
+}
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
index 9cadb13a..586b3685 100644
--- a/packages/component/component/datePickerV2/day.ts
+++ b/packages/component/component/datePickerV2/day.ts
@@ -7,7 +7,7 @@
 const getYears = (date?: Date | number, page = 15, step = 1) => {
   const years = [];
   const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
-  console.log(y, page, step);
+  // console.log(y, page, step);
   const r = (page % 2 ? page - 1 : page) / 2;
   for (let i = y - r; i <= y + r; i += step) {
     years.push(i);
diff --git a/packages/component/component/datePickerV2/hook/useDateCommon.ts b/packages/component/component/datePickerV2/hook/useDateCommon.ts
deleted file mode 100644
index 9c705559..00000000
--- a/packages/component/component/datePickerV2/hook/useDateCommon.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { DatePickerProps } from "../interface";
-import type { CommonBlockProps } from "../component/interface";
-
-import { computed } from "vue";
-
-export const useDateCommon = (props: DatePickerProps, attrs: any) => {
-  const commonBlockProps = computed<CommonBlockProps>(() => {
-    // console.log(props.modelValue, "props.modelValue2");
-    return {
-      name: props.name!,
-      modelValue: props.modelValue,
-      classes: [
-        "layui-date-picker",
-        { "layui-date-range-picker": props.range },
-      ],
-      size: "md",
-      disabled: props.disabled!,
-      allowClear: props.allowClear!,
-      range: props.range!,
-      rangeSeparator: props.rangeSeparator!,
-      readonly: props.readonly!,
-      prefixIcon: props.prefixIcon,
-      suffixIcon: props.suffixIcon,
-      contentClass: props.contentClass!,
-      contentStyle: props.contentStyle!,
-      ...attrs,
-    };
-  });
-
-  return {
-    commonBlockProps,
-  };
-};
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 7febad8a..7e0fcf52 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -1,23 +1,38 @@
-import type { DatePickerProps, DatePickerEmits, TypeMap } from "../interface";
+import type {
+  // DatePickerProps,
+  RequiredDatePickerProps,
+  TypeMap,
+  DatePickerModelValueSingleType,
+  DatePickerContextType,
+} from "../interface";
+import dayjs, { type Dayjs } from "dayjs";
 
 import { computed } from "vue";
-// import dayjs from "dayjs";
 import YearPanel from "../component/common/Year.vue";
-import MonthPanel from "../component/common/Month.vue";
-import Picker from "../component/Picker.vue";
-
-export const useDatePicker = (
-  props: DatePickerProps
-  // emits: DatePickerEmits
-) => {
-  // const _modelValue = computed({
-  //   get() {
-  //     return props.modelValue;
-  //   },
-  //   set(val) {
-  //     return emits("update:modelValue", val as string | Array<string>);
-  //   },
-  // });
+import DatePicker from "../component/DatePicker.vue";
+
+import { isArray, isNumber } from "../../../utils";
+
+export const useDatePicker = (props: RequiredDatePickerProps) => {
+  const initDate = computed<Dayjs | Array<Dayjs>>(() => {
+    if (isArray(props.modelValue)) {
+      return props.modelValue.map((date: DatePickerModelValueSingleType) => {
+        return dayjs(date || new Date());
+      });
+    } else {
+      // 兼容之前的 Year | Month 类型 modelValue可传 `2024` | `11` number类型
+      let value = props.modelValue;
+      if (
+        ["year", "month"].includes(props.type!) &&
+        isNumber(props.modelValue) &&
+        (`${props.modelValue}`.length === 4 ||
+          `${props.modelValue}`.length === 2)
+      ) {
+        value += "";
+      }
+      return dayjs(value || new Date());
+    }
+  });
 
   const _format = computed(() => {
     return props.format ?? typeMap.value.format;
@@ -29,24 +44,26 @@ export const useDatePicker = (
 
   // 类型映射
   const TYPE_MAP: TypeMap = {
-    date: { component: YearPanel, format: "YYYY-MM-DD" },
     datetime: { component: YearPanel, format: "YYYY-MM-DD HH:mm:ss" },
-    year: { component: Picker, format: "YYYY" },
-    month: { component: Picker, format: "MM" },
-    yearmonth: { component: Picker, format: "YYYY-MM" },
+    date: { component: DatePicker, format: "YYYY-MM-DD" },
+    year: { component: DatePicker, format: "YYYY" },
+    month: { component: DatePicker, format: "M" },
+    yearmonth: { component: DatePicker, format: "YYYY-MM" },
     time: { component: YearPanel, format: "HH:mm:ss" },
   };
 
-  const renderComponentProps = computed<DatePickerProps>(() => {
+  const renderComponentProps = computed<DatePickerContextType>(() => {
     return {
       ...props,
+      modelValue: initDate.value,
+      defaultFormat: typeMap.value.format,
       format: _format.value,
       inputFormat: _inputFormat.value,
     };
   });
 
   const typeMap = computed(() => {
-    return TYPE_MAP[props.type!];
+    return TYPE_MAP[props.type];
   });
 
   const RenderComponent = computed(() => {
@@ -54,7 +71,6 @@ export const useDatePicker = (
   });
 
   return {
-    // _modelValue,
     RenderComponent,
     renderComponentProps,
   };
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index 6d6fe0a2..c34eee69 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import "./index.less";
-import dayjs from "dayjs";
-import type {
-  DatePickerProps as _DatePickerProps,
-  DatePickerType,
-  DatePickerEmits,
+import {
+  DATE_PICKER_CONTEXT,
+  type DatePickerProps as _DatePickerProps,
+  type DatePickerType,
 } from "./interface";
 
-import { useDateCommon } from "./hook/useDateCommon";
 import { useDatePicker } from "./hook/useDatePicker";
 
 import InputBlock from "./component/common/InputBlock.vue";
-import { computed, useAttrs } from "vue";
+import { computed, provide } from "vue";
 
 export type DatePickerProps = _DatePickerProps;
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
   modelValue: "",
-  type: "year",
+  size: "md",
+  type: "date",
   disabled: false,
   readonly: false,
   allowClear: false,
@@ -31,19 +30,14 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   yearStep: 1,
 });
 
-// const emits = defineEmits<DatePickerEmits>();
-const attrs = useAttrs();
-// const { commonBlockProps } = useDateCommon(props, attrs);
-
-const { RenderComponent, renderComponentProps } = useDatePicker(
-  props
-  // emits
-);
+const { RenderComponent, renderComponentProps } = useDatePicker(props);
 
 const format = computed<string>(() => {
   return props.inputFormat ?? renderComponentProps.value.inputFormat!;
 });
 
+provide(DATE_PICKER_CONTEXT, renderComponentProps.value);
+
 defineOptions({
   name: "LayDatePickerV2",
 });
@@ -51,12 +45,8 @@ defineOptions({
 
 <template>
   <InputBlock v-bind="{ ...props, ...$attrs }" :format="format">
-    <template #default="{ initDate, onPick }">
-      <RenderComponent
-        v-bind="renderComponentProps"
-        :modelValue="initDate"
-        @pick="onPick"
-      />
+    <template #default="{ onPick }">
+      <RenderComponent v-bind="renderComponentProps" @pick="onPick" />
     </template>
   </InputBlock>
 </template>
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index b53df83b..56c2d268 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -1,6 +1,7 @@
 import type { Dayjs, ConfigType } from "dayjs";
-import type { Ref, StyleValue, Component, DefineComponent } from "vue";
+import type { StyleValue, Component, InjectionKey, ComputedRef } from "vue";
 import type { CommonSize, CommonClass } from "../../types/common";
+import type { RequiredByKeys } from "../../types/util";
 
 export type DatePickerType =
   | "date"
@@ -55,31 +56,29 @@ export type DatePickerEmits = {
   (e: "clear"): void;
 };
 
-export type provideType = {
-  currentYear: Ref;
-  currentMonth: Ref;
-  currentDay: Ref;
-  dateValue: Ref;
-  hms: Ref;
-  type: string;
-  showPanel: Ref;
-  clear: Function;
-  now: Function;
-  ok: Function;
-  range: boolean;
-  rangeValue: {
-    first: string;
-    last: string;
-    hover: string;
-    firstTime: { hh: number; mm: number; ss: number };
-    lastTime: { hh: number; mm: number; ss: number };
-  };
-  rangeSeparator: string;
-  simple: boolean;
-  timestamp: boolean;
-  max: Ref<string>;
-  min: Ref<string>;
-  defaultTime: string | string[];
-  yearPage: Ref<number>;
-  yearStep: Ref<number>;
-};
+export type RequiredDatePickerProps = RequiredByKeys<
+  DatePickerProps,
+  | "type"
+  | "disabled"
+  | "readonly"
+  | "allowClear"
+  | "simple"
+  | "range"
+  | "rangeSeparator"
+  | "prefixIcon"
+  | "yearPage"
+  | "yearStep"
+>;
+
+export interface PanelPickerProps extends DatePickerProps {
+  modelValue: Dayjs | Array<Dayjs>;
+  defaultFormat: string;
+}
+
+export interface DatePickerContextType extends RequiredDatePickerProps {
+  modelValue: Dayjs | Array<Dayjs>;
+  defaultFormat: string;
+}
+
+export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
+  Symbol("LayDatePicker");
diff --git a/packages/component/types/util.ts b/packages/component/types/util.ts
new file mode 100644
index 00000000..d263e931
--- /dev/null
+++ b/packages/component/types/util.ts
@@ -0,0 +1,4 @@
+export type RequiredByKeys<T, K extends keyof T = keyof T> = Omit<
+  T & Required<Pick<T, K & keyof T>>,
+  never
+>;
-- 
Gitee


From ee2756ca0497b432fbb052375a153bba20c25d07 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Mon, 16 Sep 2024 18:14:09 +0800
Subject: [PATCH 05/45] feat: add time type

---
 .../datePickerV2/component/DatePicker.vue     |  15 ++
 .../datePickerV2/component/common/Date.vue    |  16 +-
 .../component/common/InputBlock.vue           |  49 +++--
 .../datePickerV2/component/common/Time.vue    | 180 ++++++++++++++++++
 .../datePickerV2/component/interface.ts       |   1 +
 .../datePickerV2/hook/useDatePicker.ts        |   8 +-
 .../component/datePickerV2/index.vue          |   6 +
 7 files changed, 247 insertions(+), 28 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/common/Time.vue

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 632de784..5835429e 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -4,6 +4,7 @@ import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 
 import Date from "./common/Date.vue";
+import Time from "./common/Time.vue";
 import Year from "./common/Year.vue";
 import Month from "./common/Month.vue";
 import Footer from "./common/Footer.vue";
@@ -46,6 +47,11 @@ const handlePickDate = (value: Dayjs) => {
   handleConfirm();
 };
 
+const handlePickTime = (value: Dayjs) => {
+  currentData.value = value;
+  handleConfirm();
+};
+
 const handlePickYear = (year: number) => {
   const data = currentData.value.year(year);
 
@@ -114,15 +120,24 @@ const footerValue = () => {
     @year-month-change="handleDateChangeYearMonth"
     @type-change="(type) => (currentType = type)"
   ></Date>
+  <Time
+    v-if="currentType === 'time'"
+    :modelValue="currentData"
+    :inputDate="inputDate"
+    :dateType="dateType"
+    @pick="handlePickTime"
+  ></Time>
   <Year
     v-if="currentType === 'year'"
     :modelValue="currentData"
+    :inputDate="inputDate"
     :dateType="dateType"
     @pick="handlePickYear"
   ></Year>
   <Month
     v-if="currentType === 'month'"
     :modelValue="currentData"
+    :inputDate="inputDate"
     :dateType="dateType"
     @pick="handlePickMonth"
     @year-change="handleMonthChangeYear"
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index 36e47097..de05467f 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -53,10 +53,7 @@ defineOptions({
 });
 
 // inputDate 用于保持 day 日期的状态，不被modelValue改变
-const props = withDefaults(
-  defineProps<BasePanelProps & { inputDate: Dayjs }>(),
-  {}
-);
+const props = withDefaults(defineProps<BasePanelProps>(), {});
 const emits = defineEmits<{
   (e: "year-month-change", data: Dayjs): void;
   (e: "type-change", type: "year" | "month"): void;
@@ -95,7 +92,6 @@ watch(
 
     dateList.value = setDateList(Year.value, Month.value);
   },
-
   {
     immediate: true,
   }
@@ -115,7 +111,15 @@ const handleTypeChange = (type: "year" | "month") => {
 };
 
 const handlePickDay = (val: number) => {
-  emits("pick", dayjs(val));
+  const unixDate = dayjs(val);
+
+  const data = props.modelValue
+    .clone()
+    .set("year", unixDate.year())
+    .set("month", unixDate.month())
+    .set("date", unixDate.date());
+
+  emits("pick", data);
   // 等待 props.modelValue watch 结束
   // 防止 Day.value 被inputData改变
   nextTick(() => {
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 7f50028c..be80347b 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import dayjs from "dayjs";
+import { computed, ref } from "vue";
 import type {
   DatePickerModelValueSingleType,
   DatePickerProps,
 } from "../../interface";
 import LayDropdown from "../../../dropdown/index.vue";
 import LayInput from "../../../input/index.vue";
-
-import { computed, ref } from "vue";
+import { isArray, isNumber } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
 const emits = defineEmits(["update:modelValue"]);
 
 const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
 
-const startPlaceholder = "";
-const endPlaceholder = "";
+const _Placeholder = computed(() => {
+  return isArray(props.placeholder) ? props.placeholder : [props.placeholder];
+});
 
 const onChange = () => {};
 const handleClear = () => {};
@@ -25,17 +26,29 @@ const classes = computed(() => {
 });
 
 const dateValue = computed(() => {
-  return props.range
-    ? (props.modelValue as Array<DatePickerModelValueSingleType>).map(
-        (data) => {
-          return dayjs(data).format(props.format);
-        }
-      )
-    : props.modelValue
-    ? dayjs(props.modelValue as DatePickerModelValueSingleType).format(
-        props.format
-      )
-    : "";
+  if (props.range) {
+    return (props.modelValue as Array<DatePickerModelValueSingleType>).map(
+      (data) => {
+        return dayjs(data).format(props.format);
+      }
+    );
+  } else {
+    if (!props.modelValue) return "";
+
+    let value = props.modelValue;
+
+    if (
+      ["year", "month"].includes(props.type!) &&
+      isNumber(props.modelValue) &&
+      `${props.modelValue}`.length <= 4
+    ) {
+      value += "";
+    }
+
+    return dayjs(value as DatePickerModelValueSingleType, props.format).format(
+      props.format
+    );
+  }
 });
 
 function onPick(item: string | Date) {
@@ -56,7 +69,7 @@ function onPick(item: string | Date) {
       <lay-input
         :name="name"
         :readonly="readonly"
-        :placeholder="startPlaceholder"
+        :placeholder="_Placeholder[0]"
         :prefix-icon="prefixIcon"
         :suffix-icon="suffixIcon"
         :disabled="disabled"
@@ -75,7 +88,7 @@ function onPick(item: string | Date) {
           :readonly="readonly"
           :name="name"
           :modelValue="dateValue[0]"
-          :placeholder="startPlaceholder"
+          :placeholder="_Placeholder[0]"
           :disabled="disabled"
           @change="onChange"
           @blur="$emit('blur')"
@@ -89,7 +102,7 @@ function onPick(item: string | Date) {
           :readonly="readonly"
           :name="name"
           :allow-clear="!disabled && allowClear"
-          :placeholder="endPlaceholder"
+          :placeholder="_Placeholder[1]"
           :modelValue="dateValue[1]"
           :disabled="disabled"
           @change="onChange"
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
new file mode 100644
index 00000000..2c0dd549
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="layui-laydate">
+    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
+      <div class="layui-laydate-header">
+        <div class="laydate-set-ym">
+          <span class="laydate-time-text">{{
+            t("datePicker.selectTime")
+          }}</span>
+        </div>
+      </div>
+      <div class="layui-laydate-content" style="height: 210px">
+        <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
+          <li
+            class="num-list"
+            v-for="item in els"
+            :key="item.type"
+            :data-type="item.type"
+          >
+            <ol class="scroll" @click="chooseTime">
+              <li
+                v-for="(it, index) in item.count"
+                :id="item.type + index.toString()"
+                :data-value="index.toString().padStart(2, '0')"
+                :data-type="item.type"
+                :key="it"
+                :class="{
+                  num: true,
+                  'layui-this': index == hms[item.type as keyof HmsType],
+                  'layui-disabled': cellDisabled(item.type, index),
+                }"
+              >
+                {{ index.toString().padStart(2, "0") }}
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import dayjs, { type Dayjs } from "dayjs";
+import { inject, onMounted, ref, nextTick, watch, computed } from "vue";
+
+import type { BasePanelProps } from "../interface";
+
+import { useI18n } from "../../../../language";
+import { DATE_PICKER_CONTEXT } from "../../interface";
+
+export interface HmsType {
+  hh: number;
+  mm: number;
+  ss: number;
+}
+
+defineOptions({
+  name: "TimePanel",
+});
+
+const props = withDefaults(defineProps<BasePanelProps>(), {});
+const emits = defineEmits(["pick"]);
+
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+const { t } = useI18n();
+
+const els = [
+  { count: 24, type: "hh" },
+  { count: 60, type: "mm" },
+  { count: 60, type: "ss" },
+];
+const hms = ref<HmsType>({
+  hh: props.modelValue.hour(),
+  mm: props.modelValue.minute(),
+  ss: props.modelValue.second(),
+});
+
+const cellDisabled = computed(() => {
+  return (type?: string, value?: number) => {
+    const haveValue = typeof value !== "undefined";
+    const toDay = dayjs().format("YYY-MM-DD");
+    const _hms: Record<string, number> = {
+      hh: haveValue ? hms.value.hh : dayjs().hour(),
+      mm: haveValue ? hms.value.mm : dayjs().minute(),
+      ss: haveValue ? hms.value.ss : dayjs().second(),
+    };
+    haveValue && (_hms[type!] = value);
+    const time = `${_hms.hh}:${_hms.mm}:${_hms.ss}`;
+    if (
+      DatePickerContext.min &&
+      dayjs(`${toDay} ${time}`).isBefore(
+        dayjs(`${toDay} ${DatePickerContext.min}`)
+      )
+    ) {
+      return true;
+    }
+
+    if (
+      DatePickerContext.max &&
+      dayjs(`${toDay} ${time}`).isAfter(
+        dayjs(`${toDay} ${DatePickerContext.max}`)
+      )
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+});
+
+// 点击时间 - hms
+const chooseTime = (e: any) => {
+  if (e.target.nodeName == "LI") {
+    let { value, type } = e.target.dataset;
+
+    if (cellDisabled.value(type, parseInt(value))) {
+      return;
+    }
+
+    hms.value[type as keyof typeof hms.value] = parseInt(value);
+
+    const hmsDate = dayjs({
+      hour: hms.value.hh,
+      minute: hms.value.mm,
+      second: hms.value.ss,
+    });
+
+    const newData = props.modelValue
+      .clone()
+      .set("hour", hmsDate.hour())
+      .set("minute", hmsDate.minute())
+      .set("second", hmsDate.second());
+
+    emits("pick", newData);
+  }
+};
+
+const timePanelRef = ref();
+
+onMounted(() => {
+  scrollTo();
+});
+
+watch(
+  () => props.inputDate,
+  () => {
+    hms.value = {
+      hh: props.modelValue.hour(),
+      mm: props.modelValue.minute(),
+      ss: props.modelValue.second(),
+    };
+
+    scrollTo();
+  }
+);
+const scrollTo = () => {
+  nextTick(() => {
+    timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
+      if (element.nodeName === "LI") {
+        let scrollTop = 0;
+        let parentDom = element.firstElementChild as HTMLElement;
+        let childList = parentDom.childNodes;
+        for (let index = 0; index < childList.length; index++) {
+          const child = childList[index] as HTMLElement;
+          if (child.nodeName !== "LI") {
+            continue;
+          }
+          if (child.classList && child.classList.contains("layui-this")) {
+            scrollTop =
+              child.offsetTop -
+              (parentDom.offsetHeight - child.offsetHeight) / 2;
+            parentDom.scrollTo(0, scrollTop);
+            break;
+          }
+        }
+      }
+    });
+  });
+};
+</script>
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index 11c5b1db..f628ccbe 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -3,6 +3,7 @@ import type { DatePickerType, PanelPickerProps } from "../interface";
 
 export interface BasePanelProps {
   modelValue: Dayjs;
+  inputDate: Dayjs;
   dateType: DatePickerType;
 }
 
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 7e0fcf52..b495695a 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -25,12 +25,12 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
       if (
         ["year", "month"].includes(props.type!) &&
         isNumber(props.modelValue) &&
-        (`${props.modelValue}`.length === 4 ||
-          `${props.modelValue}`.length === 2)
+        `${props.modelValue}`.length <= 4
       ) {
         value += "";
       }
-      return dayjs(value || new Date());
+
+      return dayjs(value || new Date(), typeMap.value.format);
     }
   });
 
@@ -49,7 +49,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
     year: { component: DatePicker, format: "YYYY" },
     month: { component: DatePicker, format: "M" },
     yearmonth: { component: DatePicker, format: "YYYY-MM" },
-    time: { component: YearPanel, format: "HH:mm:ss" },
+    time: { component: DatePicker, format: "HH:mm:ss" },
   };
 
   const renderComponentProps = computed<DatePickerContextType>(() => {
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index c34eee69..6c551081 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import "./index.less";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import objectSupport from "dayjs/plugin/objectSupport";
 import {
   DATE_PICKER_CONTEXT,
   type DatePickerProps as _DatePickerProps,
@@ -11,6 +14,9 @@ import { useDatePicker } from "./hook/useDatePicker";
 import InputBlock from "./component/common/InputBlock.vue";
 import { computed, provide } from "vue";
 
+dayjs.extend(customParseFormat);
+dayjs.extend(objectSupport);
+
 export type DatePickerProps = _DatePickerProps;
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
-- 
Gitee


From 6cebd895d2c78797762f13f999a832ec77f53d87 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 18 Sep 2024 10:01:31 +0800
Subject: [PATCH 06/45] fix: dayjs format modelValue error

---
 .../datePickerV2/component/DatePicker.vue       |  2 +-
 .../component/common/InputBlock.vue             | 10 ++++++----
 .../datePickerV2/hook/useDatePicker.ts          | 17 ++++++++++-------
 .../component/component/datePickerV2/util.ts    | 11 +++++++++++
 4 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/util.ts

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 5835429e..14f06777 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -118,7 +118,7 @@ const footerValue = () => {
     :dateType="dateType"
     @pick="handlePickDate"
     @year-month-change="handleDateChangeYearMonth"
-    @type-change="(type) => (currentType = type)"
+    @type-change="(type: 'year' | 'month') => (currentType = type)"
   ></Date>
   <Time
     v-if="currentType === 'time'"
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index be80347b..2e093c3f 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -7,6 +7,7 @@ import type {
 } from "../../interface";
 import LayDropdown from "../../../dropdown/index.vue";
 import LayInput from "../../../input/index.vue";
+import { normalizeDayjsValue } from "../../util";
 import { isArray, isNumber } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
@@ -29,7 +30,7 @@ const dateValue = computed(() => {
   if (props.range) {
     return (props.modelValue as Array<DatePickerModelValueSingleType>).map(
       (data) => {
-        return dayjs(data).format(props.format);
+        return normalizeDayjsValue(data, props.format!).format(props.format);
       }
     );
   } else {
@@ -45,9 +46,10 @@ const dateValue = computed(() => {
       value += "";
     }
 
-    return dayjs(value as DatePickerModelValueSingleType, props.format).format(
-      props.format
-    );
+    return normalizeDayjsValue(
+      value as DatePickerModelValueSingleType,
+      props.format!
+    ).format(props.format);
   }
 });
 
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index b495695a..fbf2257a 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -5,23 +5,25 @@ import type {
   DatePickerModelValueSingleType,
   DatePickerContextType,
 } from "../interface";
-import dayjs, { type Dayjs } from "dayjs";
+import { type Dayjs } from "dayjs";
 
 import { computed } from "vue";
-import YearPanel from "../component/common/Year.vue";
 import DatePicker from "../component/DatePicker.vue";
 
-import { isArray, isNumber } from "../../../utils";
+import { normalizeDayjsValue } from "../util";
+import { isArray, isNumber, isString } from "../../../utils";
 
 export const useDatePicker = (props: RequiredDatePickerProps) => {
   const initDate = computed<Dayjs | Array<Dayjs>>(() => {
     if (isArray(props.modelValue)) {
       return props.modelValue.map((date: DatePickerModelValueSingleType) => {
-        return dayjs(date || new Date());
+        const value = date || new Date();
+
+        return normalizeDayjsValue(value, typeMap.value.format);
       });
     } else {
       // 兼容之前的 Year | Month 类型 modelValue可传 `2024` | `11` number类型
-      let value = props.modelValue;
+      let value = props.modelValue || new Date();
       if (
         ["year", "month"].includes(props.type!) &&
         isNumber(props.modelValue) &&
@@ -30,7 +32,8 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
         value += "";
       }
 
-      return dayjs(value || new Date(), typeMap.value.format);
+      // 处理CustomParseFormat插件可能造成解析Date, number, '', undefined...错误
+      return normalizeDayjsValue(value, typeMap.value.format);
     }
   });
 
@@ -44,7 +47,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
 
   // 类型映射
   const TYPE_MAP: TypeMap = {
-    datetime: { component: YearPanel, format: "YYYY-MM-DD HH:mm:ss" },
+    datetime: { component: DatePicker, format: "YYYY-MM-DD HH:mm:ss" },
     date: { component: DatePicker, format: "YYYY-MM-DD" },
     year: { component: DatePicker, format: "YYYY" },
     month: { component: DatePicker, format: "M" },
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
new file mode 100644
index 00000000..d84f134c
--- /dev/null
+++ b/packages/component/component/datePickerV2/util.ts
@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import type { DatePickerModelValueSingleType } from "./interface";
+
+export const normalizeDayjsValue = (
+  value: DatePickerModelValueSingleType,
+  format: string
+) => {
+  const date = dayjs(value, format);
+
+  return date.isValid() ? date : dayjs(value);
+};
-- 
Gitee


From f7144e4539a4f7c15d7de9b160f5bccb6c7f0434 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 18 Sep 2024 11:12:03 +0800
Subject: [PATCH 07/45] feat: add datetime type

---
 .../component/component/datePicker/index.vue  |  2 +-
 .../datePickerV2/component/DatePicker.vue     | 40 ++++++++++++++++---
 .../datePickerV2/component/common/Footer.vue  | 11 +++--
 .../component/datePickerV2/index.less         | 36 ++++++++---------
 4 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index e804fd94..f6ab62dc 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -108,7 +108,7 @@
 </template>
 
 <script lang="ts" setup>
-import "./index.less";
+// import "./index.less";
 import dayjs from "dayjs";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 14f06777..46697c98 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -3,6 +3,7 @@ import type { UniquePickerProps } from "./interface";
 import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 
+import LayButton from "../../button/index.vue";
 import Date from "./common/Date.vue";
 import Time from "./common/Time.vue";
 import Year from "./common/Year.vue";
@@ -30,9 +31,18 @@ const dateType = computed(() => {
   return props.type!;
 });
 
+// 非一次性选择 || datetime|time 类型
+const showConfirm = computed(() => {
+  return !props.simple || ["datetime", "time"].includes(dateType.value);
+});
+
 watch(
   () => dateType.value,
   (val) => {
+    if (val === "datetime") {
+      currentType.value = "date";
+      return;
+    }
     if (val === "yearmonth") {
       currentType.value = "month";
       return;
@@ -55,7 +65,7 @@ const handlePickTime = (value: Dayjs) => {
 const handlePickYear = (year: number) => {
   const data = currentData.value.year(year);
 
-  if (dateType.value === "date") {
+  if (["datetime", "date"].includes(dateType.value)) {
     currentData.value = data;
     currentType.value = "date";
   } else if (dateType.value === "yearmonth") {
@@ -70,7 +80,7 @@ const handlePickYear = (year: number) => {
 const handlePickMonth = (month: number) => {
   const data = currentData.value.month(month);
 
-  if (dateType.value === "date") {
+  if (["datetime", "date"].includes(dateType.value)) {
     currentData.value = data;
     currentType.value = "date";
   } else {
@@ -87,8 +97,21 @@ const handleDateChangeYearMonth = (data: Dayjs) => {
   currentData.value = data;
 };
 
+const handleToggleTimePanel = () => {
+  currentType.value = currentType.value === "date" ? "time" : "date";
+};
+
+const preCondition = () => {
+  // datetime类型点击确定还原当前panel为date
+  if (dateType.value === "datetime") {
+    currentType.value = "date";
+  }
+};
+
 const handleConfirm = (isConfirm = false) => {
-  if (props.simple || isConfirm) {
+  if (!showConfirm.value || isConfirm) {
+    preCondition();
+
     emits("pick", formatValue());
   }
 };
@@ -144,10 +167,17 @@ const footerValue = () => {
     @type-change="currentType = 'year'"
   ></Month>
   <Footer
-    :showConfirm="!simple"
+    :showConfirm="showConfirm"
     @confirm="handleConfirm(true)"
     @now="handleNow"
   >
-    {{ footerValue() }}
+    <LayButton
+      v-if="dateType === 'datetime'"
+      size="xs"
+      :class="{ 'type-time': currentType === 'time' }"
+      @click="handleToggleTimePanel"
+      >{{ currentType === "date" ? "选择时间" : "选择日期" }}</LayButton
+    >
+    <template v-else>{{ footerValue() }}</template>
   </Footer>
 </template>
diff --git a/packages/component/component/datePickerV2/component/common/Footer.vue b/packages/component/component/datePickerV2/component/common/Footer.vue
index cc29fae1..81a1f1f0 100644
--- a/packages/component/component/datePickerV2/component/common/Footer.vue
+++ b/packages/component/component/datePickerV2/component/common/Footer.vue
@@ -2,25 +2,28 @@
   <div class="layui-laydate-footer">
     <slot></slot>
     <div class="laydate-footer-btns">
-      <span
+      <LayButton
+        size="xs"
         lay-type="now"
         v-if="props.showNow"
         class="laydate-btns-now"
         @click="handelNow"
-        >{{ t("datePicker.now") }}</span
+        >{{ t("datePicker.now") }}</LayButton
       >
-      <span
+      <LayButton
+        size="xs"
         v-if="props.showConfirm"
         lay-type="confirm"
         class="laydate-btns-confirm"
         @click="handelOk"
-        >{{ t("datePicker.confirm") }}</span
+        >{{ t("datePicker.confirm") }}</LayButton
       >
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import LayButton from "../../../button/index.vue";
 import { useI18n } from "../../../../language";
 
 export interface PanelFoot {
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index dd6016ba..21329a8a 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -279,33 +279,30 @@ html #layuicss-laydate {
   padding: 10px;
 }
 
-.layui-laydate-footer .laydate-footer-btns span {
-  border-radius: 0px;
+
+.layui-laydate-footer .layui-btn{
+  padding: 0 10px;
+  white-space: nowrap;
+  transition: all 0.3s;
 }
 
-.layui-laydate-footer .laydate-footer-btns span:first-child {
+.layui-laydate-footer .laydate-footer-btns .layui-btn{
+  border-radius: 0;
+}
+
+.layui-laydate-footer .laydate-footer-btns .layui-btn:first-child {
   border-top-left-radius: var(--global-border-radius);
   border-bottom-left-radius: var(--global-border-radius);
 }
 
-.layui-laydate-footer .laydate-footer-btns span:last-child {
+.layui-laydate-footer .laydate-footer-btns .layui-btn:last-child {
   border-top-right-radius: var(--global-border-radius);
   border-bottom-right-radius: var(--global-border-radius);
+  margin-left: -1px;
 }
 
-.layui-laydate-footer span {
-  display: inline-block;
-  vertical-align: top;
-  height: 26px;
-  line-height: 24px;
-  padding: 0 10px;
-  border: 1px solid #c9c9c9;
-  border-radius: 2px;
-  background-color: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.3s;
+.layui-laydate-footer .layui-btn + .layui-btn {
+  margin-left: 0;
 }
 .layui-laydate-footer span:hover {
   color: var(--global-primary-color);
@@ -325,8 +322,9 @@ html #layuicss-laydate {
   right: 10px;
   top: 10px;
 }
-.laydate-footer-btns span {
-  margin: 0 0 0 -1px;
+
+.layui-laydate-footer .type-time {
+  color: var(--global-primary-color);
 }
 
 /* 年月列表 */
-- 
Gitee


From fb5ae8d1d0eb074d575179a56b224639bdd53dd0 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 18 Sep 2024 11:40:56 +0800
Subject: [PATCH 08/45] feat: add props defaultValue

---
 docs/src/document/zh-CN/components/datePicker.md       | 10 +++++++++-
 .../component/datePickerV2/hook/useDatePicker.ts       | 10 ++++++++--
 packages/component/component/datePickerV2/interface.ts |  3 +++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 316e774b..e780ac3b 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -392,7 +392,7 @@ export default {
 | 属性           | 描述                                         | 类型                                        | 默认值              | 可选值                                              | 版本     |
 | -------------- | -------------------------------------------- | ------------------------------------------- | ------------------- | --------------------------------------------------- | -------- |
 | name           | 原始属性 name                                | `string`                                    | --                  | --                                                  | --       |
-| v-model        | 当前时间                                     | `string` `number` `string[]`                | --                  | --                                                  | --       |
+| v-model        | 当前时间                                     | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>`                | --                  | --                                                  | --       |
 | type           | 选择类型                                     | `string`                                    | `date`              | `date` `datetime` `year` `month` `time` `yearmonth` | --       |
 | disabled       | 是否禁止修改                                 | `boolean`                                   | `false`             | —                                                   | —        |
 | readonly       | `input` 是否只读                             | `boolean`                                   | `false`             | —                                                   | —        |
@@ -408,6 +408,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-value   | `首次未点击` 时，下拉弹窗打开时默认显示的时间，传空为组件首次 `渲染时间`      | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>`                    | --                  | --                                      | `2.19.0` |
 | default-time   | 范围日期 `type=datetime` 时分秒默认时间      | `string` `Array<string>`                    | --                  | 例如`12:30:00`                                      | `2.17.2` |
 | contentStyle   | 内容自定义样式                               | `StyleValue`                                | --                  | --                                                  | --       |
 | contentClass   | 内容自定义 Class                             | `string` `Array<string \| object>` `object` | --                  | --                                                  | --       |
@@ -430,5 +431,12 @@ export default {
 
 :::
 
+```ts
+import type { ConfigType } from "dayjs";
+
+type DatePickerModelValueSingleType = ConfigType
+
+```
+
 ::: previousNext datePicker
 :::
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index fbf2257a..3804e070 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -17,13 +17,19 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
   const initDate = computed<Dayjs | Array<Dayjs>>(() => {
     if (isArray(props.modelValue)) {
       return props.modelValue.map((date: DatePickerModelValueSingleType) => {
-        const value = date || new Date();
+        const value =
+          date ||
+          (props.defaultValue as DatePickerModelValueSingleType) ||
+          new Date();
 
         return normalizeDayjsValue(value, typeMap.value.format);
       });
     } else {
       // 兼容之前的 Year | Month 类型 modelValue可传 `2024` | `11` number类型
-      let value = props.modelValue || new Date();
+      let value =
+        props.modelValue ||
+        (props.defaultValue as DatePickerModelValueSingleType) ||
+        new Date();
       if (
         ["year", "month"].includes(props.type!) &&
         isNumber(props.modelValue) &&
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index 56c2d268..591b13ae 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -41,6 +41,9 @@ export interface DatePickerProps {
   timestamp?: boolean;
   format?: string;
   inputFormat?: string;
+  defaultValue?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
   defaultTime?: string | string[];
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
-- 
Gitee


From 2dd9ba104707cbb9fc7bcb2f6fcc6e0241c5e3d8 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 19 Sep 2024 16:12:54 +0800
Subject: [PATCH 09/45] feat: add yearmonth/month range

---
 .../datePickerV2/component/MonthRange.vue     | 147 ++++++++++++++
 .../datePickerV2/component/common/Date.vue    |  12 +-
 .../component/common/InputBlock.vue           |  10 +-
 .../datePickerV2/component/common/Month.vue   | 180 ++++++++++++------
 .../datePickerV2/component/common/Year.vue    |  63 +++---
 .../datePickerV2/component/interface.ts       |   9 +-
 .../datePickerV2/hook/useDatePicker.ts        |  20 +-
 .../component/datePickerV2/index.less         |  30 ++-
 .../component/datePickerV2/index.vue          |   4 +
 9 files changed, 359 insertions(+), 116 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/MonthRange.vue

diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
new file mode 100644
index 00000000..6b9ebe4c
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import dayjs, { type Dayjs } from "dayjs";
+import { computed, ref, watch } from "vue";
+import type { RangePickerProps } from "./interface";
+
+import { useI18n } from "../../../language";
+
+import LayIcon from "../../icon";
+import Month from "./common/Month.vue";
+import Footer from "./common/Footer.vue";
+
+const props = withDefaults(defineProps<RangePickerProps>(), {});
+const emits = defineEmits(["pick"]);
+
+const { t } = useI18n();
+
+const startDate = ref();
+const endDate = ref();
+const leftDate = ref(dayjs());
+const rightDate = ref(dayjs());
+
+const hoverMonth = ref<Dayjs | undefined>();
+
+watch(
+  () => props.modelValue,
+  () => {
+    const [start, end] = props.modelValue;
+    startDate.value = start;
+    endDate.value = end;
+    leftDate.value = start || dayjs();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => leftDate.value,
+  () => {
+    rightDate.value = leftDate.value.add(1, "year");
+  },
+  { immediate: true }
+);
+
+const classes = computed(() => {
+  return (Date: Dayjs) => {
+    const _endDate = hoverMonth.value || endDate.value;
+
+    return {
+      "layui-this":
+        startDate.value?.isSame(Date, "month") ||
+        endDate.value?.isSame(Date, "month"),
+      "laydate-range-hover":
+        !!(
+          startDate.value &&
+          Date.isSameOrAfter(startDate.value, "month") &&
+          Date.isSameOrBefore(_endDate, "month")
+        ) ||
+        !!(
+          startDate.value &&
+          Date.isSameOrBefore(startDate.value, "month") &&
+          Date.isSameOrAfter(_endDate, "month")
+        ),
+    };
+  };
+});
+
+const handleMonthPick = (date: Dayjs) => {
+  if (!startDate.value || (startDate.value && endDate.value)) {
+    startDate.value = date;
+    endDate.value = undefined;
+  } else if (date.isSameOrBefore(startDate.value, "month")) {
+    endDate.value = startDate.value;
+    startDate.value = date;
+  } else {
+    endDate.value = date;
+  }
+};
+
+const handleMonthHover = (date: Dayjs) => {
+  if (!startDate.value || endDate.value) {
+    hoverMonth.value = undefined;
+    return;
+  }
+
+  hoverMonth.value = date;
+};
+
+const formatValue = () => {
+  // format 正确传 format后的格式，否则传Date对象
+  if (startDate.value && endDate.value) {
+    return [startDate.value, endDate.value].map((date: Dayjs) => {
+      return props.format ? date.format(props.format) : date.toDate();
+    });
+  } else {
+    return [];
+  }
+};
+const handleConfirm = () => {
+  emits("pick", formatValue());
+};
+</script>
+
+<template>
+  <div class="layui-laydate-range">
+    <div class="layui-laydate-range-main">
+      <Month
+        :modelValue="leftDate"
+        :inputDate="leftDate"
+        :classes="classes"
+        @pick="handleMonthPick"
+        @hover-cell="handleMonthHover"
+      >
+        <template #header>
+          <LayIcon
+            type="layui-icon-prev"
+            @click="leftDate = leftDate.subtract(1, 'year')"
+          />
+          <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
+          <LayIcon type="layui-icon-next" style="visibility: hidden" />
+        </template>
+      </Month>
+      <Month
+        :modelValue="rightDate"
+        :inputDate="rightDate"
+        :classes="classes"
+        @pick="handleMonthPick"
+        @hover-cell="handleMonthHover"
+      >
+        <template #header>
+          <LayIcon type="layui-icon-prev" style="visibility: hidden" />
+          <span>
+            {{ leftDate.add(1, "year").year() }}
+            {{ t("datePicker.year") }}</span
+          >
+          <LayIcon
+            type="layui-icon-next"
+            @click="leftDate = leftDate.add(1, 'year')"
+          />
+        </template>
+      </Month>
+    </div>
+    <Footer :showNow="false" @confirm="handleConfirm">
+      {{ startDate?.format(props.inputFormat) }}
+      {{ props.rangeSeparator }}
+      {{ endDate?.format(props.inputFormat) }}
+    </Footer>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index de05467f..8c40ff24 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -85,8 +85,6 @@ const MONTH_NAME = computed(() => [
 watch(
   () => props.modelValue,
   () => {
-    Day.value = dayjs(props.inputDate).startOf("day").valueOf(); //unix
-
     Year.value = dayjs(props.modelValue).year();
     Month.value = dayjs(props.modelValue).month();
 
@@ -97,6 +95,16 @@ watch(
   }
 );
 
+watch(
+  () => props.inputDate,
+  () => {
+    Day.value = dayjs(props.inputDate).startOf("day").valueOf(); //unix
+  },
+  {
+    immediate: true,
+  }
+);
+
 const handleYearMonthChange = (
   calc: "add" | "subtract",
   type: "year" | "month"
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 2e093c3f..21c720bf 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -28,11 +28,10 @@ const classes = computed(() => {
 
 const dateValue = computed(() => {
   if (props.range) {
-    return (props.modelValue as Array<DatePickerModelValueSingleType>).map(
-      (data) => {
-        return normalizeDayjsValue(data, props.format!).format(props.format);
-      }
-    );
+    const modelValue = isArray(props.modelValue) ? props.modelValue : [];
+    return modelValue.map((data) => {
+      return normalizeDayjsValue(data, props.format!).format(props.format);
+    });
   } else {
     if (!props.modelValue) return "";
 
@@ -65,6 +64,7 @@ function onPick(item: string | Date) {
       ref="dropdownRef"
       :disabled="disabled"
       :autoFitMinWidth="false"
+      :click-to-close="false"
       :contentClass="contentClass"
       :contentStyle="contentStyle"
     >
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 9a50c184..007e418d 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -1,51 +1,55 @@
 <template>
   <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+    <div class="layui-laydate-main">
       <div class="layui-laydate-header">
-        <div class="laydate-set-ym" v-if="dateType === 'month'">
-          <span>{{
-            typeof Month !== "string"
-              ? MONTH_NAME[Month]
-              : t("datePicker.selectMonth")
-          }}</span>
-        </div>
-        <template v-else>
-          <lay-icon
-            type="layui-icon-prev"
-            @click="handleYearChange(-1)"
-          ></lay-icon>
-          <div class="laydate-set-ym">
-            <span @click="emits('type-change')">{{ modelValue.year() }}</span>
+        <slot name="header">
+          <div class="laydate-set-ym" v-if="dateType === 'month'">
+            <span>{{
+              typeof Month !== "string"
+                ? MONTH_NAME[Month]
+                : t("datePicker.selectMonth")
+            }}</span>
           </div>
-          <lay-icon
-            type="layui-icon-next"
-            @click="handleYearChange(1)"
-          ></lay-icon>
-        </template>
+          <template v-else>
+            <lay-icon
+              type="layui-icon-prev"
+              @click="handleYearChange(-1)"
+            ></lay-icon>
+            <div class="laydate-set-ym">
+              <span @click="emits('type-change')">{{ modelValue.year() }}</span>
+            </div>
+            <lay-icon
+              type="layui-icon-next"
+              @click="handleYearChange(1)"
+            ></lay-icon>
+          </template>
+        </slot>
+      </div>
+
+      <div class="layui-laydate-content" style="height: 220px">
+        <ul class="layui-laydate-list laydate-month-list">
+          <li
+            v-for="(item, month) of MONTH_NAME"
+            :key="item"
+            :class="{
+              'layui-this': isActive(month, currentDate),
+              'layui-laydate-current': isActive(month, dayjs()),
+              'layui-disabled': cellDisabled(month),
+              ...classes?.(fullMonthDay(month)),
+            }"
+            @click="handleMonthClick(month)"
+            @mouseenter="handleMonthMouseenter(month)"
+          >
+            {{ item.slice(0, 3) }}
+          </li>
+        </ul>
       </div>
-    </div>
-    <div class="layui-laydate-content" style="height: 220px">
-      <ul class="layui-laydate-list laydate-month-list">
-        <li
-          v-for="item of MONTH_NAME"
-          :key="item"
-          :class="{
-            'layui-this': MONTH_NAME.indexOf(item) === Month,
-            'layui-laydate-current':
-              MONTH_NAME.indexOf(item) === dayjs().month(),
-            'layui-disabled': cellDisabled(item),
-          }"
-          @click="handleMonthClick(item)"
-        >
-          {{ item.slice(0, 3) }}
-        </li>
-      </ul>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import dayjs from "dayjs";
+import dayjs, { type Dayjs } from "dayjs";
 import { type BasePanelProps } from "../interface";
 import { DATE_PICKER_CONTEXT } from "../../interface";
 
@@ -58,11 +62,14 @@ defineOptions({
   name: "MonthPanel",
 });
 
-const props = withDefaults(defineProps<BasePanelProps>(), {});
-const emits = defineEmits(["pick", "year-change", "type-change"]);
+const props = withDefaults(defineProps<BasePanelProps>(), {
+  classes: () => ({}),
+});
+const emits = defineEmits(["pick", "year-change", "type-change", "hover-cell"]);
 
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
+const currentDate = ref();
 const Month = ref();
 
 const { t } = useI18n();
@@ -84,34 +91,79 @@ const MONTH_NAME = computed(() => [
 
 // 判断单元格是否可以点击(禁用)
 const cellDisabled = computed(() => {
-  return (item: string) => {
-    const month = MONTH_NAME.value.indexOf(item);
-    if (
-      DatePickerContext.min &&
-      month < dayjs(DatePickerContext.min).month() + 1
-    ) {
-      return true;
-    }
-    if (
-      DatePickerContext.max &&
-      month > dayjs(DatePickerContext.max).month() + 1
-    ) {
-      return true;
-    }
-    return false;
+  if (props.dateType === "month") {
+    return (month: number) => {
+      if (
+        DatePickerContext.min &&
+        month < dayjs(DatePickerContext.min).month()
+      ) {
+        return true;
+      }
+      if (
+        DatePickerContext.max &&
+        month > dayjs(DatePickerContext.max).month()
+      ) {
+        return true;
+      }
+      return false;
+    };
+  } else {
+    return (month: number) => {
+      const fullMonth = fullMonthDay(month);
+
+      if (
+        DatePickerContext.min &&
+        fullMonth.isSameOrBefore(DatePickerContext.min, "month")
+      ) {
+        return true;
+      }
+
+      if (
+        DatePickerContext.max &&
+        fullMonth.isSameOrAfter(DatePickerContext.max, "month")
+      ) {
+        return true;
+      }
+
+      return false;
+    };
+  }
+});
+
+const isActive = computed(() => {
+  return (month: number, value: Dayjs) => {
+    const fullMonth = fullMonthDay(month);
+
+    return value.isSame(fullMonth, "month");
   };
 });
 
 // 点击月份
-const handleMonthClick = (item: string) => {
-  if (cellDisabled.value(item)) {
+const handleMonthClick = (month: number) => {
+  if (cellDisabled.value(month)) {
     return;
   }
 
-  const month = MONTH_NAME.value.indexOf(item);
+  const fullMonth = fullMonthDay(month);
 
   Month.value = month;
-  emits("pick", month);
+  currentDate.value = fullMonth;
+
+  emits("pick", DatePickerContext.range ? fullMonth : month);
+};
+
+const handleMonthMouseenter = (month: number) => {
+  if (cellDisabled.value(month) || !DatePickerContext.range) {
+    return;
+  }
+
+  const fullMonth = fullMonthDay(month);
+
+  emits("hover-cell", fullMonth);
+};
+
+const fullMonthDay = (month: number) => {
+  return props.modelValue.startOf("year").month(month);
 };
 
 watch(
@@ -124,6 +176,16 @@ watch(
   }
 );
 
+watch(
+  () => props.inputDate,
+  () => {
+    currentDate.value = props.inputDate;
+  },
+  {
+    immediate: true,
+  }
+);
+
 const handleYearChange = (val: number) => {
   emits("year-change", props.modelValue.year() + val);
 };
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index a37ae3f8..11eb696f 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -1,41 +1,42 @@
 <template>
   <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-      <div class="layui-laydate-year-panel-header">
+    <div class="layui-laydate-main">
+      <div class="layui-laydate-header">
+        <lay-icon
+          type="layui-icon-prev"
+          @click="currentDate -= DatePickerContext.yearPage"
+        ></lay-icon>
         <div class="laydate-set-ym">
-          <lay-icon
-            type="layui-icon-left"
-            @click="currentDate -= DatePickerContext.yearPage"
-          ></lay-icon>
           <span class="laydate-time-text">
             {{ yearRange.join(" - ") }}
           </span>
-          <lay-icon
-            type="layui-icon-right"
-            @click="currentDate += DatePickerContext.yearPage"
-          ></lay-icon>
         </div>
+        <lay-icon
+          type="layui-icon-next"
+          @click="currentDate += DatePickerContext.yearPage"
+        ></lay-icon>
+      </div>
+
+      <div
+        class="layui-laydate-content"
+        style="height: 220px; overflow-y: auto"
+        ref="ScrollRef"
+      >
+        <ul class="layui-laydate-list laydate-year-list">
+          <li
+            v-for="item of yearList"
+            :key="item"
+            :class="{
+              'layui-this': currentYear === item,
+              'layui-laydate-current': item === dayjs().year(),
+              'layui-disabled': cellDisabled(item),
+            }"
+            @click="handleYearClick(item)"
+          >
+            {{ item }}
+          </li>
+        </ul>
       </div>
-    </div>
-    <div
-      class="layui-laydate-content"
-      style="height: 220px; overflow-y: auto"
-      ref="ScrollRef"
-    >
-      <ul class="layui-laydate-list laydate-year-list">
-        <li
-          v-for="item of yearList"
-          :key="item"
-          :class="{
-            'layui-this': currentYear === item,
-            'layui-laydate-current': item === dayjs().year(),
-            'layui-disabled': cellDisabled(item),
-          }"
-          @click="handleYearClick(item)"
-        >
-          {{ item }}
-        </li>
-      </ul>
     </div>
   </div>
 </template>
@@ -82,8 +83,6 @@ watch(
   }
 );
 
-const { t } = useI18n();
-
 // 判断单元格是否可以点击(禁用)
 const cellDisabled = computed(() => {
   return (item: number) => {
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index f628ccbe..99b77225 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -3,10 +3,15 @@ import type { DatePickerType, PanelPickerProps } from "../interface";
 
 export interface BasePanelProps {
   modelValue: Dayjs;
-  inputDate: Dayjs;
-  dateType: DatePickerType;
+  inputDate?: Dayjs;
+  dateType?: DatePickerType;
+  classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
 export interface UniquePickerProps extends PanelPickerProps {
   modelValue: Dayjs;
 }
+
+export interface RangePickerProps extends PanelPickerProps {
+  modelValue: Array<Dayjs>;
+}
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 3804e070..f3e378b0 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -9,14 +9,16 @@ import { type Dayjs } from "dayjs";
 
 import { computed } from "vue";
 import DatePicker from "../component/DatePicker.vue";
+import MonthRange from "../component/MonthRange.vue";
 
 import { normalizeDayjsValue } from "../util";
-import { isArray, isNumber, isString } from "../../../utils";
+import { isArray, isNumber } from "../../../utils";
 
 export const useDatePicker = (props: RequiredDatePickerProps) => {
   const initDate = computed<Dayjs | Array<Dayjs>>(() => {
-    if (isArray(props.modelValue)) {
-      return props.modelValue.map((date: DatePickerModelValueSingleType) => {
+    if (props.range) {
+      const modelValue = isArray(props.modelValue) ? props.modelValue : [];
+      return modelValue.map((date: DatePickerModelValueSingleType) => {
         const value =
           date ||
           (props.defaultValue as DatePickerModelValueSingleType) ||
@@ -39,7 +41,10 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
       }
 
       // 处理CustomParseFormat插件可能造成解析Date, number, '', undefined...错误
-      return normalizeDayjsValue(value, typeMap.value.format);
+      return normalizeDayjsValue(
+        value as DatePickerModelValueSingleType,
+        typeMap.value.format
+      );
     }
   });
 
@@ -56,8 +61,11 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
     datetime: { component: DatePicker, format: "YYYY-MM-DD HH:mm:ss" },
     date: { component: DatePicker, format: "YYYY-MM-DD" },
     year: { component: DatePicker, format: "YYYY" },
-    month: { component: DatePicker, format: "M" },
-    yearmonth: { component: DatePicker, format: "YYYY-MM" },
+    month: { component: props.range ? MonthRange : DatePicker, format: "M" },
+    yearmonth: {
+      component: props.range ? MonthRange : DatePicker,
+      format: "YYYY-MM",
+    },
     time: { component: DatePicker, format: "HH:mm:ss" },
   };
 
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index 21329a8a..a1596cde 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -158,15 +158,20 @@ html #layuicss-laydate {
 /* 头部结构 */
 .layui-laydate-header {
   position: relative;
-  line-height: 30px;
-  padding: 10px 70px 5px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  // line-height: 30px;
+  // padding: 10px 70px 5px;
 }
 .layui-laydate-header * {
   vertical-align: bottom;
 }
 .layui-laydate-header i {
-  position: absolute;
-  top: 10px;
+  // position: absolute;
+  // top: 10px;
   padding: 0 5px;
   color: #999;
   font-size: 12px;
@@ -273,8 +278,9 @@ html #layuicss-laydate {
 
 /* 底部结构 */
 .layui-laydate-footer {
-  position: relative;
-  height: 46px;
+  // position: relative;
+  // height: 46px;
+  display: flex;
   line-height: 26px;
   padding: 10px;
 }
@@ -318,9 +324,10 @@ html #layuicss-laydate {
   padding-left: 0;
 }
 .laydate-footer-btns {
-  position: absolute;
-  right: 10px;
-  top: 10px;
+  margin-left: auto;
+  // position: absolute;
+  // right: 10px;
+  // top: 10px;
 }
 
 .layui-laydate-footer .type-time {
@@ -559,7 +566,7 @@ html #layuicss-laydate {
 .laydate-range-hover {
   background-color: var(--global-neutral-color-2) !important;
 }
-.layui-laydate-content .layui-disabled:hover {
+.layui-laydate-content .layui-disabled:not(.layui-laydate-current,.layui-this):hover {
   background-color: transparent !important;
 }
 
@@ -596,6 +603,9 @@ html #layuicss-laydate {
   }
 }
 .layui-laydate-range {
+  &-main {
+    display: flex;
+  }
   .laydate-set-ym {
     overflow: visible;
     white-space: nowrap;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index 6c551081..699844f7 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -2,6 +2,8 @@
 import "./index.less";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
+import IsSameOrBefore from "dayjs/plugin/IsSameOrBefore";
+import IsSameOrAfter from "dayjs/plugin/IsSameOrAfter";
 import objectSupport from "dayjs/plugin/objectSupport";
 import {
   DATE_PICKER_CONTEXT,
@@ -15,6 +17,8 @@ import InputBlock from "./component/common/InputBlock.vue";
 import { computed, provide } from "vue";
 
 dayjs.extend(customParseFormat);
+dayjs.extend(IsSameOrBefore);
+dayjs.extend(IsSameOrAfter);
 dayjs.extend(objectSupport);
 
 export type DatePickerProps = _DatePickerProps;
-- 
Gitee


From 56ced4f688db0a6e5256cd3e3ae83f96e741d212 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 19 Sep 2024 19:00:02 +0800
Subject: [PATCH 10/45] feat: add year range

---
 .../datePickerV2/component/YearRange.vue      | 152 ++++++++++++++++++
 .../datePickerV2/component/common/Year.vue    |  43 +++--
 .../datePickerV2/hook/useDatePicker.ts        |   3 +-
 3 files changed, 181 insertions(+), 17 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/YearRange.vue

diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePickerV2/component/YearRange.vue
new file mode 100644
index 00000000..2c4bba02
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/YearRange.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import dayjs, { type Dayjs } from "dayjs";
+import { computed, ref, watch } from "vue";
+import type { RangePickerProps } from "./interface";
+
+import { useI18n } from "../../../language";
+
+import LayIcon from "../../icon";
+import Year from "./common/Year.vue";
+import Footer from "./common/Footer.vue";
+
+const props = withDefaults(defineProps<RangePickerProps>(), {});
+const emits = defineEmits(["pick"]);
+
+const { t } = useI18n();
+
+const startDate = ref();
+const endDate = ref();
+const leftDate = ref(dayjs());
+const rightDate = ref(dayjs());
+
+const hoverYear = ref<Dayjs | undefined>();
+
+watch(
+  () => props.modelValue,
+  () => {
+    const [start, end] = props.modelValue;
+    startDate.value = start;
+    endDate.value = end;
+    leftDate.value = start || dayjs();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => leftDate.value,
+  () => {
+    rightDate.value = leftDate.value.add(props.yearPage!, "year");
+  },
+  { immediate: true }
+);
+
+const classes = computed(() => {
+  return (Date: Dayjs) => {
+    const _endDate = hoverYear.value || endDate.value;
+
+    return {
+      "layui-this":
+        startDate.value?.isSame(Date, "year") ||
+        endDate.value?.isSame(Date, "year"),
+      "laydate-range-hover":
+        !!(
+          startDate.value &&
+          Date.isSameOrAfter(startDate.value, "year") &&
+          Date.isSameOrBefore(_endDate, "year")
+        ) ||
+        !!(
+          startDate.value &&
+          Date.isSameOrBefore(startDate.value, "year") &&
+          Date.isSameOrAfter(_endDate, "year")
+        ),
+    };
+  };
+});
+
+const handleYearPick = (date: Dayjs) => {
+  if (!startDate.value || (startDate.value && endDate.value)) {
+    startDate.value = date;
+    endDate.value = undefined;
+  } else if (date.isSameOrBefore(startDate.value, "year")) {
+    endDate.value = startDate.value;
+    startDate.value = date;
+  } else {
+    endDate.value = date;
+  }
+};
+
+const handleYearHover = (date: Dayjs) => {
+  if (!startDate.value || endDate.value) {
+    hoverYear.value = undefined;
+    return;
+  }
+
+  hoverYear.value = date;
+};
+
+const formatValue = () => {
+  // format 正确传 format后的格式，否则传Date对象
+  if (startDate.value && endDate.value) {
+    return [startDate.value, endDate.value].map((date: Dayjs) => {
+      return props.format ? date.format(props.format) : date.toDate();
+    });
+  } else {
+    return [];
+  }
+};
+const handleConfirm = () => {
+  emits("pick", formatValue());
+};
+</script>
+
+<template>
+  <div class="layui-laydate-range">
+    <div class="layui-laydate-range-main">
+      <Year
+        :modelValue="leftDate"
+        :inputDate="leftDate"
+        :classes="classes"
+        @pick="handleYearPick"
+        @hover-cell="handleYearHover"
+      >
+        <template #header="{ yearList }">
+          <LayIcon
+            type="layui-icon-prev"
+            @click="leftDate = leftDate.subtract(yearPage!, 'year')"
+          />
+          <div class="laydate-set-ym">
+            <span class="laydate-time-text">
+              {{ yearList.join(" - ") }}
+            </span>
+          </div>
+          <LayIcon type="layui-icon-next" style="visibility: hidden" />
+        </template>
+      </Year>
+      <Year
+        :modelValue="rightDate"
+        :inputDate="rightDate"
+        :classes="classes"
+        @pick="handleYearPick"
+        @hover-cell="handleYearHover"
+      >
+        <template #header="{ yearList }">
+          <LayIcon type="layui-icon-prev" style="visibility: hidden" />
+          <div class="laydate-set-ym">
+            <span class="laydate-time-text">
+              {{ yearList.join(" - ") }}
+            </span>
+          </div>
+          <LayIcon
+            type="layui-icon-next"
+            @click="leftDate = leftDate.add(yearPage!, 'year')"
+          />
+        </template>
+      </Year>
+    </div>
+    <Footer :showNow="false" @confirm="handleConfirm">
+      {{ startDate?.format(props.inputFormat) }}
+      {{ props.rangeSeparator }}
+      {{ endDate?.format(props.inputFormat) }}
+    </Footer>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 11eb696f..c6e2d6c4 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -2,19 +2,21 @@
   <div class="layui-laydate">
     <div class="layui-laydate-main">
       <div class="layui-laydate-header">
-        <lay-icon
-          type="layui-icon-prev"
-          @click="currentDate -= DatePickerContext.yearPage"
-        ></lay-icon>
-        <div class="laydate-set-ym">
-          <span class="laydate-time-text">
-            {{ yearRange.join(" - ") }}
-          </span>
-        </div>
-        <lay-icon
-          type="layui-icon-next"
-          @click="currentDate += DatePickerContext.yearPage"
-        ></lay-icon>
+        <slot name="header" :yearList="yearRange">
+          <lay-icon
+            type="layui-icon-prev"
+            @click="currentDate -= DatePickerContext.yearPage"
+          ></lay-icon>
+          <div class="laydate-set-ym">
+            <span class="laydate-time-text">
+              {{ yearRange.join(" - ") }}
+            </span>
+          </div>
+          <lay-icon
+            type="layui-icon-next"
+            @click="currentDate += DatePickerContext.yearPage"
+          ></lay-icon>
+        </slot>
       </div>
 
       <div
@@ -30,8 +32,10 @@
               'layui-this': currentYear === item,
               'layui-laydate-current': item === dayjs().year(),
               'layui-disabled': cellDisabled(item),
+              ...classes?.(dayjs().year(item)),
             }"
             @click="handleYearClick(item)"
+            @mouseenter="handleYearMouseenter(item)"
           >
             {{ item }}
           </li>
@@ -48,7 +52,6 @@ import dayjs from "dayjs";
 import { computed, ref, watch, inject } from "vue";
 
 import LayIcon from "../../../icon";
-import { useI18n } from "../../../../language";
 import { DATE_PICKER_CONTEXT } from "../../interface";
 import { getYears } from "../../day";
 
@@ -57,7 +60,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<BasePanelProps>(), {});
-const emits = defineEmits(["pick"]);
+const emits = defineEmits(["pick", "hover-cell"]);
 
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
@@ -103,6 +106,14 @@ const handleYearClick = (item: number) => {
   }
 
   currentYear.value = item;
-  emits("pick", item);
+  emits("pick", DatePickerContext.range ? props.modelValue.year(item) : item);
+};
+
+const handleYearMouseenter = (item: number) => {
+  if (cellDisabled.value(item) || !DatePickerContext.range) {
+    return;
+  }
+
+  emits("hover-cell", dayjs().year(item));
 };
 </script>
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index f3e378b0..f63c969e 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -10,6 +10,7 @@ import { type Dayjs } from "dayjs";
 import { computed } from "vue";
 import DatePicker from "../component/DatePicker.vue";
 import MonthRange from "../component/MonthRange.vue";
+import YearRange from "../component/YearRange.vue";
 
 import { normalizeDayjsValue } from "../util";
 import { isArray, isNumber } from "../../../utils";
@@ -60,7 +61,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
   const TYPE_MAP: TypeMap = {
     datetime: { component: DatePicker, format: "YYYY-MM-DD HH:mm:ss" },
     date: { component: DatePicker, format: "YYYY-MM-DD" },
-    year: { component: DatePicker, format: "YYYY" },
+    year: { component: props.range ? YearRange : DatePicker, format: "YYYY" },
     month: { component: props.range ? MonthRange : DatePicker, format: "M" },
     yearmonth: {
       component: props.range ? MonthRange : DatePicker,
-- 
Gitee


From 15f10266c1c4d944077626dc4fac4db3127b8441 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 19 Sep 2024 19:16:47 +0800
Subject: [PATCH 11/45] docs: update

---
 docs/src/document/zh-CN/components/datePicker.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index e780ac3b..7fbae553 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -412,8 +412,8 @@ export default {
 | default-time   | 范围日期 `type=datetime` 时分秒默认时间      | `string` `Array<string>`                    | --                  | 例如`12:30:00`                                      | `2.17.2` |
 | contentStyle   | 内容自定义样式                               | `StyleValue`                                | --                  | --                                                  | --       |
 | contentClass   | 内容自定义 Class                             | `string` `Array<string \| object>` `object` | --                  | --                                                  | --       |
-| yearPage       | 年份选择器每页年份的个数                     | `2.18.4`                                    | `number`            | `15`                                                | --       |
-| yearStep       | 年份选择器年份的步进值                       | `2.18.4`                                    | `number`            | `1`                                                 | --       |
+| yearPage       | 年份选择器每页年份的个数                     | `2.19.0`                                    | `number`            | `15`                                                | --       |
+| yearStep       | 年份选择器年份的步进值                       | `2.19.0`                                    | `number`            | `1`                                                 | --       |
 
 :::
 
-- 
Gitee


From 0a2179d41bcdd94e5c0e9f7fa44037baf867eb23 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 20 Sep 2024 11:30:29 +0800
Subject: [PATCH 12/45] feat: yearmonth/month year change

---
 .../datePickerV2/component/MonthRange.vue     | 43 ++++++++++++++++---
 .../datePickerV2/component/common/Month.vue   |  2 +-
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index 6b9ebe4c..83c50f54 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -6,7 +6,9 @@ import type { RangePickerProps } from "./interface";
 import { useI18n } from "../../../language";
 
 import LayIcon from "../../icon";
+import LayDropdown from "../../dropdown";
 import Month from "./common/Month.vue";
+import Year from "./common/Year.vue";
 import Footer from "./common/Footer.vue";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
@@ -19,6 +21,9 @@ const endDate = ref();
 const leftDate = ref(dayjs());
 const rightDate = ref(dayjs());
 
+const yearLeftRef = ref<InstanceType<typeof LayDropdown>>();
+const yearRightRef = ref<InstanceType<typeof LayDropdown>>();
+
 const hoverMonth = ref<Dayjs | undefined>();
 
 watch(
@@ -84,6 +89,16 @@ const handleMonthHover = (date: Dayjs) => {
   hoverMonth.value = date;
 };
 
+const handleLeftYearChange = (year: Dayjs) => {
+  leftDate.value = year;
+  yearLeftRef.value?.hide();
+};
+
+const handleRightYearChange = (year: Dayjs) => {
+  leftDate.value = year.subtract(1, "year");
+  yearRightRef.value?.hide();
+};
+
 const formatValue = () => {
   // format 正确传 format后的格式，否则传Date对象
   if (startDate.value && endDate.value) {
@@ -114,8 +129,15 @@ const handleConfirm = () => {
             type="layui-icon-prev"
             @click="leftDate = leftDate.subtract(1, 'year')"
           />
-          <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
-          <LayIcon type="layui-icon-next" style="visibility: hidden" />
+
+          <LayDropdown ref="yearLeftRef">
+            <div class="laydate-set-ym">
+              <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
+            </div>
+            <template #content>
+              <Year :modelValue="leftDate" @pick="handleLeftYearChange"></Year>
+            </template>
+          </LayDropdown>
         </template>
       </Month>
       <Month
@@ -126,11 +148,18 @@ const handleConfirm = () => {
         @hover-cell="handleMonthHover"
       >
         <template #header>
-          <LayIcon type="layui-icon-prev" style="visibility: hidden" />
-          <span>
-            {{ leftDate.add(1, "year").year() }}
-            {{ t("datePicker.year") }}</span
-          >
+          <LayDropdown ref="yearRightRef">
+            <div class="laydate-set-ym">
+              <span>
+                {{ leftDate.add(1, "year").year() }}
+                {{ t("datePicker.year") }}</span
+              >
+            </div>
+            <template #content>
+              <Year :modelValue="leftDate" @pick="handleRightYearChange"></Year>
+            </template>
+          </LayDropdown>
+
           <LayIcon
             type="layui-icon-next"
             @click="leftDate = leftDate.add(1, 'year')"
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 007e418d..6dfb5c0f 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -4,7 +4,7 @@
       <div class="layui-laydate-header">
         <slot name="header">
           <div class="laydate-set-ym" v-if="dateType === 'month'">
-            <span>{{
+            <span class="laydate-time-text">{{
               typeof Month !== "string"
                 ? MONTH_NAME[Month]
                 : t("datePicker.selectMonth")
-- 
Gitee


From f512efba005050843b2c3d060a25a634f2c193e8 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 20 Sep 2024 16:34:33 +0800
Subject: [PATCH 13/45] fix: normal mode all type min/max error

---
 .../datePickerV2/component/DatePicker.vue     |  6 ++-
 .../component/common/DateContent.vue          |  6 ++-
 .../datePickerV2/component/common/Time.vue    | 38 ++++++++++++++-----
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 46697c98..5743d27d 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -134,8 +134,12 @@ const footerValue = () => {
 </script>
 
 <template>
+  <!-- 当datetime模式下 切换为time时，只通过css隐藏date模块，不销毁date模块。 -->
+  <!-- 防止date内部inputDate watch 因重新渲染而再次执行。 -->
+  <!-- 再次执行会导致在非simple模式下切换日期重新赋值datepicker.modelValue -->
   <Date
-    v-if="currentType === 'date'"
+    v-if="currentType === 'date' || currentType === 'time'"
+    v-show="currentType === 'date'"
     :modelValue="currentData"
     :inputDate="inputDate"
     :dateType="dateType"
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePickerV2/component/common/DateContent.vue
index 57c32064..92ee1dc6 100644
--- a/packages/component/component/datePickerV2/component/common/DateContent.vue
+++ b/packages/component/component/datePickerV2/component/common/DateContent.vue
@@ -96,15 +96,17 @@ const cellDisabled = computed(() => {
     if (item.type !== "current" && DatePickerContext.range) {
       return true;
     }
+
     if (
       DatePickerContext.min &&
-      dayjs(item.value).isBefore(dayjs(DatePickerContext.min))
+      dayjs(item.value).isBefore(dayjs(DatePickerContext.min), "day")
     ) {
       return true;
     }
+
     if (
       DatePickerContext.max &&
-      dayjs(item.value).isAfter(dayjs(DatePickerContext.max))
+      dayjs(item.value).isAfter(dayjs(DatePickerContext.max), "day")
     ) {
       return true;
     }
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index 2c0dd549..89454a25 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -25,7 +25,7 @@
                 :key="it"
                 :class="{
                   num: true,
-                  'layui-this': index == hms[item.type as keyof HmsType],
+                  'layui-this': index == hms[item.type],
                   'layui-disabled': cellDisabled(item.type, index),
                 }"
               >
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import dayjs, { type Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import { inject, onMounted, ref, nextTick, watch, computed } from "vue";
 
 import type { BasePanelProps } from "../interface";
@@ -64,7 +64,10 @@ const emits = defineEmits(["pick"]);
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 const { t } = useI18n();
 
-const els = [
+const els: Array<{
+  count: number;
+  type: keyof typeof hmsMap;
+}> = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
   { count: 60, type: "ss" },
@@ -75,21 +78,35 @@ const hms = ref<HmsType>({
   ss: props.modelValue.second(),
 });
 
+const hmsMap = {
+  hh: "hour",
+  mm: "minute",
+  ss: "second",
+} as const;
+
 const cellDisabled = computed(() => {
-  return (type?: string, value?: number) => {
+  return (type: keyof typeof hmsMap, value: number) => {
     const haveValue = typeof value !== "undefined";
-    const toDay = dayjs().format("YYY-MM-DD");
     const _hms: Record<string, number> = {
       hh: haveValue ? hms.value.hh : dayjs().hour(),
       mm: haveValue ? hms.value.mm : dayjs().minute(),
       ss: haveValue ? hms.value.ss : dayjs().second(),
     };
     haveValue && (_hms[type!] = value);
-    const time = `${_hms.hh}:${_hms.mm}:${_hms.ss}`;
+
+    const currentDate = props.modelValue
+      .startOf("day")
+      .hour(_hms.hh)
+      .minute(_hms.mm)
+      .second(_hms.ss);
+
+    const diffType = hmsMap[type] as (typeof hmsMap)[keyof typeof hmsMap];
+
     if (
       DatePickerContext.min &&
-      dayjs(`${toDay} ${time}`).isBefore(
-        dayjs(`${toDay} ${DatePickerContext.min}`)
+      currentDate.isBefore(
+        dayjs(DatePickerContext.min, DatePickerContext.format),
+        diffType
       )
     ) {
       return true;
@@ -97,8 +114,9 @@ const cellDisabled = computed(() => {
 
     if (
       DatePickerContext.max &&
-      dayjs(`${toDay} ${time}`).isAfter(
-        dayjs(`${toDay} ${DatePickerContext.max}`)
+      currentDate.isAfter(
+        dayjs(DatePickerContext.max, DatePickerContext.format),
+        diffType
       )
     ) {
       return true;
-- 
Gitee


From 6ae91ca7caa346e46b533ec5de03ff05166d63f2 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 20 Sep 2024 18:39:25 +0800
Subject: [PATCH 14/45] feat: add time range

---
 .../datePickerV2/component/TimeRange.vue      | 90 +++++++++++++++++++
 .../datePickerV2/component/common/Time.vue    |  8 +-
 .../datePickerV2/hook/useDatePicker.ts        |  6 +-
 3 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/TimeRange.vue

diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePickerV2/component/TimeRange.vue
new file mode 100644
index 00000000..e4823be1
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/TimeRange.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import dayjs, { type Dayjs } from "dayjs";
+import { ref, watch } from "vue";
+import type { RangePickerProps } from "./interface";
+
+import { useI18n } from "../../../language";
+
+import Time from "./common/Time.vue";
+import Footer from "./common/Footer.vue";
+
+const props = withDefaults(defineProps<RangePickerProps>(), {});
+const emits = defineEmits(["pick"]);
+
+const { t } = useI18n();
+
+const startDate = ref();
+const endDate = ref();
+
+watch(
+  () => props.modelValue,
+  () => {
+    const [start, end] = props.modelValue;
+    startDate.value = start || dayjs();
+    endDate.value = end || dayjs().add(1, "hour");
+  },
+  { immediate: true }
+);
+
+const handleLeftTimePick = (date: Dayjs) => {
+  if (date.isSameOrAfter(endDate.value)) {
+    startDate.value = endDate.value;
+    endDate.value = date;
+  } else {
+    startDate.value = date;
+  }
+};
+
+const handleRightTimePick = (date: Dayjs) => {
+  if (date.isSameOrBefore(startDate.value)) {
+    endDate.value = startDate.value;
+    startDate.value = date;
+  } else {
+    endDate.value = date;
+  }
+};
+
+const formatValue = () => {
+  // format 正确传 format后的格式，否则传Date对象
+  if (startDate.value && endDate.value) {
+    return [startDate.value, endDate.value].map((date: Dayjs) => {
+      return props.format ? date.format(props.format) : date.toDate();
+    });
+  } else {
+    return [];
+  }
+};
+const handleConfirm = () => {
+  emits("pick", formatValue());
+};
+</script>
+
+<template>
+  <div class="layui-laydate-range">
+    <div class="layui-laydate-range-main">
+      <Time
+        :modelValue="startDate"
+        :inputDate="startDate"
+        @pick="handleLeftTimePick"
+      >
+        <template #header>
+          <span class="laydate-time-text">{{ t("datePicker.startTime") }}</span>
+        </template>
+      </Time>
+      <Time
+        :modelValue="endDate"
+        :inputDate="endDate"
+        @pick="handleRightTimePick"
+      >
+        <template #header>
+          <span class="laydate-time-text">{{ t("datePicker.endTime") }}</span>
+        </template>
+      </Time>
+    </div>
+    <Footer :showNow="false" @confirm="handleConfirm">
+      {{ startDate?.format(props.inputFormat) }}
+      {{ props.rangeSeparator }}
+      {{ endDate?.format(props.inputFormat) }}
+    </Footer>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index 89454a25..b9cf11b6 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -3,9 +3,11 @@
     <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
-          <span class="laydate-time-text">{{
-            t("datePicker.selectTime")
-          }}</span>
+          <slot name="header">
+            <span class="laydate-time-text">{{
+              t("datePicker.selectTime")
+            }}</span>
+          </slot>
         </div>
       </div>
       <div class="layui-laydate-content" style="height: 210px">
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index f63c969e..45e1135f 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -9,6 +9,7 @@ import { type Dayjs } from "dayjs";
 
 import { computed } from "vue";
 import DatePicker from "../component/DatePicker.vue";
+import TimeRange from "../component/TimeRange.vue";
 import MonthRange from "../component/MonthRange.vue";
 import YearRange from "../component/YearRange.vue";
 
@@ -67,7 +68,10 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
       component: props.range ? MonthRange : DatePicker,
       format: "YYYY-MM",
     },
-    time: { component: DatePicker, format: "HH:mm:ss" },
+    time: {
+      component: props.range ? TimeRange : DatePicker,
+      format: "HH:mm:ss",
+    },
   };
 
   const renderComponentProps = computed<DatePickerContextType>(() => {
-- 
Gitee


From 9403ebb419070ce4c92eb2e09a6c45222748039e Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Mon, 23 Sep 2024 19:19:21 +0800
Subject: [PATCH 15/45] feat: add date/datetime range

---
 .../datePickerV2/component/DateRange.vue      | 363 ++++++++++++++++++
 .../datePickerV2/component/common/Date.vue    |   2 +-
 .../component/common/DateContent.vue          | 110 +-----
 .../datePickerV2/component/common/Time.vue    |   2 +-
 .../datePickerV2/hook/useDatePicker.ts        |  11 +-
 .../component/datePickerV2/index.less         |   1 +
 6 files changed, 389 insertions(+), 100 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/DateRange.vue

diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
new file mode 100644
index 00000000..bfd628dd
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import dayjs, { type Dayjs } from "dayjs";
+import { computed, ref, watch } from "vue";
+import type { RangePickerProps } from "./interface";
+
+import { useI18n } from "../../../language";
+import { setDateList } from "../day";
+
+import LayIcon from "../../icon";
+import LayDropdown from "../../dropdown";
+import DateContent from "./common/DateContent.vue";
+import Time from "./common/Time.vue";
+import Year from "./common/Year.vue";
+import Month from "./common/Month.vue";
+import Footer from "./common/Footer.vue";
+
+const props = withDefaults(defineProps<RangePickerProps>(), {});
+const emits = defineEmits(["pick"]);
+
+const { t } = useI18n();
+
+const startDate = ref();
+const endDate = ref();
+const leftDate = ref(dayjs().startOf("day"));
+const rightDate = ref(dayjs().startOf("day").add(1, "month"));
+
+const hoverDate = ref<Dayjs | null>();
+
+type DropdownRef = InstanceType<typeof LayDropdown>;
+
+const yearLeftRef = ref<DropdownRef>();
+const yearRightRef = ref<DropdownRef>();
+const monthLeftRef = ref<DropdownRef>();
+const monthRightRef = ref<DropdownRef>();
+const timeLeftRef = ref<DropdownRef>();
+const timeRightRef = ref<DropdownRef>();
+
+const leftDataList = computed(() => {
+  return setDateList(leftDate.value.year(), leftDate.value.month()) || [];
+});
+
+const rightDataList = computed(() => {
+  return setDateList(rightDate.value.year(), rightDate.value.month()) || [];
+});
+
+const MONTH_NAME = computed(() => [
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
+]);
+
+watch(
+  () => props.modelValue,
+  () => {
+    const [start, end] = props.modelValue;
+    startDate.value = start;
+    endDate.value = end;
+    leftDate.value = start || leftDate.value;
+    rightDate.value = end || rightDate.value;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => leftDate.value,
+  () => {
+    const old = rightDate.value.clone();
+    rightDate.value = leftDate.value
+      .add(1!, "month")
+      .set("hour", old.hour())
+      .set("minute", old.minute())
+      .set("second", old.second());
+  }
+);
+
+const classes = computed(() => {
+  return (item: any) => {
+    const Date = dayjs(item.value);
+    const _endDate = endDate.value || hoverDate.value;
+
+    return {
+      "layui-this":
+        startDate.value?.startOf("day").valueOf() === item.value ||
+        endDate.value?.startOf("day").valueOf() === item.value,
+      "laydate-range-hover":
+        item.type === "current" &&
+        // 当前日期在开始时间之后 && 当前日期再结束(hover)时间之前 (第一次点击在前>第二次点击(hover)在后)
+        // ||
+        // 当前日期在开始时间之前 && 当前日期在结束(hover)时间之后 (第一次点击在后>第二次点击(hover)在前)
+        (!!(
+          startDate.value &&
+          Date.isSameOrAfter(startDate.value, "day") &&
+          Date.isSameOrBefore(_endDate, "day")
+        ) ||
+          !!(
+            startDate.value &&
+            Date.isSameOrBefore(startDate.value, "day") &&
+            Date.isSameOrAfter(_endDate, "day")
+          )),
+    };
+  };
+});
+
+const handleDatePick = (value: number) => {
+  const unixDate = dayjs(value);
+  const _startDate = (startDate.value || leftDate.value)
+    .clone()
+    .set("year", unixDate.year())
+    .set("month", unixDate.month())
+    .set("date", unixDate.date());
+
+  const _endDate = (endDate.value || rightDate.value)
+    .clone()
+    .set("year", unixDate.year())
+    .set("month", unixDate.month())
+    .set("date", unixDate.date());
+
+  // 点击开始时间
+  if (!startDate.value || (startDate.value && endDate.value)) {
+    startDate.value = _startDate;
+    endDate.value = undefined;
+  } else if (unixDate.isSameOrBefore(startDate.value, "day")) {
+    // 二次点击的时间在开始时间之前
+    endDate.value = startDate.value
+      .clone()
+      .set("hour", rightDate.value.hour())
+      .set("minute", rightDate.value.minute())
+      .set("second", rightDate.value.second());
+    startDate.value = _startDate;
+  } else {
+    endDate.value = _endDate;
+  }
+};
+
+const handleDateHover = (val: number) => {
+  if (!startDate.value || endDate.value) {
+    hoverDate.value = null;
+    return;
+  }
+
+  hoverDate.value = dayjs(val);
+};
+
+// 点击year/month icon 进行切换
+const handleChangeYearMonth = (
+  diffType: "add" | "subtract",
+  type: "year" | "month"
+) => {
+  leftDate.value = leftDate.value[diffType](1, type);
+};
+
+// 点击year/month进行切换
+const handleChangeYearMonthPick = (
+  val: Dayjs,
+  type: "year" | "month",
+  dropdownEl: DropdownRef
+) => {
+  const DateValue = val[type]();
+  leftDate.value = leftDate.value[type](DateValue);
+
+  dropdownEl.hide();
+};
+
+// 切换左侧time
+const handleChangeLeftTimePick = (hmsDate: Dayjs) => {
+  leftDate.value = leftDate.value
+    .clone()
+    .set("hour", hmsDate.hour())
+    .set("minute", hmsDate.minute())
+    .set("second", hmsDate.second());
+
+  if (startDate.value) {
+    startDate.value = startDate.value
+      .set("hour", leftDate.value.hour())
+      .set("minute", leftDate.value.minute())
+      .set("second", leftDate.value.second());
+  }
+};
+
+// 切换右侧time
+const handleChangeRightTimePick = (hmsDate: Dayjs) => {
+  rightDate.value = rightDate.value
+    .clone()
+    .set("hour", hmsDate.hour())
+    .set("minute", hmsDate.minute())
+    .set("second", hmsDate.second());
+
+  if (endDate.value) {
+    endDate.value = endDate.value
+      .set("hour", rightDate.value.hour())
+      .set("minute", rightDate.value.minute())
+      .set("second", rightDate.value.second());
+  }
+};
+
+const formatValue = () => {
+  // format 正确传 format后的格式，否则传Date对象
+  if (startDate.value && endDate.value) {
+    return [startDate.value, endDate.value].map((date: Dayjs) => {
+      return props.format ? date.format(props.format) : date.toDate();
+    });
+  } else {
+    return [];
+  }
+};
+const handleConfirm = () => {
+  emits("pick", formatValue());
+};
+</script>
+
+<template>
+  <div class="layui-laydate-range" :class="'layui-laydate-range-' + props.type">
+    <div class="layui-laydate-range-main">
+      <div class="layui-laydate">
+        <div class="layui-laydate-main">
+          <div class="layui-laydate-header">
+            <LayIcon
+              type="layui-icon-prev"
+              @click="handleChangeYearMonth('subtract', 'year')"
+            ></LayIcon>
+            <LayIcon
+              type="layui-icon-left"
+              @click="handleChangeYearMonth('subtract', 'month')"
+            ></LayIcon>
+            <div class="laydate-set-ym">
+              <LayDropdown ref="yearLeftRef">
+                <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
+                <template #content>
+                  <Year
+                    :modelValue="leftDate"
+                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearLeftRef!)"
+                  ></Year>
+                </template>
+              </LayDropdown>
+
+              <LayDropdown ref="monthLeftRef">
+                <span>{{ MONTH_NAME[leftDate.month()] }}</span>
+
+                <template #content>
+                  <Month
+                    :modelValue="leftDate"
+                    :inputDate="leftDate"
+                    dateType="month"
+                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'month', monthLeftRef!)"
+                  ></Month>
+                </template>
+              </LayDropdown>
+
+              <LayDropdown ref="timeLeftRef" v-if="props.type === 'datetime'">
+                <span>{{ leftDate.format("HH:mm:ss") }}</span>
+
+                <template #content>
+                  <Time
+                    :modelValue="startDate || leftDate"
+                    :inputDate="startDate || leftDate"
+                    @pick="handleChangeLeftTimePick"
+                  ></Time>
+                </template>
+              </LayDropdown>
+            </div>
+
+            <LayIcon
+              type="layui-icon-right"
+              style="visibility: hidden"
+            ></LayIcon>
+            <LayIcon
+              type="layui-icon-next"
+              style="visibility: hidden"
+            ></LayIcon>
+          </div>
+          <DateContent
+            :classes="classes"
+            :dateList="leftDataList"
+            @update:model-value="handleDatePick"
+            @hover-cell="handleDateHover"
+          >
+          </DateContent>
+        </div>
+      </div>
+
+      <div class="layui-laydate">
+        <div class="layui-laydate-main">
+          <div class="layui-laydate-header">
+            <LayIcon
+              type="layui-icon-prev"
+              style="visibility: hidden"
+            ></LayIcon>
+            <LayIcon
+              type="layui-icon-left"
+              style="visibility: hidden"
+            ></LayIcon>
+            <div class="laydate-set-ym">
+              <LayDropdown ref="yearRightRef">
+                <span>{{ rightDate.year() }} {{ t("datePicker.year") }}</span>
+                <template #content>
+                  <Year
+                    :modelValue="leftDate"
+                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearRightRef!)"
+                  ></Year>
+                </template>
+              </LayDropdown>
+
+              <LayDropdown ref="monthRightRef">
+                <span>{{ MONTH_NAME[rightDate.month()] }}</span>
+
+                <template #content>
+                  <Month
+                    :modelValue="leftDate"
+                    :inputDate="leftDate"
+                    dateType="month"
+                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val.subtract(1, 'month'), 'month', monthRightRef!)"
+                  ></Month>
+                </template>
+              </LayDropdown>
+
+              <LayDropdown ref="timeRightRef" v-if="props.type === 'datetime'">
+                <span>{{ rightDate.format("HH:mm:ss") }}</span>
+
+                <template #content>
+                  <Time
+                    :modelValue="endDate || rightDate"
+                    :inputDate="endDate || rightDate"
+                    @pick="handleChangeRightTimePick"
+                  ></Time>
+                </template>
+              </LayDropdown>
+            </div>
+
+            <LayIcon
+              type="layui-icon-right"
+              @click="handleChangeYearMonth('add', 'month')"
+            ></LayIcon>
+            <LayIcon
+              type="layui-icon-next"
+              @click="handleChangeYearMonth('add', 'year')"
+            ></LayIcon>
+          </div>
+          <DateContent
+            :classes="classes"
+            :dateList="rightDataList"
+            @update:model-value="handleDatePick"
+            @hover-cell="handleDateHover"
+          >
+          </DateContent>
+        </div>
+      </div>
+    </div>
+    <Footer :showNow="false" @confirm="handleConfirm">
+      {{ startDate?.format(props.inputFormat) }}
+      {{ props.rangeSeparator }}
+      {{ endDate?.format(props.inputFormat) }}
+    </Footer>
+  </div>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index 8c40ff24..17b29d22 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0">
+    <div class="layui-laydate-main">
       <div class="layui-laydate-header">
         <LayIcon
           type="layui-icon-prev"
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePickerV2/component/common/DateContent.vue
index 92ee1dc6..17bebec6 100644
--- a/packages/component/component/datePickerV2/component/common/DateContent.vue
+++ b/packages/component/component/datePickerV2/component/common/DateContent.vue
@@ -20,18 +20,14 @@
               :data-unix="item.value"
               :class="{
                 'laydate-day-prev': item.type !== 'current',
-                'layui-this':
-                  item.value === modelValue ||
-                  (DatePickerContext.range &&
-                    item.type === 'current' &&
-                    (item.value == startDate || item.value == endDate)),
-                'laydate-range-hover': ifHasRangeHoverClass(item),
+                'layui-this': item.value === modelValue,
                 'layui-disabled': cellDisabled(item),
                 'layui-laydate-current':
                   item.value === dayjs().startOf('day').valueOf(),
+                ...classes(item),
               }"
               @click="handleDayClick(item)"
-              @mouseenter="dayItemMouseEnter($event, item)"
+              @mouseenter="dayItemMouseEnter(item)"
             >
               {{ item.day }}
             </td>
@@ -51,9 +47,7 @@ import dayjs from "dayjs";
 export interface DateContentProps {
   dateList: any;
   modelValue?: number;
-  startDate?: number;
-  endDate?: number;
-  hoverDate?: number;
+  classes?: (val: any) => Record<string, boolean>;
 }
 
 defineOptions({
@@ -63,9 +57,7 @@ defineOptions({
 const props = withDefaults(defineProps<DateContentProps>(), {
   dateList: [],
   modelValue: -1,
-  hoverDate: -1,
-  startDate: -1,
-  endDate: -1,
+  classes: () => ({}),
 });
 
 const { t } = useI18n();
@@ -82,13 +74,7 @@ const WEEK_NAME = computed(() => [
 
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
-const emits = defineEmits([
-  "update:modelValue",
-  "update:startDate",
-  "update:endDate",
-  "update:hoverDate",
-  "simple",
-]);
+const emits = defineEmits(["update:modelValue", "hover-cell"]);
 
 // 判断日期是否可以点击
 const cellDisabled = computed(() => {
@@ -116,84 +102,16 @@ const cellDisabled = computed(() => {
 
 // 点击日期
 const handleDayClick = (item: any) => {
-  if (cellDisabled.value(item)) {
-    return;
-  }
-  if (DatePickerContext.range) {
-    if (item.type !== "current") {
-      return;
-    }
+  if (cellDisabled.value(item)) return;
 
-    if (props.startDate === -1 && props.endDate === -1) {
-      emits("update:startDate", item.value);
-    } else if (props.startDate !== -1 && props.endDate !== -1) {
-      emits("update:hoverDate", item.value);
-      emits("update:startDate", item.value);
-      emits("update:endDate", -1);
-    } else if (props.startDate !== -1 && props.endDate === -1) {
-      emits("update:endDate", item.value);
-      if (item.value < props.startDate) {
-        //swap
-        const first = props.startDate;
-        const last = item.value;
-        emits("update:startDate", last);
-        emits("update:endDate", first);
-      }
-    }
-  } else {
-    emits("update:modelValue", item.value);
-    // if (item.type !== "current") {
-    //   datePicker.currentMonth.value =
-    //     item.type === "prev"
-    //       ? datePicker.currentMonth.value - 1
-    //       : datePicker.currentMonth.value + 1;
-    // }
-    // if (datePicker.simple) {
-    //   emits("simple");
-    // }
-  }
+  if (DatePickerContext.range && item.type !== "current") return;
+
+  emits("update:modelValue", item.value);
 };
 
-const dayItemMouseEnter = (event: MouseEvent, item: any) => {
-  if (!DatePickerContext.range) {
-    return;
-  }
-  if (props.startDate === -1) {
-    return;
-  }
-  if (item.type !== "current") {
-    return;
-  }
-  if (props.startDate !== -1 && props.endDate !== -1) {
-    emits("update:hoverDate", -1);
-    return;
-  }
-  emits(
-    "update:hoverDate",
-    parseInt((event.target as HTMLElement).dataset.unix as string)
-  );
+const dayItemMouseEnter = (item: any) => {
+  if (!DatePickerContext.range || cellDisabled.value(item)) return;
+
+  emits("hover-cell", item.value);
 };
-const ifHasRangeHoverClass = computed(() => {
-  return function (item: any) {
-    if (!DatePickerContext.range) {
-      return false;
-    }
-    if (props.startDate === -1) {
-      return false;
-    }
-    if (item.type !== "current") {
-      return false;
-    }
-    if (props.hoverDate === -1 && props.endDate === -1) {
-      return false;
-    }
-    let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
-    let max = props.startDate > hover ? props.startDate : hover;
-    let min = props.startDate < hover ? props.startDate : hover;
-    if (item.value >= min && item.value <= max) {
-      return true;
-    }
-    return false;
-  };
-});
 </script>
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index b9cf11b6..95d40279 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
+    <div class="layui-laydate-main laydate-time-show">
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
           <slot name="header">
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 45e1135f..a02a3ce0 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -9,6 +9,7 @@ import { type Dayjs } from "dayjs";
 
 import { computed } from "vue";
 import DatePicker from "../component/DatePicker.vue";
+import DateRange from "../component/DateRange.vue";
 import TimeRange from "../component/TimeRange.vue";
 import MonthRange from "../component/MonthRange.vue";
 import YearRange from "../component/YearRange.vue";
@@ -60,10 +61,16 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
 
   // 类型映射
   const TYPE_MAP: TypeMap = {
-    datetime: { component: DatePicker, format: "YYYY-MM-DD HH:mm:ss" },
-    date: { component: DatePicker, format: "YYYY-MM-DD" },
     year: { component: props.range ? YearRange : DatePicker, format: "YYYY" },
     month: { component: props.range ? MonthRange : DatePicker, format: "M" },
+    datetime: {
+      component: props.range ? DateRange : DatePicker,
+      format: "YYYY-MM-DD HH:mm:ss",
+    },
+    date: {
+      component: props.range ? DateRange : DatePicker,
+      format: "YYYY-MM-DD",
+    },
     yearmonth: {
       component: props.range ? MonthRange : DatePicker,
       format: "YYYY-MM",
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index a1596cde..9c495afd 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -609,6 +609,7 @@ html #layuicss-laydate {
   .laydate-set-ym {
     overflow: visible;
     white-space: nowrap;
+    line-height: 46px;
   }
   .laydate-set-ym .layui-dropdown {
     width: auto !important;
-- 
Gitee


From e9108134237463c379a1578b3512694b6e411824 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Mon, 23 Sep 2024 19:52:49 +0800
Subject: [PATCH 16/45] feat: add focus/blur emit

---
 .../component/common/InputBlock.vue           | 43 +++++++++++++++----
 .../component/datePickerV2/index.vue          |  2 +-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 21c720bf..6affbed5 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from "dayjs";
-import { computed, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import type {
   DatePickerModelValueSingleType,
   DatePickerProps,
@@ -11,7 +11,13 @@ import { normalizeDayjsValue } from "../../util";
 import { isArray, isNumber } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits([
+  "update:modelValue",
+  "change",
+  "focus",
+  "blur",
+  "clear",
+]);
 
 const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
 
@@ -20,7 +26,25 @@ const _Placeholder = computed(() => {
 });
 
 const onChange = () => {};
-const handleClear = () => {};
+const handleClear = () => {
+  emits("update:modelValue", props.range ? [] : "");
+  emits("clear");
+};
+
+const handleBlur = (e: FocusEvent) => {
+  isFocus.value = false;
+  setTimeout(() => {
+    if (!isFocus.value) {
+      emits("blur", e);
+    }
+  }, 0);
+};
+
+const isFocus = ref(false);
+const handleFocus = (e: FocusEvent) => {
+  isFocus.value = true;
+  emits("focus", e);
+};
 
 const classes = computed(() => {
   return ["layui-date-picker", { "layui-date-range-picker": props.range }];
@@ -54,6 +78,7 @@ const dateValue = computed(() => {
 
 function onPick(item: string | Date) {
   emits("update:modelValue", item);
+  emits("change", item);
   dropdownRef.value?.hide();
 }
 </script>
@@ -78,8 +103,8 @@ function onPick(item: string | Date) {
         :modelValue="dateValue"
         v-if="!range"
         @change="onChange"
-        @blur="$emit('blur')"
-        @focus="$emit('focus')"
+        @blur="handleBlur"
+        @focus="handleFocus"
         :allow-clear="!disabled && allowClear"
         :size="size"
         @clear="handleClear"
@@ -93,8 +118,8 @@ function onPick(item: string | Date) {
           :placeholder="_Placeholder[0]"
           :disabled="disabled"
           @change="onChange"
-          @blur="$emit('blur')"
-          @focus="$emit('focus')"
+          @blur="handleBlur"
+          @focus="handleFocus"
           class="start-input"
           :size="size"
         >
@@ -108,8 +133,8 @@ function onPick(item: string | Date) {
           :modelValue="dateValue[1]"
           :disabled="disabled"
           @change="onChange"
-          @blur="$emit('blur')"
-          @focus="$emit('focus')"
+          @blur="handleBlur"
+          @focus="handleFocus"
           class="end-input"
           :size="size"
           @clear="handleClear"
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index 699844f7..e915861c 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import "./index.less";
 import dayjs from "dayjs";
+import { computed, provide } from "vue";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import IsSameOrBefore from "dayjs/plugin/IsSameOrBefore";
 import IsSameOrAfter from "dayjs/plugin/IsSameOrAfter";
@@ -14,7 +15,6 @@ import {
 import { useDatePicker } from "./hook/useDatePicker";
 
 import InputBlock from "./component/common/InputBlock.vue";
-import { computed, provide } from "vue";
 
 dayjs.extend(customParseFormat);
 dayjs.extend(IsSameOrBefore);
-- 
Gitee


From d0975c513d160631ceec63e2271180d7cb094399 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 24 Sep 2024 09:38:09 +0800
Subject: [PATCH 17/45] =?UTF-8?q?fix:=20range=E6=A8=A1=E5=BC=8Fhover=20inp?=
 =?UTF-8?q?ut=E5=8F=B3=E4=BE=A7input=E5=86=85=E9=83=A8=E5=81=8F=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/datePickerV2/index.less         | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index 9c495afd..39092a07 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -54,22 +54,6 @@
   }
 }
 
-@font-face {
-  font-family: "laydate-icon";
-  src: url("./font/iconfont.eot");
-  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
-    url("./font/iconfont.svg#iconfont") format("svg"),
-    url("./font/iconfont.woff") format("woff"),
-    url("./font/iconfont.ttf") format("truetype");
-}
-
-.laydate-icon {
-  font-family: "laydate-icon" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
 html #layuicss-laydate {
   display: none;
@@ -178,19 +162,15 @@ html #layuicss-laydate {
   cursor: pointer;
   user-select: none;
 }
-.layui-laydate-header i.laydate-prev-y,
 .layui-laydate-header .layui-icon-prev{
   left: 15px;
 }
-.layui-laydate-header i.laydate-prev-m,
 .layui-laydate-header .layui-icon-left {
   left: 45px;
 }
-.layui-laydate-header i.laydate-next-y,
 .layui-laydate-header .layui-icon-next {
   right: 15px;
 }
-.layui-laydate-header i.laydate-next-m,
 .layui-laydate-header .layui-icon-right {
   right: 45px;
 }
@@ -658,3 +638,25 @@ html #layuicss-laydate {
 .layui-laydate-content::-webkit-scrollbar-thumb:hover {
   background-color: #dddddd;
 }
+
+.layui-date-range-picker{
+  .end-input{
+    .layui-input-clear{
+      opacity: 0;
+      visibility: hidden;
+      display: block;
+      padding: 0 10px;
+    }
+  }
+
+  .laydate-range-inputs{
+    &:hover {
+      .end-input{
+        .layui-input-clear{
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
-- 
Gitee


From 6000096fd95e6527dd9d65e9691f6401c5b83cf8 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 24 Sep 2024 17:46:34 +0800
Subject: [PATCH 18/45] feat: update input and now btn handling min/max

---
 .../datePickerV2/component/DatePicker.vue     |  11 +-
 .../datePickerV2/component/DateRange.vue      |   2 +-
 .../datePickerV2/component/MonthRange.vue     |   2 +-
 .../datePickerV2/component/TimeRange.vue      |   2 +-
 .../datePickerV2/component/YearRange.vue      |   2 +-
 .../component/common/InputBlock.vue           | 208 ++++++++++++++----
 .../component/component/datePickerV2/util.ts  |  17 +-
 7 files changed, 194 insertions(+), 50 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 5743d27d..9d022e78 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -112,13 +112,18 @@ const handleConfirm = (isConfirm = false) => {
   if (!showConfirm.value || isConfirm) {
     preCondition();
 
-    emits("pick", formatValue());
+    emits("pick", currentData.value); // formatValue()
   }
 };
 
 const handleNow = () => {
-  currentData.value = dayjs();
-  inputDate.value = dayjs();
+  if (dayjs().isBefore(dayjs(props.min, props.format))) {
+    inputDate.value = currentData.value = dayjs(props.min, props.format);
+  } else if (dayjs().isAfter(dayjs(props.max, props.format))) {
+    inputDate.value = currentData.value = dayjs(props.max, props.format);
+  } else {
+    inputDate.value = currentData.value = dayjs();
+  }
 };
 
 const formatValue = () => {
diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index bfd628dd..3f5d9633 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -213,7 +213,7 @@ const formatValue = () => {
   }
 };
 const handleConfirm = () => {
-  emits("pick", formatValue());
+  emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index 83c50f54..354a8274 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -110,7 +110,7 @@ const formatValue = () => {
   }
 };
 const handleConfirm = () => {
-  emits("pick", formatValue());
+  emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePickerV2/component/TimeRange.vue
index e4823be1..b2a98b62 100644
--- a/packages/component/component/datePickerV2/component/TimeRange.vue
+++ b/packages/component/component/datePickerV2/component/TimeRange.vue
@@ -55,7 +55,7 @@ const formatValue = () => {
   }
 };
 const handleConfirm = () => {
-  emits("pick", formatValue());
+  emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePickerV2/component/YearRange.vue
index 2c4bba02..85b33f35 100644
--- a/packages/component/component/datePickerV2/component/YearRange.vue
+++ b/packages/component/component/datePickerV2/component/YearRange.vue
@@ -95,7 +95,7 @@ const formatValue = () => {
   }
 };
 const handleConfirm = () => {
-  emits("pick", formatValue());
+  emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 6affbed5..dc7962da 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
-import { computed, nextTick, ref } from "vue";
-import type {
-  DatePickerModelValueSingleType,
-  DatePickerProps,
+import dayjs, { type Dayjs } from "dayjs";
+import { computed, nextTick, ref, inject } from "vue";
+import {
+  DATE_PICKER_CONTEXT,
+  type DatePickerModelValueSingleType,
+  type DatePickerProps,
 } from "../../interface";
+
 import LayDropdown from "../../../dropdown/index.vue";
 import LayInput from "../../../input/index.vue";
-import { normalizeDayjsValue } from "../../util";
+
+import { dayjsToString, checkRangeValue } from "../../util";
 import { isArray, isNumber } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
@@ -19,14 +22,140 @@ const emits = defineEmits([
   "clear",
 ]);
 
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
 const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
 
+const classes = computed(() => {
+  return ["layui-date-picker", { "layui-date-range-picker": props.range }];
+});
 const _Placeholder = computed(() => {
   return isArray(props.placeholder) ? props.placeholder : [props.placeholder];
 });
 
-const onChange = () => {};
+const inputValue = computed(() => {
+  let _inputValue: string | Array<string>;
+
+  if (props.range) {
+    const modelValue = isArray(props.modelValue) ? props.modelValue : [];
+    _inputValue = modelValue.map((data) => {
+      return dayjsToString(data, props.format!);
+    });
+  } else {
+    let value = props.modelValue;
+
+    if (
+      ["year", "month"].includes(props.type!) &&
+      isNumber(props.modelValue) &&
+      `${props.modelValue}`.length <= 4
+    ) {
+      value += "";
+    }
+
+    _inputValue = dayjsToString(
+      value as DatePickerModelValueSingleType,
+      props.format!
+    );
+  }
+
+  if (isArray(currentInputValue.value)) {
+    return [
+      currentInputValue.value[0] || (_inputValue && _inputValue[0]) || "",
+      currentInputValue.value[1] || (_inputValue && _inputValue[1]) || "",
+    ];
+  } else if (currentInputValue.value !== null) {
+    return currentInputValue.value;
+  }
+
+  return _inputValue;
+});
+
+const currentInputValue = ref<string | Array<string | null> | null>(null);
+
+const handleInput = (value: string) => {
+  currentInputValue.value = value;
+};
+
+const handleStartInput = (value: string) => {
+  if (currentInputValue.value) {
+    currentInputValue.value = [value, currentInputValue.value[1]];
+  } else {
+    currentInputValue.value = [value, null];
+  }
+};
+
+const handleEndInput = (value: string) => {
+  if (currentInputValue.value) {
+    currentInputValue.value = [currentInputValue.value[0], value];
+  } else {
+    currentInputValue.value = [null, value];
+  }
+};
+
+const handleChange = () => {
+  if (currentInputValue.value) {
+    const checkDate = dayjs(inputValue.value as string, props.format);
+
+    if (checkDate.isValid()) {
+      emits("update:modelValue", checkDate.format(props.format));
+      currentInputValue.value = null;
+    }
+  } else {
+    emits("update:modelValue", "");
+    currentInputValue.value = null;
+  }
+};
+
+const handleStartChange = () => {
+  const date = dayjs(
+    currentInputValue.value && currentInputValue.value[0],
+    props.format
+  );
+
+  if (date.isValid()) {
+    currentInputValue.value = [
+      date.format(props.format),
+      inputValue.value?.[1] || null,
+    ];
+
+    const modelValue = [
+      date,
+      dayjs(currentInputValue.value[1] || null, props.format),
+    ];
+
+    if (checkRangeValue(modelValue)) {
+      emits("update:modelValue", formatOutPutValue(modelValue));
+      currentInputValue.value = null;
+    }
+  }
+};
+
+const handleEndChange = () => {
+  const date = dayjs(
+    currentInputValue.value && currentInputValue.value[1],
+    props.format
+  );
+
+  if (date.isValid()) {
+    currentInputValue.value = [
+      inputValue.value?.[0] || null,
+      date.format(props.format),
+    ];
+
+    const modelValue = [
+      dayjs(currentInputValue.value[0] || null, props.format),
+      date,
+    ];
+
+    if (checkRangeValue(modelValue)) {
+      emits("update:modelValue", formatOutPutValue(modelValue));
+      currentInputValue.value = null;
+    }
+  }
+};
+
 const handleClear = () => {
+  currentInputValue.value = null;
   emits("update:modelValue", props.range ? [] : "");
   emits("clear");
 };
@@ -35,50 +164,42 @@ const handleBlur = (e: FocusEvent) => {
   isFocus.value = false;
   setTimeout(() => {
     if (!isFocus.value) {
+      currentInputValue.value = null;
       emits("blur", e);
     }
   }, 0);
 };
 
 const isFocus = ref(false);
+
 const handleFocus = (e: FocusEvent) => {
   isFocus.value = true;
   emits("focus", e);
 };
 
-const classes = computed(() => {
-  return ["layui-date-picker", { "layui-date-range-picker": props.range }];
-});
+const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
+  if (isArray(dates)) {
+    const [startDate, endDate] = dates;
 
-const dateValue = computed(() => {
-  if (props.range) {
-    const modelValue = isArray(props.modelValue) ? props.modelValue : [];
-    return modelValue.map((data) => {
-      return normalizeDayjsValue(data, props.format!).format(props.format);
-    });
+    if (startDate && endDate) {
+      return [startDate, endDate].map((date: Dayjs) => {
+        return DatePickerContext.format
+          ? date.format(DatePickerContext.format)
+          : date.toDate();
+      });
+    } else return [];
   } else {
-    if (!props.modelValue) return "";
-
-    let value = props.modelValue;
-
-    if (
-      ["year", "month"].includes(props.type!) &&
-      isNumber(props.modelValue) &&
-      `${props.modelValue}`.length <= 4
-    ) {
-      value += "";
-    }
-
-    return normalizeDayjsValue(
-      value as DatePickerModelValueSingleType,
-      props.format!
-    ).format(props.format);
+    return DatePickerContext.format
+      ? dates.format(DatePickerContext.format)
+      : dates.toDate();
   }
-});
+};
+
+function onPick(dates: Dayjs | Array<Dayjs>) {
+  const value = formatOutPutValue(dates);
 
-function onPick(item: string | Date) {
-  emits("update:modelValue", item);
-  emits("change", item);
+  emits("update:modelValue", value);
+  emits("change", value);
   dropdownRef.value?.hide();
 }
 </script>
@@ -100,9 +221,10 @@ function onPick(item: string | Date) {
         :prefix-icon="prefixIcon"
         :suffix-icon="suffixIcon"
         :disabled="disabled"
-        :modelValue="dateValue"
+        :modelValue="inputValue"
         v-if="!range"
-        @change="onChange"
+        @input="handleInput"
+        @change="handleChange"
         @blur="handleBlur"
         @focus="handleFocus"
         :allow-clear="!disabled && allowClear"
@@ -114,10 +236,11 @@ function onPick(item: string | Date) {
         <lay-input
           :readonly="readonly"
           :name="name"
-          :modelValue="dateValue[0]"
+          :modelValue="inputValue && inputValue[0]"
           :placeholder="_Placeholder[0]"
           :disabled="disabled"
-          @change="onChange"
+          @input="handleStartInput"
+          @change="handleStartChange"
           @blur="handleBlur"
           @focus="handleFocus"
           class="start-input"
@@ -130,9 +253,10 @@ function onPick(item: string | Date) {
           :name="name"
           :allow-clear="!disabled && allowClear"
           :placeholder="_Placeholder[1]"
-          :modelValue="dateValue[1]"
+          :modelValue="inputValue && inputValue[1]"
           :disabled="disabled"
-          @change="onChange"
+          @input="handleEndInput"
+          @change="handleEndChange"
           @blur="handleBlur"
           @focus="handleFocus"
           class="end-input"
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
index d84f134c..ab0216ba 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePickerV2/util.ts
@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs, { type Dayjs } from "dayjs";
 import type { DatePickerModelValueSingleType } from "./interface";
 
 export const normalizeDayjsValue = (
@@ -9,3 +9,18 @@ export const normalizeDayjsValue = (
 
   return date.isValid() ? date : dayjs(value);
 };
+
+export const dayjsToString = (
+  value: DatePickerModelValueSingleType,
+  format: string
+) => {
+  const date = dayjs(value, format);
+
+  return date.isValid() ? dayjs(value, format).format(format) : "";
+};
+
+export const checkRangeValue = (values: Array<Dayjs | null>) => {
+  const [start, end] = values;
+  if (!start || !end) return false;
+  return start.isValid() && end.isValid();
+};
-- 
Gitee


From f2968cd9e4184a205e0c0280a7fd652c65b5a1e3 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 24 Sep 2024 17:55:39 +0800
Subject: [PATCH 19/45] chore: update

---
 .../datePickerV2/component/DateRange.vue      | 20 +++++--------------
 .../datePickerV2/component/MonthRange.vue     | 10 ----------
 .../datePickerV2/component/TimeRange.vue      | 10 ----------
 .../datePickerV2/component/YearRange.vue      | 10 ----------
 4 files changed, 5 insertions(+), 45 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index 3f5d9633..fb89ad78 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -19,10 +19,10 @@ const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
 
-const startDate = ref();
-const endDate = ref();
-const leftDate = ref(dayjs().startOf("day"));
-const rightDate = ref(dayjs().startOf("day").add(1, "month"));
+const startDate = ref<Dayjs | null>();
+const endDate = ref<Dayjs | null>();
+const leftDate = ref<Dayjs>(dayjs().startOf("day"));
+const rightDate = ref<Dayjs>(dayjs().startOf("day").add(1, "month"));
 
 const hoverDate = ref<Dayjs | null>();
 
@@ -165,7 +165,7 @@ const handleChangeYearMonthPick = (
   dropdownEl: DropdownRef
 ) => {
   const DateValue = val[type]();
-  leftDate.value = leftDate.value[type](DateValue);
+  leftDate.value = leftDate.value[type](DateValue) as Dayjs;
 
   dropdownEl.hide();
 };
@@ -202,16 +202,6 @@ const handleChangeRightTimePick = (hmsDate: Dayjs) => {
   }
 };
 
-const formatValue = () => {
-  // format 正确传 format后的格式，否则传Date对象
-  if (startDate.value && endDate.value) {
-    return [startDate.value, endDate.value].map((date: Dayjs) => {
-      return props.format ? date.format(props.format) : date.toDate();
-    });
-  } else {
-    return [];
-  }
-};
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index 354a8274..c8aa1ade 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -99,16 +99,6 @@ const handleRightYearChange = (year: Dayjs) => {
   yearRightRef.value?.hide();
 };
 
-const formatValue = () => {
-  // format 正确传 format后的格式，否则传Date对象
-  if (startDate.value && endDate.value) {
-    return [startDate.value, endDate.value].map((date: Dayjs) => {
-      return props.format ? date.format(props.format) : date.toDate();
-    });
-  } else {
-    return [];
-  }
-};
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePickerV2/component/TimeRange.vue
index b2a98b62..34792747 100644
--- a/packages/component/component/datePickerV2/component/TimeRange.vue
+++ b/packages/component/component/datePickerV2/component/TimeRange.vue
@@ -44,16 +44,6 @@ const handleRightTimePick = (date: Dayjs) => {
   }
 };
 
-const formatValue = () => {
-  // format 正确传 format后的格式，否则传Date对象
-  if (startDate.value && endDate.value) {
-    return [startDate.value, endDate.value].map((date: Dayjs) => {
-      return props.format ? date.format(props.format) : date.toDate();
-    });
-  } else {
-    return [];
-  }
-};
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePickerV2/component/YearRange.vue
index 85b33f35..d1d02511 100644
--- a/packages/component/component/datePickerV2/component/YearRange.vue
+++ b/packages/component/component/datePickerV2/component/YearRange.vue
@@ -84,16 +84,6 @@ const handleYearHover = (date: Dayjs) => {
   hoverYear.value = date;
 };
 
-const formatValue = () => {
-  // format 正确传 format后的格式，否则传Date对象
-  if (startDate.value && endDate.value) {
-    return [startDate.value, endDate.value].map((date: Dayjs) => {
-      return props.format ? date.format(props.format) : date.toDate();
-    });
-  } else {
-    return [];
-  }
-};
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
-- 
Gitee


From 14a29210cf671e174ba45c2dc22f7c57f7f021a6 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 24 Sep 2024 18:11:06 +0800
Subject: [PATCH 20/45] feat: timestamp

---
 .../component/datePickerV2/component/common/InputBlock.vue  | 5 +++++
 packages/component/component/datePickerV2/util.ts           | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index dc7962da..0a10cc00 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -189,6 +189,11 @@ const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
       });
     } else return [];
   } else {
+    // 兼容 timestamp属性
+    if (["date", "datetime"].includes(props.type!) && props.timestamp) {
+      return dates.valueOf();
+    }
+
     return DatePickerContext.format
       ? dates.format(DatePickerContext.format)
       : dates.toDate();
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
index ab0216ba..f4a4c47d 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePickerV2/util.ts
@@ -16,7 +16,11 @@ export const dayjsToString = (
 ) => {
   const date = dayjs(value, format);
 
-  return date.isValid() ? dayjs(value, format).format(format) : "";
+  return date.isValid()
+    ? dayjs(value, format).format(format)
+    : dayjs(value).isValid()
+    ? dayjs(value).format(format)
+    : "";
 };
 
 export const checkRangeValue = (values: Array<Dayjs | null>) => {
-- 
Gitee


From 6bf8e5284a98f54b739932ba32d1fe1163d3f93b Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 24 Sep 2024 18:16:49 +0800
Subject: [PATCH 21/45] chore: update

---
 .../component/datePickerV2/component/common/InputBlock.vue    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 0a10cc00..34462aa3 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -191,7 +191,9 @@ const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
   } else {
     // 兼容 timestamp属性
     if (["date", "datetime"].includes(props.type!) && props.timestamp) {
-      return dates.valueOf();
+      return props.type === "date"
+        ? dates.startOf("day").valueOf()
+        : dates.valueOf();
     }
 
     return DatePickerContext.format
-- 
Gitee


From 9c38f46956ce5eada681b3676831148311e76f08 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 25 Sep 2024 16:36:05 +0800
Subject: [PATCH 22/45] chore: optimiza month range ui

---
 .../datePickerV2/component/MonthRange.vue     | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index c8aa1ade..8f6ffec9 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -68,6 +68,8 @@ const classes = computed(() => {
   };
 });
 
+const isYearMonth = computed(() => props.type === "yearmonth");
+
 const handleMonthPick = (date: Dayjs) => {
   if (!startDate.value || (startDate.value && endDate.value)) {
     startDate.value = date;
@@ -105,7 +107,7 @@ const handleConfirm = () => {
 </script>
 
 <template>
-  <div class="layui-laydate-range">
+  <div :class="{ 'layui-laydate-range': isYearMonth }">
     <div class="layui-laydate-range-main">
       <Month
         :modelValue="leftDate"
@@ -115,22 +117,31 @@ const handleConfirm = () => {
         @hover-cell="handleMonthHover"
       >
         <template #header>
-          <LayIcon
-            type="layui-icon-prev"
-            @click="leftDate = leftDate.subtract(1, 'year')"
-          />
-
-          <LayDropdown ref="yearLeftRef">
-            <div class="laydate-set-ym">
-              <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
-            </div>
-            <template #content>
-              <Year :modelValue="leftDate" @pick="handleLeftYearChange"></Year>
-            </template>
-          </LayDropdown>
+          <template v-if="isYearMonth">
+            <LayIcon
+              type="layui-icon-prev"
+              @click="leftDate = leftDate.subtract(1, 'year')"
+            />
+
+            <LayDropdown ref="yearLeftRef">
+              <div class="laydate-set-ym">
+                <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
+              </div>
+              <template #content>
+                <Year
+                  :modelValue="leftDate"
+                  @pick="handleLeftYearChange"
+                ></Year>
+              </template>
+            </LayDropdown>
+          </template>
+          <div v-else class="laydate-set-ym">
+            <span>选择月份范围</span>
+          </div>
         </template>
       </Month>
       <Month
+        v-if="isYearMonth"
         :modelValue="rightDate"
         :inputDate="rightDate"
         :classes="classes"
-- 
Gitee


From fd625f9b9a8f31489b7c1e3d4a294a5f653e0037 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 25 Sep 2024 16:47:00 +0800
Subject: [PATCH 23/45] chore: optimiza month range disabled

---
 .../component/datePickerV2/component/MonthRange.vue       | 2 ++
 .../component/datePickerV2/component/common/Month.vue     | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index 8f6ffec9..ed607c03 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -113,6 +113,7 @@ const handleConfirm = () => {
         :modelValue="leftDate"
         :inputDate="leftDate"
         :classes="classes"
+        :dateType="props.type"
         @pick="handleMonthPick"
         @hover-cell="handleMonthHover"
       >
@@ -144,6 +145,7 @@ const handleConfirm = () => {
         v-if="isYearMonth"
         :modelValue="rightDate"
         :inputDate="rightDate"
+        :dateType="props.type"
         :classes="classes"
         @pick="handleMonthPick"
         @hover-cell="handleMonthHover"
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 6dfb5c0f..5b4c53bb 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -95,13 +95,13 @@ const cellDisabled = computed(() => {
     return (month: number) => {
       if (
         DatePickerContext.min &&
-        month < dayjs(DatePickerContext.min).month()
+        month < dayjs(DatePickerContext.min, DatePickerContext.format).month()
       ) {
         return true;
       }
       if (
         DatePickerContext.max &&
-        month > dayjs(DatePickerContext.max).month()
+        month > dayjs(DatePickerContext.max, DatePickerContext.format).month()
       ) {
         return true;
       }
@@ -113,14 +113,14 @@ const cellDisabled = computed(() => {
 
       if (
         DatePickerContext.min &&
-        fullMonth.isSameOrBefore(DatePickerContext.min, "month")
+        fullMonth.isBefore(DatePickerContext.min, "month")
       ) {
         return true;
       }
 
       if (
         DatePickerContext.max &&
-        fullMonth.isSameOrAfter(DatePickerContext.max, "month")
+        fullMonth.isAfter(DatePickerContext.max, "month")
       ) {
         return true;
       }
-- 
Gitee


From eb0cb9dbf07cbec92c6475eb25ae723734b688ec Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 25 Sep 2024 17:41:30 +0800
Subject: [PATCH 24/45] chore: optimiza DateContent Type

---
 .../datePickerV2/component/DateRange.vue      |  4 ++--
 .../datePickerV2/component/common/Date.vue    |  4 ++--
 .../component/common/DateContent.vue          | 22 ++++++++++---------
 .../datePickerV2/component/interface.ts       |  8 +++++++
 .../component/component/datePickerV2/day.ts   | 10 +++++++--
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index fb89ad78..c1d79f43 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
-import type { RangePickerProps } from "./interface";
+import type { RangePickerProps, DateContentSingleDateObject } from "./interface";
 
 import { useI18n } from "../../../language";
 import { setDateList } from "../day";
@@ -83,7 +83,7 @@ watch(
 );
 
 const classes = computed(() => {
-  return (item: any) => {
+  return (item: DateContentSingleDateObject) => {
     const Date = dayjs(item.value);
     const _endDate = endDate.value || hoverDate.value;
 
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index 17b29d22..572863fa 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type BasePanelProps } from "../interface";
+import type { BasePanelProps, DateContentSingleDateObject } from "../interface";
 
 import { computed, nextTick, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
@@ -65,7 +65,7 @@ const { t } = useI18n();
 const Day = ref();
 const Year = ref();
 const Month = ref();
-const dateList = ref<any>([]);
+const dateList = ref<Array<DateContentSingleDateObject>>([]);
 
 const MONTH_NAME = computed(() => [
   t("datePicker.january"),
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePickerV2/component/common/DateContent.vue
index 17bebec6..85da33cd 100644
--- a/packages/component/component/datePickerV2/component/common/DateContent.vue
+++ b/packages/component/component/datePickerV2/component/common/DateContent.vue
@@ -8,7 +8,7 @@
       </thead>
       <tbody>
         <template
-          v-for="(o, i) of dateList.length % 7 == 0
+          v-for="(_, i) of dateList.length % 7 == 0
             ? dateList.length / 7
             : Math.floor(dateList.length / 7) + 1"
           :key="i"
@@ -39,23 +39,25 @@
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from "../../../../language";
+import dayjs from "dayjs";
 import { computed, inject } from "vue";
+
+import { useI18n } from "../../../../language";
 import { DATE_PICKER_CONTEXT } from "../../interface";
-import dayjs from "dayjs";
+import type { DateContentSingleDateObject } from "../interface";
 
 export interface DateContentProps {
-  dateList: any;
+  dateList: Array<DateContentSingleDateObject>;
   modelValue?: number;
-  classes?: (val: any) => Record<string, boolean>;
+  classes?: (val: DateContentSingleDateObject) => Record<string, boolean>;
 }
 
 defineOptions({
   name: "DateContent",
 });
 
-const props = withDefaults(defineProps<DateContentProps>(), {
-  dateList: [],
+withDefaults(defineProps<DateContentProps>(), {
+  dateList: () => [],
   modelValue: -1,
   classes: () => ({}),
 });
@@ -78,7 +80,7 @@ const emits = defineEmits(["update:modelValue", "hover-cell"]);
 
 // 判断日期是否可以点击
 const cellDisabled = computed(() => {
-  return (item: { type: string; value: number }) => {
+  return (item: DateContentSingleDateObject) => {
     if (item.type !== "current" && DatePickerContext.range) {
       return true;
     }
@@ -101,7 +103,7 @@ const cellDisabled = computed(() => {
 });
 
 // 点击日期
-const handleDayClick = (item: any) => {
+const handleDayClick = (item: DateContentSingleDateObject) => {
   if (cellDisabled.value(item)) return;
 
   if (DatePickerContext.range && item.type !== "current") return;
@@ -109,7 +111,7 @@ const handleDayClick = (item: any) => {
   emits("update:modelValue", item.value);
 };
 
-const dayItemMouseEnter = (item: any) => {
+const dayItemMouseEnter = (item: DateContentSingleDateObject) => {
   if (!DatePickerContext.range || cellDisabled.value(item)) return;
 
   emits("hover-cell", item.value);
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index 99b77225..c97acced 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -15,3 +15,11 @@ export interface UniquePickerProps extends PanelPickerProps {
 export interface RangePickerProps extends PanelPickerProps {
   modelValue: Array<Dayjs>;
 }
+
+export interface DateContentSingleDateObject {
+  day: number;
+  value: number;
+  isRange: boolean;
+  isSelected: boolean;
+  type: "prev" | "current" | "next";
+}
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
index 586b3685..fbce37e5 100644
--- a/packages/component/component/datePickerV2/day.ts
+++ b/packages/component/component/datePickerV2/day.ts
@@ -1,3 +1,5 @@
+import { DateContentSingleDateObject } from "./component/interface";
+
 /**
  * 获取年份列表
  * @param {Date | number} date 时间
@@ -59,11 +61,15 @@ const getDayLength = (year: number, month: number): number => {
 };
 
 // 设置日期列表
-const setDateList = (year: number, month: number) => {
+const setDateList = (
+  year: number,
+  month: number
+): Array<DateContentSingleDateObject> => {
   const curDays = getDayLength(year, month); // 当月天数
   const prevDays = getDayLength(year, month - 1); // 上月天数
   const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
-  const list: any[] = [];
+  const list: Array<DateContentSingleDateObject> = [];
+
   // 填充上月天数
   for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
     list.push({
-- 
Gitee


From 3d3c7dba282f87c55a2234f3dd41be073ada04f4 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 8 Oct 2024 18:31:54 +0800
Subject: [PATCH 25/45] feat: add Shortcuts

---
 .../datePickerV2/component/DatePicker.vue     | 127 +++++----
 .../datePickerV2/component/DateRange.vue      | 262 +++++++++---------
 .../datePickerV2/component/MonthRange.vue     |  18 +-
 .../datePickerV2/component/TimeRange.vue      |  16 +-
 .../datePickerV2/component/YearRange.vue      |  21 +-
 .../datePickerV2/component/common/Date.vue    |  64 +++--
 .../datePickerV2/component/common/Month.vue   |  86 +++---
 .../component/common/Shortcuts.vue            |  31 +++
 .../datePickerV2/component/common/Time.vue    |  72 +++--
 .../datePickerV2/component/common/Year.vue    |  80 +++---
 .../datePickerV2/hook/useShortcutsRange.ts    |  26 ++
 .../component/datePickerV2/index.less         |  27 ++
 .../component/datePickerV2/interface.ts       |  14 +-
 13 files changed, 499 insertions(+), 345 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/component/common/Shortcuts.vue
 create mode 100644 packages/component/component/datePickerV2/hook/useShortcutsRange.ts

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 9d022e78..d0073704 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import type { UniquePickerProps } from "./interface";
+import type {
+  Shortcuts as ShortcutsType,
+  DatePickerModelValueSingleType,
+} from "../interface";
 import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 
+import { isFunction } from "../../../utils";
+
 import LayButton from "../../button/index.vue";
 import Date from "./common/Date.vue";
 import Time from "./common/Time.vue";
 import Year from "./common/Year.vue";
 import Month from "./common/Month.vue";
 import Footer from "./common/Footer.vue";
+import Shortcuts from "./common/Shortcuts.vue";
 
 const props = withDefaults(defineProps<UniquePickerProps>(), {});
 
@@ -126,67 +133,79 @@ const handleNow = () => {
   }
 };
 
-const formatValue = () => {
-  // format 正确传 format后的格式，否则传Date对象
-  return props.format
-    ? dayjs(currentData.value).format(props.format)
-    : dayjs(currentData.value).toDate();
+const handleChangeShortcut = (shortcuts: ShortcutsType) => {
+  const date = (
+    isFunction(shortcuts.value) ? shortcuts.value() : shortcuts.value
+  ) as DatePickerModelValueSingleType;
+  currentData.value = dayjs(date, props.format);
+
+  handleConfirm();
 };
 
+// const formatValue = () => {
+//   // format 正确传 format后的格式，否则传Date对象
+//   return props.format
+//     ? dayjs(currentData.value).format(props.format)
+//     : dayjs(currentData.value).toDate();
+// };
+
 const footerValue = () => {
   return dayjs(currentData.value).format(props.defaultFormat);
 };
 </script>
 
 <template>
-  <!-- 当datetime模式下 切换为time时，只通过css隐藏date模块，不销毁date模块。 -->
-  <!-- 防止date内部inputDate watch 因重新渲染而再次执行。 -->
-  <!-- 再次执行会导致在非simple模式下切换日期重新赋值datepicker.modelValue -->
-  <Date
-    v-if="currentType === 'date' || currentType === 'time'"
-    v-show="currentType === 'date'"
-    :modelValue="currentData"
-    :inputDate="inputDate"
-    :dateType="dateType"
-    @pick="handlePickDate"
-    @year-month-change="handleDateChangeYearMonth"
-    @type-change="(type: 'year' | 'month') => (currentType = type)"
-  ></Date>
-  <Time
-    v-if="currentType === 'time'"
-    :modelValue="currentData"
-    :inputDate="inputDate"
-    :dateType="dateType"
-    @pick="handlePickTime"
-  ></Time>
-  <Year
-    v-if="currentType === 'year'"
-    :modelValue="currentData"
-    :inputDate="inputDate"
-    :dateType="dateType"
-    @pick="handlePickYear"
-  ></Year>
-  <Month
-    v-if="currentType === 'month'"
-    :modelValue="currentData"
-    :inputDate="inputDate"
-    :dateType="dateType"
-    @pick="handlePickMonth"
-    @year-change="handleMonthChangeYear"
-    @type-change="currentType = 'year'"
-  ></Month>
-  <Footer
-    :showConfirm="showConfirm"
-    @confirm="handleConfirm(true)"
-    @now="handleNow"
-  >
-    <LayButton
-      v-if="dateType === 'datetime'"
-      size="xs"
-      :class="{ 'type-time': currentType === 'time' }"
-      @click="handleToggleTimePanel"
-      >{{ currentType === "date" ? "选择时间" : "选择日期" }}</LayButton
+  <div class="layui-laydate">
+    <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
+    <!-- 当datetime模式下 切换为time时，只通过css隐藏date模块，不销毁date模块。 -->
+    <!-- 防止date内部inputDate watch 因重新渲染而再次执行。 -->
+    <!-- 再次执行会导致在非simple模式下切换日期重新赋值datepicker.modelValue -->
+    <Date
+      v-if="currentType === 'date' || currentType === 'time'"
+      v-show="currentType === 'date'"
+      :modelValue="currentData"
+      :inputDate="inputDate"
+      :dateType="dateType"
+      @pick="handlePickDate"
+      @year-month-change="handleDateChangeYearMonth"
+      @type-change="(type: 'year' | 'month') => (currentType = type)"
+    ></Date>
+    <Time
+      v-if="currentType === 'time'"
+      :modelValue="currentData"
+      :inputDate="inputDate"
+      :dateType="dateType"
+      @pick="handlePickTime"
+    ></Time>
+    <Year
+      v-if="currentType === 'year'"
+      :modelValue="currentData"
+      :inputDate="inputDate"
+      :dateType="dateType"
+      @pick="handlePickYear"
+    ></Year>
+    <Month
+      v-if="currentType === 'month'"
+      :modelValue="currentData"
+      :inputDate="inputDate"
+      :dateType="dateType"
+      @pick="handlePickMonth"
+      @year-change="handleMonthChangeYear"
+      @type-change="currentType = 'year'"
+    ></Month>
+    <Footer
+      :showConfirm="showConfirm"
+      @confirm="handleConfirm(true)"
+      @now="handleNow"
     >
-    <template v-else>{{ footerValue() }}</template>
-  </Footer>
+      <LayButton
+        v-if="dateType === 'datetime'"
+        size="xs"
+        :class="{ 'type-time': currentType === 'time' }"
+        @click="handleToggleTimePanel"
+        >{{ currentType === "date" ? "选择时间" : "选择日期" }}</LayButton
+      >
+      <template v-else>{{ footerValue() }}</template>
+    </Footer>
+  </div>
 </template>
diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index c1d79f43..cfd2adf7 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
-import type { RangePickerProps, DateContentSingleDateObject } from "./interface";
+import type {
+  RangePickerProps,
+  DateContentSingleDateObject,
+} from "./interface";
+import type { Shortcuts as ShortcutsType } from "../interface";
 
 import { useI18n } from "../../../language";
 import { setDateList } from "../day";
@@ -13,11 +17,15 @@ import Time from "./common/Time.vue";
 import Year from "./common/Year.vue";
 import Month from "./common/Month.vue";
 import Footer from "./common/Footer.vue";
+import Shortcuts from "./common/Shortcuts.vue";
+
+import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
+const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref<Dayjs | null>();
 const endDate = ref<Dayjs | null>();
@@ -202,146 +210,144 @@ const handleChangeRightTimePick = (hmsDate: Dayjs) => {
   }
 };
 
+const handleChangeShortcut = (shortcuts: ShortcutsType) => {
+  const shortcutsValues = hookChangeShortcut(shortcuts);
+
+  leftDate.value = shortcutsValues[0];
+  rightDate.value = shortcutsValues[1];
+  startDate.value = shortcutsValues[0];
+  endDate.value = shortcutsValues[1];
+};
+
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
 <template>
-  <div class="layui-laydate-range" :class="'layui-laydate-range-' + props.type">
+  <div
+    class="layui-laydate layui-laydate-range"
+    :class="'layui-laydate-range-' + props.type"
+  >
     <div class="layui-laydate-range-main">
-      <div class="layui-laydate">
-        <div class="layui-laydate-main">
-          <div class="layui-laydate-header">
-            <LayIcon
-              type="layui-icon-prev"
-              @click="handleChangeYearMonth('subtract', 'year')"
-            ></LayIcon>
-            <LayIcon
-              type="layui-icon-left"
-              @click="handleChangeYearMonth('subtract', 'month')"
-            ></LayIcon>
-            <div class="laydate-set-ym">
-              <LayDropdown ref="yearLeftRef">
-                <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
-                <template #content>
-                  <Year
-                    :modelValue="leftDate"
-                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearLeftRef!)"
-                  ></Year>
-                </template>
-              </LayDropdown>
-
-              <LayDropdown ref="monthLeftRef">
-                <span>{{ MONTH_NAME[leftDate.month()] }}</span>
-
-                <template #content>
-                  <Month
-                    :modelValue="leftDate"
-                    :inputDate="leftDate"
-                    dateType="month"
-                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'month', monthLeftRef!)"
-                  ></Month>
-                </template>
-              </LayDropdown>
-
-              <LayDropdown ref="timeLeftRef" v-if="props.type === 'datetime'">
-                <span>{{ leftDate.format("HH:mm:ss") }}</span>
-
-                <template #content>
-                  <Time
-                    :modelValue="startDate || leftDate"
-                    :inputDate="startDate || leftDate"
-                    @pick="handleChangeLeftTimePick"
-                  ></Time>
-                </template>
-              </LayDropdown>
-            </div>
-
-            <LayIcon
-              type="layui-icon-right"
-              style="visibility: hidden"
-            ></LayIcon>
-            <LayIcon
-              type="layui-icon-next"
-              style="visibility: hidden"
-            ></LayIcon>
+      <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
+
+      <div class="layui-laydate-main">
+        <div class="layui-laydate-header">
+          <LayIcon
+            type="layui-icon-prev"
+            @click="handleChangeYearMonth('subtract', 'year')"
+          ></LayIcon>
+          <LayIcon
+            type="layui-icon-left"
+            @click="handleChangeYearMonth('subtract', 'month')"
+          ></LayIcon>
+          <div class="laydate-set-ym">
+            <LayDropdown ref="yearLeftRef">
+              <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
+              <template #content>
+                <Year
+                  :modelValue="leftDate"
+                  @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearLeftRef!)"
+                ></Year>
+              </template>
+            </LayDropdown>
+
+            <LayDropdown ref="monthLeftRef">
+              <span>{{ MONTH_NAME[leftDate.month()] }}</span>
+
+              <template #content>
+                <Month
+                  :modelValue="leftDate"
+                  :inputDate="leftDate"
+                  dateType="month"
+                  @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'month', monthLeftRef!)"
+                ></Month>
+              </template>
+            </LayDropdown>
+
+            <LayDropdown ref="timeLeftRef" v-if="props.type === 'datetime'">
+              <span>{{ leftDate.format("HH:mm:ss") }}</span>
+
+              <template #content>
+                <Time
+                  :modelValue="startDate || leftDate"
+                  :inputDate="startDate || leftDate"
+                  @pick="handleChangeLeftTimePick"
+                ></Time>
+              </template>
+            </LayDropdown>
           </div>
-          <DateContent
-            :classes="classes"
-            :dateList="leftDataList"
-            @update:model-value="handleDatePick"
-            @hover-cell="handleDateHover"
-          >
-          </DateContent>
+
+          <LayIcon type="layui-icon-right" style="visibility: hidden"></LayIcon>
+          <LayIcon type="layui-icon-next" style="visibility: hidden"></LayIcon>
         </div>
+        <DateContent
+          :classes="classes"
+          :dateList="leftDataList"
+          @update:model-value="handleDatePick"
+          @hover-cell="handleDateHover"
+        >
+        </DateContent>
       </div>
 
-      <div class="layui-laydate">
-        <div class="layui-laydate-main">
-          <div class="layui-laydate-header">
-            <LayIcon
-              type="layui-icon-prev"
-              style="visibility: hidden"
-            ></LayIcon>
-            <LayIcon
-              type="layui-icon-left"
-              style="visibility: hidden"
-            ></LayIcon>
-            <div class="laydate-set-ym">
-              <LayDropdown ref="yearRightRef">
-                <span>{{ rightDate.year() }} {{ t("datePicker.year") }}</span>
-                <template #content>
-                  <Year
-                    :modelValue="leftDate"
-                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearRightRef!)"
-                  ></Year>
-                </template>
-              </LayDropdown>
-
-              <LayDropdown ref="monthRightRef">
-                <span>{{ MONTH_NAME[rightDate.month()] }}</span>
-
-                <template #content>
-                  <Month
-                    :modelValue="leftDate"
-                    :inputDate="leftDate"
-                    dateType="month"
-                    @pick="(val: Dayjs) => handleChangeYearMonthPick(val.subtract(1, 'month'), 'month', monthRightRef!)"
-                  ></Month>
-                </template>
-              </LayDropdown>
-
-              <LayDropdown ref="timeRightRef" v-if="props.type === 'datetime'">
-                <span>{{ rightDate.format("HH:mm:ss") }}</span>
-
-                <template #content>
-                  <Time
-                    :modelValue="endDate || rightDate"
-                    :inputDate="endDate || rightDate"
-                    @pick="handleChangeRightTimePick"
-                  ></Time>
-                </template>
-              </LayDropdown>
-            </div>
-
-            <LayIcon
-              type="layui-icon-right"
-              @click="handleChangeYearMonth('add', 'month')"
-            ></LayIcon>
-            <LayIcon
-              type="layui-icon-next"
-              @click="handleChangeYearMonth('add', 'year')"
-            ></LayIcon>
+      <div class="layui-laydate-main">
+        <div class="layui-laydate-header">
+          <LayIcon type="layui-icon-prev" style="visibility: hidden"></LayIcon>
+          <LayIcon type="layui-icon-left" style="visibility: hidden"></LayIcon>
+          <div class="laydate-set-ym">
+            <LayDropdown ref="yearRightRef">
+              <span>{{ rightDate.year() }} {{ t("datePicker.year") }}</span>
+              <template #content>
+                <Year
+                  :modelValue="leftDate"
+                  @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearRightRef!)"
+                ></Year>
+              </template>
+            </LayDropdown>
+
+            <LayDropdown ref="monthRightRef">
+              <span>{{ MONTH_NAME[rightDate.month()] }}</span>
+
+              <template #content>
+                <Month
+                  :modelValue="leftDate"
+                  :inputDate="leftDate"
+                  dateType="month"
+                  @pick="(val: Dayjs) => handleChangeYearMonthPick(val.subtract(1, 'month'), 'month', monthRightRef!)"
+                ></Month>
+              </template>
+            </LayDropdown>
+
+            <LayDropdown ref="timeRightRef" v-if="props.type === 'datetime'">
+              <span>{{ rightDate.format("HH:mm:ss") }}</span>
+
+              <template #content>
+                <Time
+                  :modelValue="endDate || rightDate"
+                  :inputDate="endDate || rightDate"
+                  @pick="handleChangeRightTimePick"
+                ></Time>
+              </template>
+            </LayDropdown>
           </div>
-          <DateContent
-            :classes="classes"
-            :dateList="rightDataList"
-            @update:model-value="handleDatePick"
-            @hover-cell="handleDateHover"
-          >
-          </DateContent>
+
+          <LayIcon
+            type="layui-icon-right"
+            @click="handleChangeYearMonth('add', 'month')"
+          ></LayIcon>
+          <LayIcon
+            type="layui-icon-next"
+            @click="handleChangeYearMonth('add', 'year')"
+          ></LayIcon>
         </div>
+        <DateContent
+          :classes="classes"
+          :dateList="rightDataList"
+          @update:model-value="handleDatePick"
+          @hover-cell="handleDateHover"
+        >
+        </DateContent>
       </div>
     </div>
     <Footer :showNow="false" @confirm="handleConfirm">
diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index ed607c03..f6e3c0cf 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -2,6 +2,7 @@
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
 import type { RangePickerProps } from "./interface";
+import type { Shortcuts as ShortcutsType } from "../interface";
 
 import { useI18n } from "../../../language";
 
@@ -10,11 +11,15 @@ import LayDropdown from "../../dropdown";
 import Month from "./common/Month.vue";
 import Year from "./common/Year.vue";
 import Footer from "./common/Footer.vue";
+import Shortcuts from "./common/Shortcuts.vue";
+
+import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
+const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref();
 const endDate = ref();
@@ -101,14 +106,25 @@ const handleRightYearChange = (year: Dayjs) => {
   yearRightRef.value?.hide();
 };
 
+const handleChangeShortcut = (shortcuts: ShortcutsType) => {
+  const shortcutsValues = hookChangeShortcut(shortcuts);
+
+  leftDate.value = shortcutsValues[0];
+  rightDate.value = shortcutsValues[1];
+  startDate.value = shortcutsValues[0];
+  endDate.value = shortcutsValues[1];
+};
+
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
 <template>
-  <div :class="{ 'layui-laydate-range': isYearMonth }">
+  <div class="layui-laydate" :class="{ 'layui-laydate-range': isYearMonth }">
     <div class="layui-laydate-range-main">
+      <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
+
       <Month
         :modelValue="leftDate"
         :inputDate="leftDate"
diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePickerV2/component/TimeRange.vue
index 34792747..fedd33ee 100644
--- a/packages/component/component/datePickerV2/component/TimeRange.vue
+++ b/packages/component/component/datePickerV2/component/TimeRange.vue
@@ -2,16 +2,21 @@
 import dayjs, { type Dayjs } from "dayjs";
 import { ref, watch } from "vue";
 import type { RangePickerProps } from "./interface";
+import type { Shortcuts as ShortcutsType } from "../interface";
 
 import { useI18n } from "../../../language";
 
 import Time from "./common/Time.vue";
 import Footer from "./common/Footer.vue";
+import Shortcuts from "./common/Shortcuts.vue";
+
+import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
+const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref();
 const endDate = ref();
@@ -44,14 +49,23 @@ const handleRightTimePick = (date: Dayjs) => {
   }
 };
 
+const handleChangeShortcut = (shortcuts: ShortcutsType) => {
+  const shortcutsValues = hookChangeShortcut(shortcuts);
+
+  startDate.value = shortcutsValues[0];
+  endDate.value = shortcutsValues[1];
+};
+
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
 <template>
-  <div class="layui-laydate-range">
+  <div class="layui-laydate layui-laydate-range">
     <div class="layui-laydate-range-main">
+      <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
+
       <Time
         :modelValue="startDate"
         :inputDate="startDate"
diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePickerV2/component/YearRange.vue
index d1d02511..ea2b983a 100644
--- a/packages/component/component/datePickerV2/component/YearRange.vue
+++ b/packages/component/component/datePickerV2/component/YearRange.vue
@@ -2,17 +2,19 @@
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
 import type { RangePickerProps } from "./interface";
-
-import { useI18n } from "../../../language";
+import type { Shortcuts as ShortcutsType } from "../interface";
 
 import LayIcon from "../../icon";
 import Year from "./common/Year.vue";
 import Footer from "./common/Footer.vue";
+import Shortcuts from "./common/Shortcuts.vue";
+
+import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
-const { t } = useI18n();
+const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref();
 const endDate = ref();
@@ -84,14 +86,25 @@ const handleYearHover = (date: Dayjs) => {
   hoverYear.value = date;
 };
 
+const handleChangeShortcut = (shortcuts: ShortcutsType) => {
+  const shortcutsValues = hookChangeShortcut(shortcuts);
+
+  leftDate.value = shortcutsValues[0];
+  rightDate.value = shortcutsValues[1];
+  startDate.value = shortcutsValues[0];
+  endDate.value = shortcutsValues[1];
+};
+
 const handleConfirm = () => {
   emits("pick", [startDate.value, endDate.value]);
 };
 </script>
 
 <template>
-  <div class="layui-laydate-range">
+  <div class="layui-laydate layui-laydate-range">
     <div class="layui-laydate-range-main">
+      <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
+
       <Year
         :modelValue="leftDate"
         :inputDate="leftDate"
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index 572863fa..b3ec17da 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -1,39 +1,37 @@
 <template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main">
-      <div class="layui-laydate-header">
-        <LayIcon
-          type="layui-icon-prev"
-          @click="handleYearMonthChange('subtract', 'year')"
-        ></LayIcon>
-        <LayIcon
-          type="layui-icon-left"
-          @click="handleYearMonthChange('subtract', 'month')"
-        ></LayIcon>
-        <div class="laydate-set-ym">
-          <span @click="handleTypeChange('year')"
-            >{{ Year }} {{ t("datePicker.year") }}</span
-          >
-          <span @click="handleTypeChange('month')">
-            {{ MONTH_NAME[Month] }}
-          </span>
-        </div>
-        <LayIcon
-          type="layui-icon-right"
-          @click="handleYearMonthChange('add', 'month')"
-        ></LayIcon>
-        <LayIcon
-          type="layui-icon-next"
-          @click="handleYearMonthChange('add', 'year')"
-        ></LayIcon>
+  <div class="layui-laydate-main">
+    <div class="layui-laydate-header">
+      <LayIcon
+        type="layui-icon-prev"
+        @click="handleYearMonthChange('subtract', 'year')"
+      ></LayIcon>
+      <LayIcon
+        type="layui-icon-left"
+        @click="handleYearMonthChange('subtract', 'month')"
+      ></LayIcon>
+      <div class="laydate-set-ym">
+        <span @click="handleTypeChange('year')"
+          >{{ Year }} {{ t("datePicker.year") }}</span
+        >
+        <span @click="handleTypeChange('month')">
+          {{ MONTH_NAME[Month] }}
+        </span>
       </div>
-
-      <DateContent
-        :date-list="dateList"
-        :model-value="Day"
-        @update:model-value="handlePickDay"
-      ></DateContent>
+      <LayIcon
+        type="layui-icon-right"
+        @click="handleYearMonthChange('add', 'month')"
+      ></LayIcon>
+      <LayIcon
+        type="layui-icon-next"
+        @click="handleYearMonthChange('add', 'year')"
+      ></LayIcon>
     </div>
+
+    <DateContent
+      :date-list="dateList"
+      :model-value="Day"
+      @update:model-value="handlePickDay"
+    ></DateContent>
   </div>
 </template>
 
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 5b4c53bb..14c29304 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -1,49 +1,47 @@
 <template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main">
-      <div class="layui-laydate-header">
-        <slot name="header">
-          <div class="laydate-set-ym" v-if="dateType === 'month'">
-            <span class="laydate-time-text">{{
-              typeof Month !== "string"
-                ? MONTH_NAME[Month]
-                : t("datePicker.selectMonth")
-            }}</span>
+  <div class="layui-laydate-main">
+    <div class="layui-laydate-header">
+      <slot name="header">
+        <div class="laydate-set-ym" v-if="dateType === 'month'">
+          <span class="laydate-time-text">{{
+            typeof Month !== "string"
+              ? MONTH_NAME[Month]
+              : t("datePicker.selectMonth")
+          }}</span>
+        </div>
+        <template v-else>
+          <lay-icon
+            type="layui-icon-prev"
+            @click="handleYearChange(-1)"
+          ></lay-icon>
+          <div class="laydate-set-ym">
+            <span @click="emits('type-change')">{{ modelValue.year() }}</span>
           </div>
-          <template v-else>
-            <lay-icon
-              type="layui-icon-prev"
-              @click="handleYearChange(-1)"
-            ></lay-icon>
-            <div class="laydate-set-ym">
-              <span @click="emits('type-change')">{{ modelValue.year() }}</span>
-            </div>
-            <lay-icon
-              type="layui-icon-next"
-              @click="handleYearChange(1)"
-            ></lay-icon>
-          </template>
-        </slot>
-      </div>
-
-      <div class="layui-laydate-content" style="height: 220px">
-        <ul class="layui-laydate-list laydate-month-list">
-          <li
-            v-for="(item, month) of MONTH_NAME"
-            :key="item"
-            :class="{
-              'layui-this': isActive(month, currentDate),
-              'layui-laydate-current': isActive(month, dayjs()),
-              'layui-disabled': cellDisabled(month),
-              ...classes?.(fullMonthDay(month)),
-            }"
-            @click="handleMonthClick(month)"
-            @mouseenter="handleMonthMouseenter(month)"
-          >
-            {{ item.slice(0, 3) }}
-          </li>
-        </ul>
-      </div>
+          <lay-icon
+            type="layui-icon-next"
+            @click="handleYearChange(1)"
+          ></lay-icon>
+        </template>
+      </slot>
+    </div>
+
+    <div class="layui-laydate-content" style="height: 220px">
+      <ul class="layui-laydate-list laydate-month-list">
+        <li
+          v-for="(item, month) of MONTH_NAME"
+          :key="item"
+          :class="{
+            'layui-this': isActive(month, currentDate),
+            'layui-laydate-current': isActive(month, dayjs()),
+            'layui-disabled': cellDisabled(month),
+            ...classes?.(fullMonthDay(month)),
+          }"
+          @click="handleMonthClick(month)"
+          @mouseenter="handleMonthMouseenter(month)"
+        >
+          {{ item.slice(0, 3) }}
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/packages/component/component/datePickerV2/component/common/Shortcuts.vue b/packages/component/component/datePickerV2/component/common/Shortcuts.vue
new file mode 100644
index 00000000..0924d8c6
--- /dev/null
+++ b/packages/component/component/datePickerV2/component/common/Shortcuts.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { inject, computed } from "vue";
+import { DATE_PICKER_CONTEXT, type Shortcuts } from "../../interface";
+
+import { isValueArray } from "../../../../utils";
+
+const emits = defineEmits<{
+  (e: "change-shortcut", shortcut: Shortcuts): void;
+}>();
+const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
+const shortcuts = computed<Shortcuts[]>(() => {
+  return DatePickerContext.shortcuts || [];
+});
+
+const ChangeShortcut = (shortcut: Shortcuts) => {
+  emits("change-shortcut", shortcut);
+};
+</script>
+
+<template>
+  <ul class="layui-laydate-shortcut" v-if="isValueArray(shortcuts)">
+    <li
+      v-for="(shortcut, index) in shortcuts"
+      :key="index"
+      @click="ChangeShortcut(shortcut)"
+    >
+      {{ shortcut.text }}
+    </li>
+  </ul>
+</template>
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index 95d40279..feb002fd 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -1,43 +1,41 @@
 <template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-time-show">
-      <div class="layui-laydate-header">
-        <div class="laydate-set-ym">
-          <slot name="header">
-            <span class="laydate-time-text">{{
-              t("datePicker.selectTime")
-            }}</span>
-          </slot>
-        </div>
-      </div>
-      <div class="layui-laydate-content" style="height: 210px">
-        <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
-          <li
-            class="num-list"
-            v-for="item in els"
-            :key="item.type"
-            :data-type="item.type"
-          >
-            <ol class="scroll" @click="chooseTime">
-              <li
-                v-for="(it, index) in item.count"
-                :id="item.type + index.toString()"
-                :data-value="index.toString().padStart(2, '0')"
-                :data-type="item.type"
-                :key="it"
-                :class="{
-                  num: true,
-                  'layui-this': index == hms[item.type],
-                  'layui-disabled': cellDisabled(item.type, index),
-                }"
-              >
-                {{ index.toString().padStart(2, "0") }}
-              </li>
-            </ol>
-          </li>
-        </ul>
+  <div class="layui-laydate-main laydate-time-show">
+    <div class="layui-laydate-header">
+      <div class="laydate-set-ym">
+        <slot name="header">
+          <span class="laydate-time-text">{{
+            t("datePicker.selectTime")
+          }}</span>
+        </slot>
       </div>
     </div>
+    <div class="layui-laydate-content" style="height: 210px">
+      <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
+        <li
+          class="num-list"
+          v-for="item in els"
+          :key="item.type"
+          :data-type="item.type"
+        >
+          <ol class="scroll" @click="chooseTime">
+            <li
+              v-for="(it, index) in item.count"
+              :id="item.type + index.toString()"
+              :data-value="index.toString().padStart(2, '0')"
+              :data-type="item.type"
+              :key="it"
+              :class="{
+                num: true,
+                'layui-this': index == hms[item.type],
+                'layui-disabled': cellDisabled(item.type, index),
+              }"
+            >
+              {{ index.toString().padStart(2, "0") }}
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index c6e2d6c4..8ff36207 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -1,46 +1,44 @@
 <template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main">
-      <div class="layui-laydate-header">
-        <slot name="header" :yearList="yearRange">
-          <lay-icon
-            type="layui-icon-prev"
-            @click="currentDate -= DatePickerContext.yearPage"
-          ></lay-icon>
-          <div class="laydate-set-ym">
-            <span class="laydate-time-text">
-              {{ yearRange.join(" - ") }}
-            </span>
-          </div>
-          <lay-icon
-            type="layui-icon-next"
-            @click="currentDate += DatePickerContext.yearPage"
-          ></lay-icon>
-        </slot>
-      </div>
+  <div class="layui-laydate-main">
+    <div class="layui-laydate-header">
+      <slot name="header" :yearList="yearRange">
+        <lay-icon
+          type="layui-icon-prev"
+          @click="currentDate -= DatePickerContext.yearPage"
+        ></lay-icon>
+        <div class="laydate-set-ym">
+          <span class="laydate-time-text">
+            {{ yearRange.join(" - ") }}
+          </span>
+        </div>
+        <lay-icon
+          type="layui-icon-next"
+          @click="currentDate += DatePickerContext.yearPage"
+        ></lay-icon>
+      </slot>
+    </div>
 
-      <div
-        class="layui-laydate-content"
-        style="height: 220px; overflow-y: auto"
-        ref="ScrollRef"
-      >
-        <ul class="layui-laydate-list laydate-year-list">
-          <li
-            v-for="item of yearList"
-            :key="item"
-            :class="{
-              'layui-this': currentYear === item,
-              'layui-laydate-current': item === dayjs().year(),
-              'layui-disabled': cellDisabled(item),
-              ...classes?.(dayjs().year(item)),
-            }"
-            @click="handleYearClick(item)"
-            @mouseenter="handleYearMouseenter(item)"
-          >
-            {{ item }}
-          </li>
-        </ul>
-      </div>
+    <div
+      class="layui-laydate-content"
+      style="height: 220px; overflow-y: auto"
+      ref="ScrollRef"
+    >
+      <ul class="layui-laydate-list laydate-year-list">
+        <li
+          v-for="item of yearList"
+          :key="item"
+          :class="{
+            'layui-this': currentYear === item,
+            'layui-laydate-current': item === dayjs().year(),
+            'layui-disabled': cellDisabled(item),
+            ...classes?.(dayjs().year(item)),
+          }"
+          @click="handleYearClick(item)"
+          @mouseenter="handleYearMouseenter(item)"
+        >
+          {{ item }}
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/packages/component/component/datePickerV2/hook/useShortcutsRange.ts b/packages/component/component/datePickerV2/hook/useShortcutsRange.ts
new file mode 100644
index 00000000..1af8289a
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useShortcutsRange.ts
@@ -0,0 +1,26 @@
+import dayjs, { type Dayjs } from "dayjs";
+import { inject } from "vue";
+import {
+  DATE_PICKER_CONTEXT,
+  type Shortcuts,
+  type DatePickerModelValueSingleType,
+} from "../interface";
+
+import { isFunction } from "../../../utils";
+
+export const useShortcutsRange = () => {
+  const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
+
+  const handleChangeShortcut = (shortcuts: Shortcuts): Array<Dayjs> => {
+    const dates = (
+      isFunction(shortcuts.value) ? shortcuts.value() : shortcuts.value
+    ) as Array<DatePickerModelValueSingleType>;
+
+    return [
+      dayjs(dates[0], DatePickerContext.format),
+      dayjs(dates[1], DatePickerContext.format),
+    ];
+  };
+
+  return handleChangeShortcut;
+};
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index 39092a07..ff48d5b1 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -660,3 +660,30 @@ html #layuicss-laydate {
     }
   }
 }
+
+.layui-laydate-shortcut{
+  width: 80px;
+  padding: 6px 0;
+  display: inline-block;
+  vertical-align: top;
+  overflow: auto;
+  max-height: 276px;
+  text-align: center;
+}
+
+.layui-laydate-shortcut+.layui-laydate-main {
+  display: inline-block;
+  border-left: 1px solid #e2e2e2;
+}
+
+.layui-laydate-shortcut>li {
+  padding: 5px 8px;
+  cursor: pointer;
+  line-height: 18px;
+
+  &:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all .3s;
+  }
+}
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index 591b13ae..34a849ce 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -28,7 +28,7 @@ export interface DatePickerProps {
   type?: DatePickerType;
   disabled?: boolean;
   readonly?: boolean;
-  placeholder?: string | string[];
+  placeholder?: string | Array<string>;
   allowClear?: boolean;
   simple?: boolean;
   max?: string;
@@ -44,11 +44,12 @@ export interface DatePickerProps {
   defaultValue?:
     | DatePickerModelValueSingleType
     | Array<DatePickerModelValueSingleType>;
-  defaultTime?: string | string[];
+  defaultTime?: string | Array<string>;
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
   yearPage?: number;
   yearStep?: number;
+  shortcuts?: Array<Shortcuts>;
 }
 
 export type DatePickerEmits = {
@@ -85,3 +86,12 @@ export interface DatePickerContextType extends RequiredDatePickerProps {
 
 export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
   Symbol("LayDatePicker");
+
+export interface Shortcuts {
+  text: string | number;
+  value:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>
+    | (() => DatePickerModelValueSingleType)
+    | (() => Array<DatePickerModelValueSingleType>);
+}
-- 
Gitee


From 86924d46d448fb5dd8b72bdfbbf3a551c007ea2e Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 8 Oct 2024 20:04:20 +0800
Subject: [PATCH 26/45] test: add year type

---
 .../datePicker/components/YearPanel.vue       |   4 +-
 .../datePickerV2/__tests__/yearPanel.test.tsx | 191 +++++++++++++++++-
 .../datePickerV2/component/DatePicker.vue     |   3 +-
 .../datePickerV2/component/common/Year.vue    |   4 +-
 .../component/component/datePickerV2/day.ts   |   2 +-
 .../component/datePickerV2/index.vue          |   2 +-
 .../component/datePickerV2/interface.ts       |   4 +-
 7 files changed, 199 insertions(+), 11 deletions(-)

diff --git a/packages/component/component/datePicker/components/YearPanel.vue b/packages/component/component/datePicker/components/YearPanel.vue
index adc9e6a1..aabc1266 100644
--- a/packages/component/component/datePicker/components/YearPanel.vue
+++ b/packages/component/component/datePicker/components/YearPanel.vue
@@ -80,8 +80,8 @@ if (datePicker.currentYear.value)
 const yearList = computed<number[]>(() =>
   getYears(
     currentDate.value ?? new Date(),
-    datePicker.yearPage.value,
-    datePicker.yearStep.value
+    datePicker.yearPage.value
+    // datePicker.yearStep.value
   )
 );
 const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
diff --git a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
index 887fae56..5a2a0838 100644
--- a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
@@ -1,19 +1,27 @@
 import { mount } from "@vue/test-utils";
 import { afterEach, describe, expect, test } from "vitest";
-import { nextTick } from "vue";
+import { nextTick, ref } from "vue";
 import { sleep } from "../../../test-utils";
 
 import LayDatePicker from "../index.vue";
 import LayDropdown from "../../dropdown/index.vue";
 import Year from "../component/common/Year.vue";
+import Footer from "../component/common/Footer.vue";
+import Shortcuts from "../component/common/Shortcuts.vue";
 import { getYears } from "../day";
 
+const mockInputClick = async (wrapper: any) => {
+  await wrapper.find(".layui-input").trigger("click");
+  await nextTick();
+  await sleep();
+};
+
 describe("YearPanel", () => {
   afterEach(() => {
     document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
   });
 
-  test("render", async () => {
+  test("year render", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
         type: "year",
@@ -62,4 +70,183 @@ describe("YearPanel", () => {
 
     expect((yearPanelInstance.vm as any).currentYear).toBe(2023);
   });
+
+  test("year yearPage", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        yearPage: 20,
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const yearLis = wrapper
+      .findComponent(Year)
+      .findAll(".laydate-year-list li");
+
+    expect(yearLis.length).toBe(20);
+  });
+
+  test("year 点击年份 触发update:modelValue and change emit", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const yearLis = wrapper
+      .findComponent(Year)
+      .findAll(".laydate-year-list li");
+
+    await yearLis[0].trigger("click");
+
+    const datePicker = wrapper.findComponent(LayDatePicker);
+
+    const confirmBtn = wrapper
+      .findComponent(Footer)
+      .find(".laydate-footer-btns .laydate-btns-confirm");
+
+    await confirmBtn.trigger("click");
+
+    expect(datePicker.emitted()).toHaveProperty("update:modelValue");
+    expect(datePicker.emitted()).toHaveProperty("change");
+
+    expect(datePicker.emitted().change[0]).toEqual(["2017"]);
+    expect(datePicker.emitted()["update:modelValue"][0]).toEqual(["2017"]);
+  });
+
+  test("year 手动改变input 触发改变modelValue", async () => {
+    const dateValue = ref();
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker type="year" v-model={dateValue.value}></LayDatePicker>
+        );
+      },
+    });
+
+    const inputDom = wrapper.find("input");
+
+    inputDom.element.value = "2025";
+    await inputDom.trigger("input");
+    await inputDom.trigger("change");
+
+    await sleep();
+    const datePicker = wrapper.findComponent(LayDatePicker);
+    expect(datePicker.props("modelValue")).toEqual("2025");
+
+    await mockInputClick(wrapper);
+    const YearInstance = wrapper.findComponent(Year);
+    const currentLi = YearInstance.find(".laydate-year-list .layui-this");
+    expect(currentLi.text()).toEqual("2025");
+  });
+
+  test("year simple", async () => {
+    const dateValue = ref();
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker
+            type="year"
+            v-model={dateValue.value}
+            simple={true}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const FooterInstance = wrapper.findComponent(Footer);
+
+    const confirmBtn = FooterInstance.find(
+      ".laydate-footer-btns .laydate-btns-confirm"
+    );
+
+    expect(confirmBtn.exists()).toBeFalsy();
+
+    const YearInstance = wrapper.findComponent(Year);
+    const lis = YearInstance.findAll(".laydate-year-list li");
+    await lis[0].trigger("click");
+
+    const datePicker = wrapper.findComponent(LayDatePicker);
+    expect(datePicker.props("modelValue")).toBe("2017");
+  });
+
+  test("year min/max", async () => {
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker type="year" min="2023" max="2025"></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const YearInstance = wrapper.findComponent(Year);
+    const currentLi = YearInstance.find(
+      ".laydate-year-list .layui-laydate-current"
+    );
+
+    const preLi =
+      currentLi.element.previousElementSibling?.previousElementSibling;
+    const nextLi = currentLi.element.nextElementSibling?.nextElementSibling;
+
+    expect(preLi?.className).toBe("layui-disabled");
+    expect(nextLi?.className).toBe("layui-disabled");
+  });
+
+  test("year shortcuts", async () => {
+    const dateValue = ref();
+
+    const wrapper = mount({
+      setup() {
+        const shortcuts = [
+          {
+            text: "明年",
+            value: "2025",
+          },
+          {
+            text: "后年",
+            value: "2026",
+          },
+        ];
+
+        return () => (
+          <LayDatePicker
+            type="year"
+            v-model={dateValue.value}
+            shortcuts={shortcuts}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const DatePicker = wrapper.findComponent(LayDatePicker);
+    const ShortcutsDom = wrapper.findComponent(Shortcuts);
+    const YearInstance = wrapper.findComponent(Year);
+    const FooterInstance = wrapper.findComponent(Footer);
+    const ShortcutsLi = ShortcutsDom.findAll("li");
+
+    expect(ShortcutsLi.length).toBe(2);
+
+    await ShortcutsLi[1].trigger("click");
+
+    const thisLi = YearInstance.find(".layui-this");
+    expect(thisLi.text()).toBe("2026");
+
+    const confirmBtn = FooterInstance.find(
+      ".laydate-footer-btns .laydate-btns-confirm"
+    );
+
+    await confirmBtn.trigger("click");
+
+    expect(DatePicker.props("modelValue")).toBe("2026");
+  });
 });
diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index d0073704..44b0cbfa 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -137,7 +137,8 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
   const date = (
     isFunction(shortcuts.value) ? shortcuts.value() : shortcuts.value
   ) as DatePickerModelValueSingleType;
-  currentData.value = dayjs(date, props.format);
+
+  currentData.value = dayjs(date, props.defaultFormat);
 
   handleConfirm();
 };
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 8ff36207..3d19a3a2 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -68,8 +68,8 @@ const currentDate = ref();
 const yearList = computed<number[]>(() =>
   getYears(
     currentDate.value,
-    DatePickerContext.yearPage,
-    DatePickerContext.yearStep
+    DatePickerContext.yearPage
+    // DatePickerContext.yearStep
   )
 );
 const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
index fbce37e5..c5f5499f 100644
--- a/packages/component/component/datePickerV2/day.ts
+++ b/packages/component/component/datePickerV2/day.ts
@@ -11,7 +11,7 @@ const getYears = (date?: Date | number, page = 15, step = 1) => {
   const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
   // console.log(y, page, step);
   const r = (page % 2 ? page - 1 : page) / 2;
-  for (let i = y - r; i <= y + r; i += step) {
+  for (let i = y - r; i <= y + (page % 2 ? r : r - 1); i += step) {
     years.push(i);
   }
   return years;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index e915861c..fdd96164 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   suffixIcon: "",
   timestamp: false,
   yearPage: 15,
-  yearStep: 1,
+  // yearStep: 1,
 });
 
 const { RenderComponent, renderComponentProps } = useDatePicker(props);
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index 34a849ce..d548ec20 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -48,7 +48,7 @@ export interface DatePickerProps {
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
   yearPage?: number;
-  yearStep?: number;
+  // yearStep?: number;
   shortcuts?: Array<Shortcuts>;
 }
 
@@ -71,7 +71,7 @@ export type RequiredDatePickerProps = RequiredByKeys<
   | "rangeSeparator"
   | "prefixIcon"
   | "yearPage"
-  | "yearStep"
+  // | "yearStep"
 >;
 
 export interface PanelPickerProps extends DatePickerProps {
-- 
Gitee


From 2c4224e7cf3d6495317e771b3b258b08b5acae80 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 9 Oct 2024 18:13:08 +0800
Subject: [PATCH 27/45] chore: day.ts move to util.ts

---
 .../datePickerV2/__tests__/yearPanel.test.tsx |   2 +-
 .../datePickerV2/component/DateRange.vue      |   2 +-
 .../datePickerV2/component/common/Date.vue    |   2 +-
 .../datePickerV2/component/common/Year.vue    |   2 +-
 .../component/component/datePickerV2/day.ts   | 117 ------------------
 .../component/component/datePickerV2/util.ts  | 107 ++++++++++++++++
 6 files changed, 111 insertions(+), 121 deletions(-)
 delete mode 100644 packages/component/component/datePickerV2/day.ts

diff --git a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
index 5a2a0838..c02f3f3e 100644
--- a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
@@ -8,7 +8,7 @@ import LayDropdown from "../../dropdown/index.vue";
 import Year from "../component/common/Year.vue";
 import Footer from "../component/common/Footer.vue";
 import Shortcuts from "../component/common/Shortcuts.vue";
-import { getYears } from "../day";
+import { getYears } from "../util";
 
 const mockInputClick = async (wrapper: any) => {
   await wrapper.find(".layui-input").trigger("click");
diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index cfd2adf7..05624185 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -8,7 +8,7 @@ import type {
 import type { Shortcuts as ShortcutsType } from "../interface";
 
 import { useI18n } from "../../../language";
-import { setDateList } from "../day";
+import { setDateList } from "../util";
 
 import LayIcon from "../../icon";
 import LayDropdown from "../../dropdown";
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index b3ec17da..01ac8949 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -42,7 +42,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 import { useI18n } from "../../../../language";
 
-import { setDateList } from "../../day";
+import { setDateList } from "../../util";
 import LayIcon from "../../../icon";
 import DateContent from "./DateContent.vue";
 
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 3d19a3a2..346a2161 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -51,7 +51,7 @@ import { computed, ref, watch, inject } from "vue";
 
 import LayIcon from "../../../icon";
 import { DATE_PICKER_CONTEXT } from "../../interface";
-import { getYears } from "../../day";
+import { getYears } from "../../util";
 
 defineOptions({
   name: "YearPanel",
diff --git a/packages/component/component/datePickerV2/day.ts b/packages/component/component/datePickerV2/day.ts
deleted file mode 100644
index c5f5499f..00000000
--- a/packages/component/component/datePickerV2/day.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { DateContentSingleDateObject } from "./component/interface";
-
-/**
- * 获取年份列表
- * @param {Date | number} date 时间
- * @param {Number} page 页数
- * @param {Number} step 步进
- */
-const getYears = (date?: Date | number, page = 15, step = 1) => {
-  const years = [];
-  const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
-  // console.log(y, page, step);
-  const r = (page % 2 ? page - 1 : page) / 2;
-  for (let i = y - r; i <= y + (page % 2 ? r : r - 1); i += step) {
-    years.push(i);
-  }
-  return years;
-};
-
-/**
- * 获取当前日期
- */
-const getDate = (val = "") => {
-  if (val) {
-    return new Date(val);
-  } else {
-    return new Date();
-  }
-};
-
-/**
- * 获取当前年份
- */
-const getYear = (val = "") => {
-  return getDate(val).getFullYear();
-};
-
-/**
- * 获取当前月份
- */
-const getMonth = (val = "") => {
-  return getDate(val).getMonth();
-};
-
-const getDay = (val = "") => {
-  if (val) {
-    return new Date(getDate(val).toDateString()).getTime();
-  } else {
-    return -1;
-  }
-};
-
-/**
- * 获取月份天数
- *
- * @param year
- * @param month
- */
-const getDayLength = (year: number, month: number): number => {
-  return new Date(year, month + 1, 0).getDate();
-};
-
-// 设置日期列表
-const setDateList = (
-  year: number,
-  month: number
-): Array<DateContentSingleDateObject> => {
-  const curDays = getDayLength(year, month); // 当月天数
-  const prevDays = getDayLength(year, month - 1); // 上月天数
-  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
-  const list: Array<DateContentSingleDateObject> = [];
-
-  // 填充上月天数
-  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
-    list.push({
-      day: i,
-      value: +new Date(year, month - 1, i),
-      isRange: false,
-      isSelected: false,
-      type: "prev",
-    });
-  }
-  // 填充当月天数
-  for (let i = 1; i <= curDays; i++) {
-    list.push({
-      day: i,
-      value: +new Date(year, month, i),
-      isRange: false,
-      isSelected: false,
-      type: "current",
-    });
-  }
-  // 填充下月天数
-  const nextDays = 7 - (list.length % 7);
-  if (nextDays !== 7) {
-    for (let i = 1; i <= nextDays; i++) {
-      list.push({
-        day: i,
-        value: +new Date(year, month + 1, i),
-        isRange: false,
-        isSelected: false,
-        type: "next",
-      });
-    }
-  }
-  return list;
-};
-
-export {
-  getDayLength,
-  getYears,
-  getDate,
-  getMonth,
-  getYear,
-  getDay,
-  setDateList,
-};
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
index f4a4c47d..c12df3f4 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePickerV2/util.ts
@@ -1,5 +1,6 @@
 import dayjs, { type Dayjs } from "dayjs";
 import type { DatePickerModelValueSingleType } from "./interface";
+import { DateContentSingleDateObject } from "./component/interface";
 
 export const normalizeDayjsValue = (
   value: DatePickerModelValueSingleType,
@@ -28,3 +29,109 @@ export const checkRangeValue = (values: Array<Dayjs | null>) => {
   if (!start || !end) return false;
   return start.isValid() && end.isValid();
 };
+
+/**
+ * 获取年份列表
+ * @param {Date | number} date 时间
+ * @param {Number} page 页数
+ * @param {Number} step 步进
+ */
+export const getYears = (date?: Date | number, page = 15, step = 1) => {
+  const years = [];
+  const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
+  // console.log(y, page, step);
+  const r = (page % 2 ? page - 1 : page) / 2;
+  for (let i = y - r; i <= y + (page % 2 ? r : r - 1); i += step) {
+    years.push(i);
+  }
+  return years;
+};
+
+/**
+ * 获取当前日期
+ */
+export const getDate = (val = "") => {
+  if (val) {
+    return new Date(val);
+  } else {
+    return new Date();
+  }
+};
+
+/**
+ * 获取当前年份
+ */
+export const getYear = (val = "") => {
+  return getDate(val).getFullYear();
+};
+
+/**
+ * 获取当前月份
+ */
+export const getMonth = (val = "") => {
+  return getDate(val).getMonth();
+};
+
+export const getDay = (val = "") => {
+  if (val) {
+    return new Date(getDate(val).toDateString()).getTime();
+  } else {
+    return -1;
+  }
+};
+
+/**
+ * 获取月份天数
+ *
+ * @param year
+ * @param month
+ */
+export const getDayLength = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+// 设置日期列表
+export const setDateList = (
+  year: number,
+  month: number
+): Array<DateContentSingleDateObject> => {
+  const curDays = getDayLength(year, month); // 当月天数
+  const prevDays = getDayLength(year, month - 1); // 上月天数
+  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
+  const list: Array<DateContentSingleDateObject> = [];
+
+  // 填充上月天数
+  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month - 1, i),
+      isRange: false,
+      isSelected: false,
+      type: "prev",
+    });
+  }
+  // 填充当月天数
+  for (let i = 1; i <= curDays; i++) {
+    list.push({
+      day: i,
+      value: +new Date(year, month, i),
+      isRange: false,
+      isSelected: false,
+      type: "current",
+    });
+  }
+  // 填充下月天数
+  const nextDays = 7 - (list.length % 7);
+  if (nextDays !== 7) {
+    for (let i = 1; i <= nextDays; i++) {
+      list.push({
+        day: i,
+        value: +new Date(year, month + 1, i),
+        isRange: false,
+        isSelected: false,
+        type: "next",
+      });
+    }
+  }
+  return list;
+};
-- 
Gitee


From 17a6241c3a7963b8715cbeb74506c6b66c187327 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Thu, 10 Oct 2024 19:23:57 +0800
Subject: [PATCH 28/45] =?UTF-8?q?fix:=20=E5=8D=95=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=8F=96=E6=B6=88=E9=BB=98=E8=AE=A4=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E5=BD=93=E5=89=8D=E6=97=A5=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../datePickerV2/component/DatePicker.vue     | 48 +++++++-----
 .../datePickerV2/component/common/Date.vue    | 42 ++++------
 .../component/common/DateContent.vue          |  2 +-
 .../datePickerV2/component/common/Footer.vue  | 10 ++-
 .../datePickerV2/component/common/Month.vue   | 38 ++++-----
 .../datePickerV2/component/common/Time.vue    | 78 +++++++++++--------
 .../datePickerV2/component/common/Year.vue    | 16 ++--
 .../datePickerV2/component/interface.ts       | 12 ++-
 .../datePickerV2/hook/useDatePicker.ts        | 19 ++---
 .../component/datePickerV2/index.less         | 12 ++-
 .../component/datePickerV2/interface.ts       |  6 +-
 .../component/component/datePickerV2/util.ts  |  4 +-
 12 files changed, 150 insertions(+), 137 deletions(-)

diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index 44b0cbfa..cf9a5111 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -21,15 +21,23 @@ const props = withDefaults(defineProps<UniquePickerProps>(), {});
 
 const emits = defineEmits(["pick"]);
 
-const inputDate = ref<Dayjs>(dayjs());
-const currentData = ref<Dayjs>(dayjs());
+const currentData = ref<UniquePickerProps["modelValue"]>();
+const showDate = ref<Dayjs>(dayjs());
 const currentType = ref();
 
+const getDefaultValue = () => {
+  const _defaultValue = dayjs(
+    props.defaultValue as DatePickerModelValueSingleType
+  );
+
+  return _defaultValue.isValid() ? _defaultValue : dayjs().startOf("day");
+};
+
 watch(
   () => props.modelValue,
   () => {
     currentData.value = props.modelValue;
-    inputDate.value = props.modelValue;
+    showDate.value = props.modelValue || getDefaultValue();
   },
   { immediate: true }
 );
@@ -70,13 +78,13 @@ const handlePickTime = (value: Dayjs) => {
 };
 
 const handlePickYear = (year: number) => {
-  const data = currentData.value.year(year);
+  const data = showDate.value.year(year);
 
   if (["datetime", "date"].includes(dateType.value)) {
-    currentData.value = data;
+    showDate.value = data;
     currentType.value = "date";
   } else if (dateType.value === "yearmonth") {
-    currentData.value = data;
+    showDate.value = data;
     currentType.value = "month";
   } else {
     currentData.value = data;
@@ -85,23 +93,24 @@ const handlePickYear = (year: number) => {
 };
 
 const handlePickMonth = (month: number) => {
-  const data = currentData.value.month(month);
+  const data = showDate.value.month(month);
 
   if (["datetime", "date"].includes(dateType.value)) {
-    currentData.value = data;
+    showDate.value = data;
     currentType.value = "date";
   } else {
     currentData.value = data;
+    showDate.value = data;
     handleConfirm();
   }
 };
 
 const handleMonthChangeYear = (year: number) => {
-  currentData.value = currentData.value.year(year);
+  showDate.value = showDate.value.year(year);
 };
 
 const handleDateChangeYearMonth = (data: Dayjs) => {
-  currentData.value = data;
+  showDate.value = data;
 };
 
 const handleToggleTimePanel = () => {
@@ -125,11 +134,11 @@ const handleConfirm = (isConfirm = false) => {
 
 const handleNow = () => {
   if (dayjs().isBefore(dayjs(props.min, props.format))) {
-    inputDate.value = currentData.value = dayjs(props.min, props.format);
+    showDate.value = currentData.value = dayjs(props.min, props.format);
   } else if (dayjs().isAfter(dayjs(props.max, props.format))) {
-    inputDate.value = currentData.value = dayjs(props.max, props.format);
+    showDate.value = currentData.value = dayjs(props.max, props.format);
   } else {
-    inputDate.value = currentData.value = dayjs();
+    showDate.value = currentData.value = dayjs();
   }
 };
 
@@ -151,7 +160,9 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
 // };
 
 const footerValue = () => {
-  return dayjs(currentData.value).format(props.defaultFormat);
+  return currentData.value
+    ? dayjs(currentData.value).format(props.defaultFormat)
+    : "";
 };
 </script>
 
@@ -165,7 +176,7 @@ const footerValue = () => {
       v-if="currentType === 'date' || currentType === 'time'"
       v-show="currentType === 'date'"
       :modelValue="currentData"
-      :inputDate="inputDate"
+      :showDate="showDate"
       :dateType="dateType"
       @pick="handlePickDate"
       @year-month-change="handleDateChangeYearMonth"
@@ -174,21 +185,21 @@ const footerValue = () => {
     <Time
       v-if="currentType === 'time'"
       :modelValue="currentData"
-      :inputDate="inputDate"
+      :showDate="showDate"
       :dateType="dateType"
       @pick="handlePickTime"
     ></Time>
     <Year
       v-if="currentType === 'year'"
       :modelValue="currentData"
-      :inputDate="inputDate"
+      :showDate="showDate"
       :dateType="dateType"
       @pick="handlePickYear"
     ></Year>
     <Month
       v-if="currentType === 'month'"
       :modelValue="currentData"
-      :inputDate="inputDate"
+      :showDate="showDate"
       :dateType="dateType"
       @pick="handlePickMonth"
       @year-change="handleMonthChangeYear"
@@ -196,6 +207,7 @@ const footerValue = () => {
     ></Month>
     <Footer
       :showConfirm="showConfirm"
+      :disabledConfirm="!currentData"
       @confirm="handleConfirm(true)"
       @now="handleNow"
     >
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePickerV2/component/common/Date.vue
index 01ac8949..f78c1a63 100644
--- a/packages/component/component/datePickerV2/component/common/Date.vue
+++ b/packages/component/component/datePickerV2/component/common/Date.vue
@@ -11,10 +11,10 @@
       ></LayIcon>
       <div class="laydate-set-ym">
         <span @click="handleTypeChange('year')"
-          >{{ Year }} {{ t("datePicker.year") }}</span
+          >{{ showDate.year() }} {{ t("datePicker.year") }}</span
         >
         <span @click="handleTypeChange('month')">
-          {{ MONTH_NAME[Month] }}
+          {{ MONTH_NAME[showDate.month()] }}
         </span>
       </div>
       <LayIcon
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import type { BasePanelProps, DateContentSingleDateObject } from "../interface";
 
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 import { useI18n } from "../../../../language";
 
@@ -50,7 +50,6 @@ defineOptions({
   name: "DatePanel",
 });
 
-// inputDate 用于保持 day 日期的状态，不被modelValue改变
 const props = withDefaults(defineProps<BasePanelProps>(), {});
 const emits = defineEmits<{
   (e: "year-month-change", data: Dayjs): void;
@@ -60,9 +59,9 @@ const emits = defineEmits<{
 
 const { t } = useI18n();
 
-const Day = ref();
-const Year = ref();
-const Month = ref();
+const currentDate = ref<Dayjs>(dayjs());
+const Day = ref<number | null>();
+
 const dateList = ref<Array<DateContentSingleDateObject>>([]);
 
 const MONTH_NAME = computed(() => [
@@ -81,22 +80,12 @@ const MONTH_NAME = computed(() => [
 ]);
 
 watch(
-  () => props.modelValue,
-  () => {
-    Year.value = dayjs(props.modelValue).year();
-    Month.value = dayjs(props.modelValue).month();
-
-    dateList.value = setDateList(Year.value, Month.value);
-  },
-  {
-    immediate: true,
-  }
-);
+  [() => props.modelValue, () => props.showDate],
+  ([modelValue, showDate]) => {
+    dateList.value = setDateList(showDate.year(), showDate.month());
+    currentDate.value = modelValue || showDate;
 
-watch(
-  () => props.inputDate,
-  () => {
-    Day.value = dayjs(props.inputDate).startOf("day").valueOf(); //unix
+    Day.value = modelValue ? modelValue.startOf("day").valueOf() : null; //unix
   },
   {
     immediate: true,
@@ -107,7 +96,7 @@ const handleYearMonthChange = (
   calc: "add" | "subtract",
   type: "year" | "month"
 ) => {
-  const date = props.modelValue[calc](1, type);
+  const date = props.showDate[calc](1, type);
 
   emits("year-month-change", date);
 };
@@ -119,17 +108,12 @@ const handleTypeChange = (type: "year" | "month") => {
 const handlePickDay = (val: number) => {
   const unixDate = dayjs(val);
 
-  const data = props.modelValue
+  const data = currentDate.value
     .clone()
     .set("year", unixDate.year())
     .set("month", unixDate.month())
     .set("date", unixDate.date());
 
   emits("pick", data);
-  // 等待 props.modelValue watch 结束
-  // 防止 Day.value 被inputData改变
-  nextTick(() => {
-    Day.value = val;
-  });
 };
 </script>
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePickerV2/component/common/DateContent.vue
index 85da33cd..91f7d63c 100644
--- a/packages/component/component/datePickerV2/component/common/DateContent.vue
+++ b/packages/component/component/datePickerV2/component/common/DateContent.vue
@@ -48,7 +48,7 @@ import type { DateContentSingleDateObject } from "../interface";
 
 export interface DateContentProps {
   dateList: Array<DateContentSingleDateObject>;
-  modelValue?: number;
+  modelValue?: number | null;
   classes?: (val: DateContentSingleDateObject) => Record<string, boolean>;
 }
 
diff --git a/packages/component/component/datePickerV2/component/common/Footer.vue b/packages/component/component/datePickerV2/component/common/Footer.vue
index 81a1f1f0..bed5b00c 100644
--- a/packages/component/component/datePickerV2/component/common/Footer.vue
+++ b/packages/component/component/datePickerV2/component/common/Footer.vue
@@ -3,18 +3,19 @@
     <slot></slot>
     <div class="laydate-footer-btns">
       <LayButton
-        size="xs"
         lay-type="now"
-        v-if="props.showNow"
         class="laydate-btns-now"
+        v-if="props.showNow"
+        size="xs"
         @click="handelNow"
         >{{ t("datePicker.now") }}</LayButton
       >
       <LayButton
-        size="xs"
-        v-if="props.showConfirm"
         lay-type="confirm"
         class="laydate-btns-confirm"
+        v-if="props.showConfirm"
+        size="xs"
+        :disabled="disabledConfirm"
         @click="handelOk"
         >{{ t("datePicker.confirm") }}</LayButton
       >
@@ -29,6 +30,7 @@ import { useI18n } from "../../../../language";
 export interface PanelFoot {
   showNow?: boolean;
   showConfirm?: boolean;
+  disabledConfirm?: boolean;
 }
 
 defineOptions({
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePickerV2/component/common/Month.vue
index 14c29304..5526b69b 100644
--- a/packages/component/component/datePickerV2/component/common/Month.vue
+++ b/packages/component/component/datePickerV2/component/common/Month.vue
@@ -4,8 +4,8 @@
       <slot name="header">
         <div class="laydate-set-ym" v-if="dateType === 'month'">
           <span class="laydate-time-text">{{
-            typeof Month !== "string"
-              ? MONTH_NAME[Month]
+            currentMonth
+              ? MONTH_NAME[currentMonth]
               : t("datePicker.selectMonth")
           }}</span>
         </div>
@@ -15,7 +15,7 @@
             @click="handleYearChange(-1)"
           ></lay-icon>
           <div class="laydate-set-ym">
-            <span @click="emits('type-change')">{{ modelValue.year() }}</span>
+            <span @click="emits('type-change')">{{ currentDate.year() }}</span>
           </div>
           <lay-icon
             type="layui-icon-next"
@@ -31,7 +31,7 @@
           v-for="(item, month) of MONTH_NAME"
           :key="item"
           :class="{
-            'layui-this': isActive(month, currentDate),
+            'layui-this': isActive(month, modelValue),
             'layui-laydate-current': isActive(month, dayjs()),
             'layui-disabled': cellDisabled(month),
             ...classes?.(fullMonthDay(month)),
@@ -67,8 +67,8 @@ const emits = defineEmits(["pick", "year-change", "type-change", "hover-cell"]);
 
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
-const currentDate = ref();
-const Month = ref();
+const currentMonth = ref<number | null>();
+const currentDate = ref<Dayjs>(dayjs());
 
 const { t } = useI18n();
 
@@ -129,10 +129,10 @@ const cellDisabled = computed(() => {
 });
 
 const isActive = computed(() => {
-  return (month: number, value: Dayjs) => {
+  return (month: number, value: BasePanelProps["modelValue"]) => {
     const fullMonth = fullMonthDay(month);
 
-    return value.isSame(fullMonth, "month");
+    return value && value.isSame(fullMonth, "month");
   };
 });
 
@@ -144,7 +144,7 @@ const handleMonthClick = (month: number) => {
 
   const fullMonth = fullMonthDay(month);
 
-  Month.value = month;
+  currentMonth.value = month;
   currentDate.value = fullMonth;
 
   emits("pick", DatePickerContext.range ? fullMonth : month);
@@ -161,23 +161,15 @@ const handleMonthMouseenter = (month: number) => {
 };
 
 const fullMonthDay = (month: number) => {
-  return props.modelValue.startOf("year").month(month);
+  return currentDate.value.startOf("year").month(month);
 };
 
 watch(
-  () => props.modelValue,
-  () => {
-    Month.value = props.modelValue.month();
-  },
-  {
-    immediate: true,
-  }
-);
+  [() => props.modelValue, () => props.showDate],
+  ([modelValue, showDate]) => {
+    currentMonth.value = modelValue ? modelValue.month() : null;
 
-watch(
-  () => props.inputDate,
-  () => {
-    currentDate.value = props.inputDate;
+    currentDate.value = showDate;
   },
   {
     immediate: true,
@@ -185,6 +177,6 @@ watch(
 );
 
 const handleYearChange = (val: number) => {
-  emits("year-change", props.modelValue.year() + val);
+  emits("year-change", currentDate.value.year() + val);
 };
 </script>
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index feb002fd..e83e3dca 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -26,7 +26,7 @@
               :key="it"
               :class="{
                 num: true,
-                'layui-this': index == hms[item.type],
+                'layui-this': index === hms[item.type],
                 'layui-disabled': cellDisabled(item.type, index),
               }"
             >
@@ -49,9 +49,9 @@ import { useI18n } from "../../../../language";
 import { DATE_PICKER_CONTEXT } from "../../interface";
 
 export interface HmsType {
-  hh: number;
-  mm: number;
-  ss: number;
+  hh: number | null;
+  mm: number | null;
+  ss: number | null;
 }
 
 defineOptions({
@@ -72,10 +72,11 @@ const els: Array<{
   { count: 60, type: "mm" },
   { count: 60, type: "ss" },
 ];
+
 const hms = ref<HmsType>({
-  hh: props.modelValue.hour(),
-  mm: props.modelValue.minute(),
-  ss: props.modelValue.second(),
+  hh: null,
+  mm: null,
+  ss: null,
 });
 
 const hmsMap = {
@@ -87,18 +88,18 @@ const hmsMap = {
 const cellDisabled = computed(() => {
   return (type: keyof typeof hmsMap, value: number) => {
     const haveValue = typeof value !== "undefined";
-    const _hms: Record<string, number> = {
+    const _hms: Record<string, number | null> = {
       hh: haveValue ? hms.value.hh : dayjs().hour(),
       mm: haveValue ? hms.value.mm : dayjs().minute(),
       ss: haveValue ? hms.value.ss : dayjs().second(),
     };
     haveValue && (_hms[type!] = value);
 
-    const currentDate = props.modelValue
+    const currentDate = (props.modelValue || props.showDate)
       .startOf("day")
-      .hour(_hms.hh)
-      .minute(_hms.mm)
-      .second(_hms.ss);
+      .hour(_hms.hh as number)
+      .minute(_hms.mm as number)
+      .second(_hms.ss as number);
 
     const diffType = hmsMap[type] as (typeof hmsMap)[keyof typeof hmsMap];
 
@@ -137,13 +138,23 @@ const chooseTime = (e: any) => {
 
     hms.value[type as keyof typeof hms.value] = parseInt(value);
 
-    const hmsDate = dayjs({
-      hour: hms.value.hh,
-      minute: hms.value.mm,
-      second: hms.value.ss,
+    let hmsDate = dayjs({
+      hour: hms.value.hh || 0,
+      minute: hms.value.mm || 0,
+      second: hms.value.ss || 0,
     });
 
-    const newData = props.modelValue
+    if (
+      hmsDate.isBefore(dayjs(DatePickerContext.min, DatePickerContext.format))
+    ) {
+      hmsDate = dayjs(DatePickerContext.min, DatePickerContext.format);
+    } else if (
+      hmsDate.isAfter(dayjs(DatePickerContext.max, DatePickerContext.format))
+    ) {
+      hmsDate = dayjs(DatePickerContext.max, DatePickerContext.format);
+    }
+
+    const newData = (props.modelValue || props.showDate)
       .clone()
       .set("hour", hmsDate.hour())
       .set("minute", hmsDate.minute())
@@ -155,22 +166,6 @@ const chooseTime = (e: any) => {
 
 const timePanelRef = ref();
 
-onMounted(() => {
-  scrollTo();
-});
-
-watch(
-  () => props.inputDate,
-  () => {
-    hms.value = {
-      hh: props.modelValue.hour(),
-      mm: props.modelValue.minute(),
-      ss: props.modelValue.second(),
-    };
-
-    scrollTo();
-  }
-);
 const scrollTo = () => {
   nextTick(() => {
     timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
@@ -195,4 +190,21 @@ const scrollTo = () => {
     });
   });
 };
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    hms.value = {
+      hh: modelValue ? modelValue.hour() : null,
+      mm: modelValue ? modelValue.minute() : null,
+      ss: modelValue ? modelValue.second() : null,
+    };
+
+    scrollTo();
+  },
+  {
+    immediate: true,
+    flush: "post",
+  }
+);
 </script>
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePickerV2/component/common/Year.vue
index 346a2161..d0588586 100644
--- a/packages/component/component/datePickerV2/component/common/Year.vue
+++ b/packages/component/component/datePickerV2/component/common/Year.vue
@@ -57,13 +57,13 @@ defineOptions({
   name: "YearPanel",
 });
 
-const props = withDefaults(defineProps<BasePanelProps>(), {});
+const props = defineProps<BasePanelProps>();
 const emits = defineEmits(["pick", "hover-cell"]);
 
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
-const currentYear = ref();
-const currentDate = ref();
+const currentYear = ref<number | null>();
+const currentDate = ref<number>(dayjs().year());
 
 const yearList = computed<number[]>(() =>
   getYears(
@@ -75,9 +75,11 @@ const yearList = computed<number[]>(() =>
 const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
 
 watch(
-  () => props.modelValue,
-  () => {
-    currentDate.value = currentYear.value = props.modelValue.year();
+  [() => props.modelValue, () => props.showDate],
+  ([modelValue, showDate]) => {
+    currentYear.value = modelValue ? modelValue.year() : null;
+
+    currentDate.value = (modelValue || showDate)?.year();
   },
   {
     immediate: true,
@@ -104,7 +106,7 @@ const handleYearClick = (item: number) => {
   }
 
   currentYear.value = item;
-  emits("pick", DatePickerContext.range ? props.modelValue.year(item) : item);
+  emits("pick", DatePickerContext.range ? dayjs().year(item) : item);
 };
 
 const handleYearMouseenter = (item: number) => {
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index c97acced..eb068f26 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -1,15 +1,19 @@
 import type { Dayjs } from "dayjs";
-import type { DatePickerType, PanelPickerProps } from "../interface";
+import type {
+  DatePickerType,
+  PanelPickerProps,
+  DatePickerValue,
+} from "../interface";
 
 export interface BasePanelProps {
-  modelValue: Dayjs;
-  inputDate?: Dayjs;
+  modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
+  showDate: Dayjs;
   dateType?: DatePickerType;
   classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
 export interface UniquePickerProps extends PanelPickerProps {
-  modelValue: Dayjs;
+  modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
 }
 
 export interface RangePickerProps extends PanelPickerProps {
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index a02a3ce0..38092d43 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -18,23 +18,17 @@ import { normalizeDayjsValue } from "../util";
 import { isArray, isNumber } from "../../../utils";
 
 export const useDatePicker = (props: RequiredDatePickerProps) => {
-  const initDate = computed<Dayjs | Array<Dayjs>>(() => {
+  const initDate = computed<Dayjs | Array<Dayjs> | null>(() => {
     if (props.range) {
       const modelValue = isArray(props.modelValue) ? props.modelValue : [];
-      return modelValue.map((date: DatePickerModelValueSingleType) => {
-        const value =
-          date ||
-          (props.defaultValue as DatePickerModelValueSingleType) ||
-          new Date();
 
-        return normalizeDayjsValue(value, typeMap.value.format);
-      });
+      return modelValue.map((date: DatePickerModelValueSingleType) => {
+        return normalizeDayjsValue(date, typeMap.value.format);
+      }) as Array<Dayjs>;
     } else {
+      let value = props.modelValue;
+
       // 兼容之前的 Year | Month 类型 modelValue可传 `2024` | `11` number类型
-      let value =
-        props.modelValue ||
-        (props.defaultValue as DatePickerModelValueSingleType) ||
-        new Date();
       if (
         ["year", "month"].includes(props.type!) &&
         isNumber(props.modelValue) &&
@@ -44,6 +38,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
       }
 
       // 处理CustomParseFormat插件可能造成解析Date, number, '', undefined...错误
+
       return normalizeDayjsValue(
         value as DatePickerModelValueSingleType,
         typeMap.value.format
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
index ff48d5b1..e39f5af6 100644
--- a/packages/component/component/datePickerV2/index.less
+++ b/packages/component/component/datePickerV2/index.less
@@ -290,8 +290,16 @@ html #layuicss-laydate {
 .layui-laydate-footer .layui-btn + .layui-btn {
   margin-left: 0;
 }
-.layui-laydate-footer span:hover {
-  color: var(--global-primary-color);
+.layui-laydate-footer {
+  .laydate-footer-btns {
+    .layui-btn:not(.layui-btn-disabled) {
+      span:hover {
+        color: var(--global-primary-color);
+      }
+    }
+    
+  }
+  
 }
 .layui-laydate-footer span.layui-laydate-preview {
   cursor: default;
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index d548ec20..5dea8fcd 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -74,13 +74,15 @@ export type RequiredDatePickerProps = RequiredByKeys<
   // | "yearStep"
 >;
 
+export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
+
 export interface PanelPickerProps extends DatePickerProps {
-  modelValue: Dayjs | Array<Dayjs>;
+  modelValue: DatePickerValue;
   defaultFormat: string;
 }
 
 export interface DatePickerContextType extends RequiredDatePickerProps {
-  modelValue: Dayjs | Array<Dayjs>;
+  modelValue: DatePickerValue;
   defaultFormat: string;
 }
 
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
index c12df3f4..ac7e40ce 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePickerV2/util.ts
@@ -5,10 +5,10 @@ import { DateContentSingleDateObject } from "./component/interface";
 export const normalizeDayjsValue = (
   value: DatePickerModelValueSingleType,
   format: string
-) => {
+): Dayjs | null => {
   const date = dayjs(value, format);
 
-  return date.isValid() ? date : dayjs(value);
+  return date.isValid() ? date : dayjs(value).isValid() ? dayjs(value) : null;
 };
 
 export const dayjsToString = (
-- 
Gitee


From 7276392e6a89dbc3d16ff1d54edbc3423ef91050 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 11 Oct 2024 11:06:40 +0800
Subject: [PATCH 29/45] chore: update

---
 .../datePickerV2/component/interface.ts       |  6 +--
 .../datePickerV2/hook/useDatePicker.ts        |  2 +-
 .../component/datePickerV2/index.vue          |  2 +-
 .../component/datePickerV2/interface.ts       | 37 ++++++++-----------
 packages/component/types/util.ts              |  4 --
 5 files changed, 21 insertions(+), 30 deletions(-)
 delete mode 100644 packages/component/types/util.ts

diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePickerV2/component/interface.ts
index eb068f26..ee688b85 100644
--- a/packages/component/component/datePickerV2/component/interface.ts
+++ b/packages/component/component/datePickerV2/component/interface.ts
@@ -1,7 +1,7 @@
 import type { Dayjs } from "dayjs";
 import type {
   DatePickerType,
-  PanelPickerProps,
+  DatePickerContextType,
   DatePickerValue,
 } from "../interface";
 
@@ -12,11 +12,11 @@ export interface BasePanelProps {
   classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
-export interface UniquePickerProps extends PanelPickerProps {
+export interface UniquePickerProps extends DatePickerContextType {
   modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
 }
 
-export interface RangePickerProps extends PanelPickerProps {
+export interface RangePickerProps extends DatePickerContextType {
   modelValue: Array<Dayjs>;
 }
 
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 38092d43..107cce64 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -37,7 +37,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
         value += "";
       }
 
-      // 处理CustomParseFormat插件可能造成解析Date, number, '', undefined...错误
+      // 处理CustomParseFormat插件可能造成解析Date, number, '', null...错误
 
       return normalizeDayjsValue(
         value as DatePickerModelValueSingleType,
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index fdd96164..88ec0d81 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -24,7 +24,7 @@ dayjs.extend(objectSupport);
 export type DatePickerProps = _DatePickerProps;
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
-  modelValue: "",
+  modelValue: null,
   size: "md",
   type: "date",
   disabled: false,
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index 5dea8fcd..cf4b531a 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -1,7 +1,6 @@
 import type { Dayjs, ConfigType } from "dayjs";
-import type { StyleValue, Component, InjectionKey, ComputedRef } from "vue";
+import type { StyleValue, Component, InjectionKey } from "vue";
 import type { CommonSize, CommonClass } from "../../types/common";
-import type { RequiredByKeys } from "../../types/util";
 
 export type DatePickerType =
   | "date"
@@ -52,6 +51,21 @@ export interface DatePickerProps {
   shortcuts?: Array<Shortcuts>;
 }
 
+export interface RequiredDatePickerProps extends DatePickerProps {
+  size: CommonSize;
+  type: DatePickerType;
+  disabled: boolean;
+  readonly: boolean;
+  allowClear: boolean;
+  simple: boolean;
+  range: boolean;
+  rangeSeparator: string;
+  prefixIcon: string;
+  suffixIcon: string;
+  timestamp: boolean;
+  yearPage: number;
+}
+
 export type DatePickerEmits = {
   (e: "update:modelValue", value: string | Array<string>): void;
   (e: "change", value: string | Array<string>): void;
@@ -60,27 +74,8 @@ export type DatePickerEmits = {
   (e: "clear"): void;
 };
 
-export type RequiredDatePickerProps = RequiredByKeys<
-  DatePickerProps,
-  | "type"
-  | "disabled"
-  | "readonly"
-  | "allowClear"
-  | "simple"
-  | "range"
-  | "rangeSeparator"
-  | "prefixIcon"
-  | "yearPage"
-  // | "yearStep"
->;
-
 export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
 
-export interface PanelPickerProps extends DatePickerProps {
-  modelValue: DatePickerValue;
-  defaultFormat: string;
-}
-
 export interface DatePickerContextType extends RequiredDatePickerProps {
   modelValue: DatePickerValue;
   defaultFormat: string;
diff --git a/packages/component/types/util.ts b/packages/component/types/util.ts
deleted file mode 100644
index d263e931..00000000
--- a/packages/component/types/util.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type RequiredByKeys<T, K extends keyof T = keyof T> = Omit<
-  T & Required<Pick<T, K & keyof T>>,
-  never
->;
-- 
Gitee


From 524b52c0743293810fbdb0f6fb16f2ed39276ebb Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 11 Oct 2024 20:11:31 +0800
Subject: [PATCH 30/45] chore: code optimization

---
 .../datePickerV2/__tests__/yearPanel.test.tsx | 10 +--
 .../datePickerV2/component/DatePicker.vue     | 23 ++---
 .../datePickerV2/component/DateRange.vue      | 83 ++++++++++++++-----
 .../datePickerV2/component/MonthRange.vue     | 34 ++++++--
 .../datePickerV2/component/TimeRange.vue      | 18 +++-
 .../datePickerV2/component/YearRange.vue      | 15 +++-
 .../component/common/InputBlock.vue           | 16 ++--
 .../datePickerV2/component/common/Time.vue    |  2 +-
 .../datePickerV2/hook/useBaseDatePicker.ts    | 20 +++++
 .../datePickerV2/hook/useDatePicker.ts        | 18 ++--
 .../datePickerV2/hook/useShortcutsRange.ts    |  7 +-
 .../component/datePickerV2/index.vue          |  2 +
 .../component/datePickerV2/interface.ts       |  5 +-
 .../component/component/datePickerV2/util.ts  | 21 +++--
 packages/component/utils/index.ts             |  1 +
 packages/component/utils/type.ts              | 23 +++++
 packages/component/utils/vueUtil.ts           | 24 ------
 17 files changed, 215 insertions(+), 107 deletions(-)
 create mode 100644 packages/component/component/datePickerV2/hook/useBaseDatePicker.ts
 create mode 100644 packages/component/utils/type.ts

diff --git a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
index c02f3f3e..09d86d7f 100644
--- a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
@@ -114,8 +114,8 @@ describe("YearPanel", () => {
     expect(datePicker.emitted()).toHaveProperty("update:modelValue");
     expect(datePicker.emitted()).toHaveProperty("change");
 
-    expect(datePicker.emitted().change[0]).toEqual(["2017"]);
-    expect(datePicker.emitted()["update:modelValue"][0]).toEqual(["2017"]);
+    expect(datePicker.emitted().change[0]).toEqual(["2011"]);
+    expect(datePicker.emitted()["update:modelValue"][0]).toEqual(["2011"]);
   });
 
   test("year 手动改变input 触发改变modelValue", async () => {
@@ -173,14 +173,14 @@ describe("YearPanel", () => {
     await lis[0].trigger("click");
 
     const datePicker = wrapper.findComponent(LayDatePicker);
-    expect(datePicker.props("modelValue")).toBe("2017");
+    expect(datePicker.props("modelValue")).toBe("2011");
   });
 
   test("year min/max", async () => {
     const wrapper = mount({
       setup() {
         return () => (
-          <LayDatePicker type="year" min="2023" max="2025"></LayDatePicker>
+          <LayDatePicker type="year" min="2023" max="2024"></LayDatePicker>
         );
       },
     });
@@ -194,7 +194,7 @@ describe("YearPanel", () => {
 
     const preLi =
       currentLi.element.previousElementSibling?.previousElementSibling;
-    const nextLi = currentLi.element.nextElementSibling?.nextElementSibling;
+    const nextLi = currentLi.element.nextElementSibling;
 
     expect(preLi?.className).toBe("layui-disabled");
     expect(nextLi?.className).toBe("layui-disabled");
diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePickerV2/component/DatePicker.vue
index cf9a5111..6479d4ed 100644
--- a/packages/component/component/datePickerV2/component/DatePicker.vue
+++ b/packages/component/component/datePickerV2/component/DatePicker.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { UniquePickerProps } from "./interface";
 import type {
-  Shortcuts as ShortcutsType,
   DatePickerModelValueSingleType,
+  Shortcuts as ShortcutsType,
 } from "../interface";
 import { computed, ref, watch } from "vue";
 import dayjs, { type Dayjs } from "dayjs";
 
 import { isFunction } from "../../../utils";
 
+import { useBaseDatePicker } from "../hook/useBaseDatePicker";
+
 import LayButton from "../../button/index.vue";
 import Date from "./common/Date.vue";
 import Time from "./common/Time.vue";
@@ -25,13 +27,7 @@ const currentData = ref<UniquePickerProps["modelValue"]>();
 const showDate = ref<Dayjs>(dayjs());
 const currentType = ref();
 
-const getDefaultValue = () => {
-  const _defaultValue = dayjs(
-    props.defaultValue as DatePickerModelValueSingleType
-  );
-
-  return _defaultValue.isValid() ? _defaultValue : dayjs().startOf("day");
-};
+const { getDefaultValue } = useBaseDatePicker(props);
 
 watch(
   () => props.modelValue,
@@ -147,21 +143,14 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
     isFunction(shortcuts.value) ? shortcuts.value() : shortcuts.value
   ) as DatePickerModelValueSingleType;
 
-  currentData.value = dayjs(date, props.defaultFormat);
+  currentData.value = dayjs(date, props.format);
 
   handleConfirm();
 };
 
-// const formatValue = () => {
-//   // format 正确传 format后的格式，否则传Date对象
-//   return props.format
-//     ? dayjs(currentData.value).format(props.format)
-//     : dayjs(currentData.value).toDate();
-// };
-
 const footerValue = () => {
   return currentData.value
-    ? dayjs(currentData.value).format(props.defaultFormat)
+    ? dayjs(currentData.value).format(props.inputFormat)
     : "";
 };
 </script>
diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePickerV2/component/DateRange.vue
index 05624185..ca474c97 100644
--- a/packages/component/component/datePickerV2/component/DateRange.vue
+++ b/packages/component/component/datePickerV2/component/DateRange.vue
@@ -8,7 +8,8 @@ import type {
 import type { Shortcuts as ShortcutsType } from "../interface";
 
 import { useI18n } from "../../../language";
-import { setDateList } from "../util";
+import { normalizeDayjsValue, setDateList } from "../util";
+import { isArray } from "../../../utils";
 
 import LayIcon from "../../icon";
 import LayDropdown from "../../dropdown";
@@ -19,18 +20,20 @@ import Month from "./common/Month.vue";
 import Footer from "./common/Footer.vue";
 import Shortcuts from "./common/Shortcuts.vue";
 
+import { useBaseDatePicker } from "../hook/useBaseDatePicker";
 import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
 const { t } = useI18n();
+const { getDefaultValue } = useBaseDatePicker(props);
 const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref<Dayjs | null>();
 const endDate = ref<Dayjs | null>();
-const leftDate = ref<Dayjs>(dayjs().startOf("day"));
-const rightDate = ref<Dayjs>(dayjs().startOf("day").add(1, "month"));
+const leftDate = ref<Dayjs>(getDefaultValue());
+const rightDate = ref<Dayjs>(getDefaultValue().add(1, "month"));
 
 const hoverDate = ref<Dayjs | null>();
 
@@ -43,14 +46,6 @@ const monthRightRef = ref<DropdownRef>();
 const timeLeftRef = ref<DropdownRef>();
 const timeRightRef = ref<DropdownRef>();
 
-const leftDataList = computed(() => {
-  return setDateList(leftDate.value.year(), leftDate.value.month()) || [];
-});
-
-const rightDataList = computed(() => {
-  return setDateList(rightDate.value.year(), rightDate.value.month()) || [];
-});
-
 const MONTH_NAME = computed(() => [
   t("datePicker.january"),
   t("datePicker.february"),
@@ -66,30 +61,66 @@ 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"));
+});
+
+const setHMS = (date: Dayjs, referDate: Dayjs) => {
+  return date
+    .hour(referDate.hour())
+    .minute(referDate.minute())
+    .second(referDate.second());
+};
+
 watch(
   () => props.modelValue,
   () => {
     const [start, end] = props.modelValue;
     startDate.value = start;
     endDate.value = end;
-    leftDate.value = start || leftDate.value;
-    rightDate.value = end || rightDate.value;
+
+    const _defaultDate = getDefaultValue();
+    const _leftDate = _defaultTime.value[0]
+      ? setHMS(_defaultDate, _defaultTime.value[0])
+      : _defaultDate;
+
+    const _rightDate = _defaultTime.value[1]
+      ? setHMS(_defaultDate.add(1, "month"), _defaultTime.value[1])
+      : _defaultDate.add(1, "month");
+
+    leftDate.value = start || _leftDate;
+    rightDate.value = end || _rightDate;
   },
   { immediate: true }
 );
 
 watch(
   () => leftDate.value,
-  () => {
+  (leftDate) => {
     const old = rightDate.value.clone();
-    rightDate.value = leftDate.value
-      .add(1!, "month")
+
+    rightDate.value = leftDate
+      .add(1, "month")
       .set("hour", old.hour())
       .set("minute", old.minute())
       .set("second", old.second());
   }
 );
 
+const leftDataList = computed(() => {
+  return setDateList(leftDate.value.year(), leftDate.value.month()) || [];
+});
+
+const rightDataList = computed(() => {
+  return setDateList(rightDate.value.year(), rightDate.value.month()) || [];
+});
+
 const classes = computed(() => {
   return (item: DateContentSingleDateObject) => {
     const Date = dayjs(item.value);
@@ -247,7 +278,9 @@ const handleConfirm = () => {
               <span>{{ leftDate.year() }} {{ t("datePicker.year") }}</span>
               <template #content>
                 <Year
+                  class="layui-laydate"
                   :modelValue="leftDate"
+                  :showDate="leftDate"
                   @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearLeftRef!)"
                 ></Year>
               </template>
@@ -258,8 +291,9 @@ const handleConfirm = () => {
 
               <template #content>
                 <Month
+                  class="layui-laydate"
                   :modelValue="leftDate"
-                  :inputDate="leftDate"
+                  :showDate="leftDate"
                   dateType="month"
                   @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'month', monthLeftRef!)"
                 ></Month>
@@ -271,8 +305,9 @@ const handleConfirm = () => {
 
               <template #content>
                 <Time
+                  class="layui-laydate"
                   :modelValue="startDate || leftDate"
-                  :inputDate="startDate || leftDate"
+                  :showDate="startDate || leftDate"
                   @pick="handleChangeLeftTimePick"
                 ></Time>
               </template>
@@ -300,7 +335,9 @@ const handleConfirm = () => {
               <span>{{ rightDate.year() }} {{ t("datePicker.year") }}</span>
               <template #content>
                 <Year
-                  :modelValue="leftDate"
+                  class="layui-laydate"
+                  :modelValue="rightDate"
+                  :showDate="rightDate"
                   @pick="(val: Dayjs) => handleChangeYearMonthPick(val, 'year', yearRightRef!)"
                 ></Year>
               </template>
@@ -311,8 +348,9 @@ const handleConfirm = () => {
 
               <template #content>
                 <Month
-                  :modelValue="leftDate"
-                  :inputDate="leftDate"
+                  class="layui-laydate"
+                  :modelValue="rightDate"
+                  :showDate="rightDate"
                   dateType="month"
                   @pick="(val: Dayjs) => handleChangeYearMonthPick(val.subtract(1, 'month'), 'month', monthRightRef!)"
                 ></Month>
@@ -324,8 +362,9 @@ const handleConfirm = () => {
 
               <template #content>
                 <Time
+                  class="layui-laydate"
                   :modelValue="endDate || rightDate"
-                  :inputDate="endDate || rightDate"
+                  :showDate="endDate || rightDate"
                   @pick="handleChangeRightTimePick"
                 ></Time>
               </template>
diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePickerV2/component/MonthRange.vue
index f6e3c0cf..2637246c 100644
--- a/packages/component/component/datePickerV2/component/MonthRange.vue
+++ b/packages/component/component/datePickerV2/component/MonthRange.vue
@@ -2,7 +2,10 @@
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
 import type { RangePickerProps } from "./interface";
-import type { Shortcuts as ShortcutsType } from "../interface";
+import type {
+  DatePickerModelValueSingleType,
+  Shortcuts as ShortcutsType,
+} from "../interface";
 
 import { useI18n } from "../../../language";
 
@@ -31,13 +34,22 @@ const yearRightRef = ref<InstanceType<typeof LayDropdown>>();
 
 const hoverMonth = ref<Dayjs | undefined>();
 
+const getDefaultValue = () => {
+  const _defaultValue = dayjs(
+    props.defaultValue as DatePickerModelValueSingleType
+  );
+
+  return _defaultValue.isValid() ? _defaultValue : dayjs().startOf("day");
+};
+
 watch(
   () => props.modelValue,
   () => {
     const [start, end] = props.modelValue;
     startDate.value = start;
     endDate.value = end;
-    leftDate.value = start || dayjs();
+
+    leftDate.value = start || getDefaultValue();
   },
   { immediate: true }
 );
@@ -111,6 +123,7 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
 
   leftDate.value = shortcutsValues[0];
   rightDate.value = shortcutsValues[1];
+
   startDate.value = shortcutsValues[0];
   endDate.value = shortcutsValues[1];
 };
@@ -126,8 +139,8 @@ const handleConfirm = () => {
       <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
 
       <Month
-        :modelValue="leftDate"
-        :inputDate="leftDate"
+        :modelValue="startDate"
+        :showDate="leftDate"
         :classes="classes"
         :dateType="props.type"
         @pick="handleMonthPick"
@@ -146,7 +159,9 @@ const handleConfirm = () => {
               </div>
               <template #content>
                 <Year
+                  class="layui-laydate"
                   :modelValue="leftDate"
+                  :showDate="leftDate"
                   @pick="handleLeftYearChange"
                 ></Year>
               </template>
@@ -159,8 +174,8 @@ const handleConfirm = () => {
       </Month>
       <Month
         v-if="isYearMonth"
-        :modelValue="rightDate"
-        :inputDate="rightDate"
+        :modelValue="endDate"
+        :showDate="rightDate"
         :dateType="props.type"
         :classes="classes"
         @pick="handleMonthPick"
@@ -175,7 +190,12 @@ const handleConfirm = () => {
               >
             </div>
             <template #content>
-              <Year :modelValue="leftDate" @pick="handleRightYearChange"></Year>
+              <Year
+                class="layui-laydate"
+                :modelValue="rightDate"
+                :showDate="rightDate"
+                @pick="handleRightYearChange"
+              ></Year>
             </template>
           </LayDropdown>
 
diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePickerV2/component/TimeRange.vue
index fedd33ee..132f481e 100644
--- a/packages/component/component/datePickerV2/component/TimeRange.vue
+++ b/packages/component/component/datePickerV2/component/TimeRange.vue
@@ -21,12 +21,22 @@ const hookChangeShortcut = useShortcutsRange();
 const startDate = ref();
 const endDate = ref();
 
+const minMaxTime = (time: Dayjs) => {
+  if (time.isBefore(dayjs(props.min, props.format))) {
+    return dayjs(props.min, props.format);
+  } else if (time.isAfter(dayjs(props.max, props.format))) {
+    return dayjs(props.max, props.format);
+  }
+  return time;
+};
+
 watch(
   () => props.modelValue,
   () => {
     const [start, end] = props.modelValue;
-    startDate.value = start || dayjs();
-    endDate.value = end || dayjs().add(1, "hour");
+
+    startDate.value = start || minMaxTime(dayjs());
+    endDate.value = end || minMaxTime(dayjs().add(1, "hour"));
   },
   { immediate: true }
 );
@@ -68,7 +78,7 @@ const handleConfirm = () => {
 
       <Time
         :modelValue="startDate"
-        :inputDate="startDate"
+        :showDate="startDate"
         @pick="handleLeftTimePick"
       >
         <template #header>
@@ -77,7 +87,7 @@ const handleConfirm = () => {
       </Time>
       <Time
         :modelValue="endDate"
-        :inputDate="endDate"
+        :showDate="endDate"
         @pick="handleRightTimePick"
       >
         <template #header>
diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePickerV2/component/YearRange.vue
index ea2b983a..953fe880 100644
--- a/packages/component/component/datePickerV2/component/YearRange.vue
+++ b/packages/component/component/datePickerV2/component/YearRange.vue
@@ -2,18 +2,23 @@
 import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch } from "vue";
 import type { RangePickerProps } from "./interface";
-import type { Shortcuts as ShortcutsType } from "../interface";
+import type {
+  DatePickerModelValueSingleType,
+  Shortcuts as ShortcutsType,
+} from "../interface";
 
 import LayIcon from "../../icon";
 import Year from "./common/Year.vue";
 import Footer from "./common/Footer.vue";
 import Shortcuts from "./common/Shortcuts.vue";
 
+import { useBaseDatePicker } from "../hook/useBaseDatePicker";
 import { useShortcutsRange } from "../hook/useShortcutsRange";
 
 const props = withDefaults(defineProps<RangePickerProps>(), {});
 const emits = defineEmits(["pick"]);
 
+const { getDefaultValue } = useBaseDatePicker(props);
 const hookChangeShortcut = useShortcutsRange();
 
 const startDate = ref();
@@ -29,7 +34,8 @@ watch(
     const [start, end] = props.modelValue;
     startDate.value = start;
     endDate.value = end;
-    leftDate.value = start || dayjs();
+
+    leftDate.value = start || getDefaultValue();
   },
   { immediate: true }
 );
@@ -91,6 +97,7 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
 
   leftDate.value = shortcutsValues[0];
   rightDate.value = shortcutsValues[1];
+
   startDate.value = shortcutsValues[0];
   endDate.value = shortcutsValues[1];
 };
@@ -107,7 +114,7 @@ const handleConfirm = () => {
 
       <Year
         :modelValue="leftDate"
-        :inputDate="leftDate"
+        :showDate="leftDate"
         :classes="classes"
         @pick="handleYearPick"
         @hover-cell="handleYearHover"
@@ -127,7 +134,7 @@ const handleConfirm = () => {
       </Year>
       <Year
         :modelValue="rightDate"
-        :inputDate="rightDate"
+        :showDate="rightDate"
         :classes="classes"
         @pick="handleYearPick"
         @hover-cell="handleYearHover"
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePickerV2/component/common/InputBlock.vue
index 34462aa3..51425b9f 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePickerV2/component/common/InputBlock.vue
@@ -11,7 +11,7 @@ import LayDropdown from "../../../dropdown/index.vue";
 import LayInput from "../../../input/index.vue";
 
 import { dayjsToString, checkRangeValue } from "../../util";
-import { isArray, isNumber } from "../../../../utils";
+import { isArray, isNumber, isUndefined } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
 const emits = defineEmits([
@@ -97,7 +97,7 @@ const handleChange = () => {
     const checkDate = dayjs(inputValue.value as string, props.format);
 
     if (checkDate.isValid()) {
-      emits("update:modelValue", checkDate.format(props.format));
+      emits("update:modelValue", formatOutPutValue(checkDate)); //checkDate.format(props.format)
       currentInputValue.value = null;
     }
   } else {
@@ -183,9 +183,9 @@ const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
 
     if (startDate && endDate) {
       return [startDate, endDate].map((date: Dayjs) => {
-        return DatePickerContext.format
-          ? date.format(DatePickerContext.format)
-          : date.toDate();
+        return isUndefined(DatePickerContext.format)
+          ? date.toDate()
+          : date.format(DatePickerContext.format);
       });
     } else return [];
   } else {
@@ -196,9 +196,9 @@ const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
         : dates.valueOf();
     }
 
-    return DatePickerContext.format
-      ? dates.format(DatePickerContext.format)
-      : dates.toDate();
+    return isUndefined(DatePickerContext.format)
+      ? dates.toDate()
+      : dates.format(DatePickerContext.format);
   }
 };
 
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePickerV2/component/common/Time.vue
index e83e3dca..4a54cfab 100644
--- a/packages/component/component/datePickerV2/component/common/Time.vue
+++ b/packages/component/component/datePickerV2/component/common/Time.vue
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { inject, onMounted, ref, nextTick, watch, computed } from "vue";
+import { inject, ref, nextTick, watch, computed } from "vue";
 
 import type { BasePanelProps } from "../interface";
 
diff --git a/packages/component/component/datePickerV2/hook/useBaseDatePicker.ts b/packages/component/component/datePickerV2/hook/useBaseDatePicker.ts
new file mode 100644
index 00000000..0f3e792d
--- /dev/null
+++ b/packages/component/component/datePickerV2/hook/useBaseDatePicker.ts
@@ -0,0 +1,20 @@
+import dayjs from "dayjs";
+
+import type {
+  DatePickerContextType,
+  DatePickerModelValueSingleType,
+} from "../interface";
+
+export const useBaseDatePicker = (props: DatePickerContextType) => {
+  const getDefaultValue = () => {
+    const _defaultValue = dayjs(
+      props.defaultValue as DatePickerModelValueSingleType
+    );
+
+    return _defaultValue.isValid()
+      ? _defaultValue.startOf("day")
+      : dayjs().startOf("day");
+  };
+
+  return { getDefaultValue };
+};
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePickerV2/hook/useDatePicker.ts
index 107cce64..70de29d6 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePickerV2/hook/useDatePicker.ts
@@ -15,7 +15,7 @@ import MonthRange from "../component/MonthRange.vue";
 import YearRange from "../component/YearRange.vue";
 
 import { normalizeDayjsValue } from "../util";
-import { isArray, isNumber } from "../../../utils";
+import { isArray, isNumber, isUndefined } from "../../../utils";
 
 export const useDatePicker = (props: RequiredDatePickerProps) => {
   const initDate = computed<Dayjs | Array<Dayjs> | null>(() => {
@@ -23,7 +23,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
       const modelValue = isArray(props.modelValue) ? props.modelValue : [];
 
       return modelValue.map((date: DatePickerModelValueSingleType) => {
-        return normalizeDayjsValue(date, typeMap.value.format);
+        return normalizeDayjsValue(date, _format.value);
       }) as Array<Dayjs>;
     } else {
       let value = props.modelValue;
@@ -41,13 +41,22 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
 
       return normalizeDayjsValue(
         value as DatePickerModelValueSingleType,
-        typeMap.value.format
+        _format.value
       );
     }
   });
 
   const _format = computed(() => {
-    return props.format ?? typeMap.value.format;
+    if (!(props.format || isUndefined(props.format))) {
+      console.error(
+        "[Layui-vue/DatePicker] format格式错误。应为dayjs.format支持的格式化占位符列表或者undefined！"
+      );
+    }
+
+    // undefined 兼容dayjs_CustomParseFormat 第一参数为Date对象
+    return props.format || !isUndefined(props.format)
+      ? props.format
+      : typeMap.value.format;
   });
 
   const _inputFormat = computed(() => {
@@ -80,7 +89,6 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
     return {
       ...props,
       modelValue: initDate.value,
-      defaultFormat: typeMap.value.format,
       format: _format.value,
       inputFormat: _inputFormat.value,
     };
diff --git a/packages/component/component/datePickerV2/hook/useShortcutsRange.ts b/packages/component/component/datePickerV2/hook/useShortcutsRange.ts
index 1af8289a..fcf2aa8c 100644
--- a/packages/component/component/datePickerV2/hook/useShortcutsRange.ts
+++ b/packages/component/component/datePickerV2/hook/useShortcutsRange.ts
@@ -6,6 +6,7 @@ import {
   type DatePickerModelValueSingleType,
 } from "../interface";
 
+import { normalizeDayjsValue } from "../util";
 import { isFunction } from "../../../utils";
 
 export const useShortcutsRange = () => {
@@ -17,9 +18,9 @@ export const useShortcutsRange = () => {
     ) as Array<DatePickerModelValueSingleType>;
 
     return [
-      dayjs(dates[0], DatePickerContext.format),
-      dayjs(dates[1], DatePickerContext.format),
-    ];
+      normalizeDayjsValue(dates[0], DatePickerContext.format!),
+      normalizeDayjsValue(dates[1], DatePickerContext.format!),
+    ].filter(Boolean) as Array<Dayjs>;
   };
 
   return handleChangeShortcut;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
index 88ec0d81..fca293c7 100644
--- a/packages/component/component/datePickerV2/index.vue
+++ b/packages/component/component/datePickerV2/index.vue
@@ -36,6 +36,8 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   prefixIcon: "layui-icon-date",
   suffixIcon: "",
   timestamp: false,
+  defaultValue: null,
+  defaultTime: null,
   yearPage: 15,
   // yearStep: 1,
 });
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
index cf4b531a..7a802537 100644
--- a/packages/component/component/datePickerV2/interface.ts
+++ b/packages/component/component/datePickerV2/interface.ts
@@ -43,7 +43,9 @@ export interface DatePickerProps {
   defaultValue?:
     | DatePickerModelValueSingleType
     | Array<DatePickerModelValueSingleType>;
-  defaultTime?: string | Array<string>;
+  defaultTime?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
   yearPage?: number;
@@ -78,7 +80,6 @@ export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
 
 export interface DatePickerContextType extends RequiredDatePickerProps {
   modelValue: DatePickerValue;
-  defaultFormat: string;
 }
 
 export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePickerV2/util.ts
index ac7e40ce..6fc4720a 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePickerV2/util.ts
@@ -4,11 +4,12 @@ import { DateContentSingleDateObject } from "./component/interface";
 
 export const normalizeDayjsValue = (
   value: DatePickerModelValueSingleType,
-  format: string
+  format: string | undefined
 ): Dayjs | null => {
   const date = dayjs(value, format);
 
-  return date.isValid() ? date : dayjs(value).isValid() ? dayjs(value) : null;
+  // return date.isValid() ? date : dayjs(value).isValid() ? dayjs(value) : null;
+  return date.isValid() ? date : null;
 };
 
 export const dayjsToString = (
@@ -39,14 +40,24 @@ export const checkRangeValue = (values: Array<Dayjs | null>) => {
 export const getYears = (date?: Date | number, page = 15, step = 1) => {
   const years = [];
   const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
-  // console.log(y, page, step);
-  const r = (page % 2 ? page - 1 : page) / 2;
-  for (let i = y - r; i <= y + (page % 2 ? r : r - 1); i += step) {
+  const currentIndex = getPosition(y, page);
+
+  for (
+    let i = y - (currentIndex - 1);
+    i <= y + page - currentIndex;
+    i += step
+  ) {
     years.push(i);
   }
   return years;
 };
 
+const getPosition = (year: number, length: number): number => {
+  if (year === 0) return length;
+
+  return ((((year - 1) % length) + length) % length) + 1;
+};
+
 /**
  * 获取当前日期
  */
diff --git a/packages/component/utils/index.ts b/packages/component/utils/index.ts
index 7417170b..532c313e 100644
--- a/packages/component/utils/index.ts
+++ b/packages/component/utils/index.ts
@@ -4,3 +4,4 @@ export * from "./arrayUtil";
 export * from "./vueUtil";
 export * from "./treeUtil";
 export * from "./uuidUtil";
+export * from "./type";
diff --git a/packages/component/utils/type.ts b/packages/component/utils/type.ts
new file mode 100644
index 00000000..6d39039f
--- /dev/null
+++ b/packages/component/utils/type.ts
@@ -0,0 +1,23 @@
+export const isFunction = (val: unknown): val is Function =>
+  typeof val === "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());
+
+/**
+ * 过滤出非undefined | null | '' 的集合
+ * @param {any[]} val 数据源
+ * @returns {any[]} 过滤后数据
+ */
+export const normalizeValue = (val: any[]): any => {
+  return val.filter((v) => v !== undefined && v !== null && v !== "");
+};
+
+export const isNil = (val: any): boolean => {
+  return val === undefined || val === null;
+};
diff --git a/packages/component/utils/vueUtil.ts b/packages/component/utils/vueUtil.ts
index f644fb5c..59c636c9 100644
--- a/packages/component/utils/vueUtil.ts
+++ b/packages/component/utils/vueUtil.ts
@@ -55,27 +55,3 @@ export function kebabCase(key: string) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
 }
-
-export const isFunction = (val: unknown): val is Function =>
-  typeof val === "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());
-
-/**
- * 过滤出非undefined | null | '' 的集合
- * @param {any[]} val 数据源
- * @returns {any[]} 过滤后数据
- */
-export const normalizeValue = (val: any[]): any => {
-  return val.filter((v) => v !== undefined && v !== null && v !== "");
-};
-
-export const isNil = (val: any): boolean => {
-  return val === undefined || val === null;
-};
-- 
Gitee


From 28292d2d5af8e8a8e43e03845004df3537dff3f1 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Sat, 12 Oct 2024 14:31:27 +0800
Subject: [PATCH 31/45] chore: component name datePickerv2 > datePicker

---
 .../datePicker/__tests__/datePicker.test.tsx  |  206 +--
 .../datePicker/__tests__/yearPanel.test.tsx   |  216 ++-
 .../component/DatePicker.vue                  |    0
 .../component/DateRange.vue                   |    0
 .../component/MonthRange.vue                  |    0
 .../component/TimeRange.vue                   |    0
 .../component/YearRange.vue                   |    0
 .../component/common/Date.vue                 |    0
 .../component/common/DateContent.vue          |    0
 .../component/common/Footer.vue               |    0
 .../component/common/InputBlock.vue           |   17 +-
 .../component/common/Month.vue                |    0
 .../component/common/Shortcuts.vue            |    0
 .../component/common/Time.vue                 |    0
 .../component/common/Year.vue                 |    0
 .../component/interface.ts                    |    0
 .../datePicker/components/DatePanel.vue       |  156 --
 .../datePicker/components/DateRange.vue       |  390 -----
 .../datePicker/components/MonthPanel.vue      |  165 --
 .../datePicker/components/MonthRange.vue      |  306 ----
 .../datePicker/components/PanelFoot.vue       |   45 -
 .../datePicker/components/TimePanel.vue       |  219 ---
 .../datePicker/components/TimeRange.vue       |  291 ----
 .../datePicker/components/YearPanel.vue       |  210 ---
 .../components/components/DateContent.vue     |  198 ---
 .../component/component/datePicker/day.ts     |  111 --
 .../component/datePicker/font/iconfont.eot    |  Bin 2456 -> 0 bytes
 .../component/datePicker/font/iconfont.svg    |   45 -
 .../component/datePicker/font/iconfont.ttf    |  Bin 2272 -> 0 bytes
 .../component/datePicker/font/iconfont.woff   |  Bin 1492 -> 0 bytes
 .../hook/useBaseDatePicker.ts                 |    0
 .../hook/useDatePicker.ts                     |   15 +-
 .../{index.hooks.ts => hook/useProps.ts}      |    6 +-
 .../hook/useShortcutsRange.ts                 |    0
 .../component/component/datePicker/index.less | 1344 +++++++++--------
 .../component/component/datePicker/index.vue  |  484 +-----
 .../component/datePicker/interface.ts         |  112 +-
 .../{datePickerV2 => datePicker}/util.ts      |    9 +-
 .../datePickerV2/__tests__/yearPanel.test.tsx |  252 ----
 .../component/datePickerV2/index.less         |  697 ---------
 .../component/component/datePickerV2/index.ts |    5 -
 .../component/datePickerV2/index.vue          |   64 -
 .../component/datePickerV2/interface.ts       |   95 --
 packages/component/index.ts                   |    2 -
 44 files changed, 1138 insertions(+), 4522 deletions(-)
 rename packages/component/component/{datePickerV2 => datePicker}/component/DatePicker.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/DateRange.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/MonthRange.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/TimeRange.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/YearRange.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Date.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/DateContent.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Footer.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/InputBlock.vue (95%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Month.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Shortcuts.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Time.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/common/Year.vue (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/component/interface.ts (100%)
 delete mode 100644 packages/component/component/datePicker/components/DatePanel.vue
 delete mode 100644 packages/component/component/datePicker/components/DateRange.vue
 delete mode 100644 packages/component/component/datePicker/components/MonthPanel.vue
 delete mode 100644 packages/component/component/datePicker/components/MonthRange.vue
 delete mode 100644 packages/component/component/datePicker/components/PanelFoot.vue
 delete mode 100644 packages/component/component/datePicker/components/TimePanel.vue
 delete mode 100644 packages/component/component/datePicker/components/TimeRange.vue
 delete mode 100644 packages/component/component/datePicker/components/YearPanel.vue
 delete mode 100644 packages/component/component/datePicker/components/components/DateContent.vue
 delete mode 100644 packages/component/component/datePicker/day.ts
 delete mode 100644 packages/component/component/datePicker/font/iconfont.eot
 delete mode 100644 packages/component/component/datePicker/font/iconfont.svg
 delete mode 100644 packages/component/component/datePicker/font/iconfont.ttf
 delete mode 100644 packages/component/component/datePicker/font/iconfont.woff
 rename packages/component/component/{datePickerV2 => datePicker}/hook/useBaseDatePicker.ts (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/hook/useDatePicker.ts (82%)
 rename packages/component/component/datePicker/{index.hooks.ts => hook/useProps.ts} (57%)
 rename packages/component/component/{datePickerV2 => datePicker}/hook/useShortcutsRange.ts (100%)
 rename packages/component/component/{datePickerV2 => datePicker}/util.ts (93%)
 delete mode 100644 packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
 delete mode 100644 packages/component/component/datePickerV2/index.less
 delete mode 100644 packages/component/component/datePickerV2/index.ts
 delete mode 100644 packages/component/component/datePickerV2/index.vue
 delete mode 100644 packages/component/component/datePickerV2/interface.ts

diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
index 4263e9f8..aa25a09a 100644
--- a/packages/component/component/datePicker/__tests__/datePicker.test.tsx
+++ b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -1,103 +1,103 @@
-import { mount } from "@vue/test-utils";
-import { afterEach, describe, expect, test } from "vitest";
-
-import LayDatePicker from "../index.vue";
-import { nextTick } from "vue";
-
-describe("LayDatePicker", () => {
-  afterEach(() => {
-    const popperDom = document.body.querySelector(".layui-popper");
-    if (popperDom) {
-      popperDom.remove();
-    }
-  });
-
-  test("modelValue", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "2024/10/01 10:00:00",
-      },
-    });
-
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.props() as any).modelValue).toBe("2024/10/01 10:00:00");
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/01 00:00:00").getTime()
-    );
-  });
-
-  test("modelValue 修改", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "2024/10/01 10:00:00",
-      },
-    });
-
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    wrapper.setProps({
-      modelValue: "2024/10/02 10:00:00",
-    });
-    await nextTick();
-    expect((component.props() as any).modelValue).toBe("2024/10/02 10:00:00");
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/02 00:00:00").getTime()
-    );
-  });
-
-  test("modelValue 负数时间", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "1970/01/01 00:00:00",
-      },
-    });
-
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.props() as any).modelValue).toBe("1970/01/01 00:00:00");
-    expect((component.vm as any).currentYear).toBe(1970);
-    expect((component.vm as any).currentMonth).toBe(1 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("1970/01/01 00:00:00").getTime()
-    );
-  });
-
-  test("timestamp 负数时间", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        timestamp: true,
-        modelValue: -1,
-      },
-    });
-
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.vm as any).currentYear).toBe(1970);
-    expect((component.vm as any).currentMonth).toBe(1 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("1970/01/01 00:00:00").getTime()
-    );
-  });
-
-  test("format", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "2024/10/01 10:00:00",
-        format: "MM-dd",
-      },
-    });
-
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/01 00:00:00").getTime()
-    );
-  });
-});
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test } from "vitest";
+
+import LayDatePicker from "../index.vue";
+import { nextTick } from "vue";
+
+describe("LayDatePicker", () => {
+  afterEach(() => {
+    const popperDom = document.body.querySelector(".layui-popper");
+    if (popperDom) {
+      popperDom.remove();
+    }
+  });
+
+  test("modelValue", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("2024/10/01 10:00:00");
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/01 00:00:00").getTime()
+    );
+  });
+
+  test("modelValue 修改", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    wrapper.setProps({
+      modelValue: "2024/10/02 10:00:00",
+    });
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("2024/10/02 10:00:00");
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/02 00:00:00").getTime()
+    );
+  });
+
+  test("modelValue 负数时间", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "1970/01/01 00:00:00",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.props() as any).modelValue).toBe("1970/01/01 00:00:00");
+    expect((component.vm as any).currentYear).toBe(1970);
+    expect((component.vm as any).currentMonth).toBe(1 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("1970/01/01 00:00:00").getTime()
+    );
+  });
+
+  test("timestamp 负数时间", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        timestamp: true,
+        modelValue: -1,
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.vm as any).currentYear).toBe(1970);
+    expect((component.vm as any).currentMonth).toBe(1 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("1970/01/01 00:00:00").getTime()
+    );
+  });
+
+  test("format", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        modelValue: "2024/10/01 10:00:00",
+        format: "MM-dd",
+      },
+    });
+
+    const component = wrapper.findComponent(LayDatePicker);
+    await nextTick();
+    expect((component.vm as any).currentYear).toBe(2024);
+    expect((component.vm as any).currentMonth).toBe(10 - 1);
+    expect((component.vm as any).currentDay).toBe(
+      new Date("2024/10/01 00:00:00").getTime()
+    );
+  });
+});
diff --git a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
index 736e52f0..09d86d7f 100644
--- a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
@@ -1,19 +1,27 @@
 import { mount } from "@vue/test-utils";
 import { afterEach, describe, expect, test } from "vitest";
-import { nextTick } from "vue";
+import { nextTick, ref } from "vue";
 import { sleep } from "../../../test-utils";
 
 import LayDatePicker from "../index.vue";
 import LayDropdown from "../../dropdown/index.vue";
-import YearPanel from "../components/YearPanel.vue";
-import { getYears } from "../day";
+import Year from "../component/common/Year.vue";
+import Footer from "../component/common/Footer.vue";
+import Shortcuts from "../component/common/Shortcuts.vue";
+import { getYears } from "../util";
+
+const mockInputClick = async (wrapper: any) => {
+  await wrapper.find(".layui-input").trigger("click");
+  await nextTick();
+  await sleep();
+};
 
 describe("YearPanel", () => {
   afterEach(() => {
     document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
   });
 
-  test("render", async () => {
+  test("year render", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
         type: "year",
@@ -24,16 +32,19 @@ describe("YearPanel", () => {
     const datePickerInstance = wrapper.findComponent(LayDatePicker);
     const dropdownInstance = datePickerInstance.findComponent(LayDropdown);
     await nextTick();
-    datePickerInstance.find(".layui-input").trigger("click");
+
+    await datePickerInstance.find(".layui-input").trigger("click");
     await nextTick();
     await sleep();
-    const yearPanelInstance = datePickerInstance.findComponent(YearPanel);
+
+    const yearPanelInstance = datePickerInstance.findComponent(Year);
+
     expect(dropdownInstance.exists()).toBe(true);
     expect((dropdownInstance.vm as any).open).toBe(true);
     expect(yearPanelInstance.findAll("li").length).toBe(getYears().length);
   });
 
-  test("year 修改", async () => {
+  test("year 外部修改modelValue 内部状态更新", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
         type: "year",
@@ -43,18 +54,199 @@ describe("YearPanel", () => {
 
     const datePickerInstance = wrapper.findComponent(LayDatePicker);
     await nextTick();
-    datePickerInstance.find(".layui-input").trigger("click");
+    await datePickerInstance.find(".layui-input").trigger("click");
     await nextTick();
     await sleep();
-    const yearPanelInstance = datePickerInstance.findComponent(YearPanel);
+
+    const yearPanelInstance = datePickerInstance.findComponent(Year);
     expect(yearPanelInstance.exists()).toBe(true);
-    expect((yearPanelInstance.vm as any).Year).toBe(2024);
+    expect((yearPanelInstance.vm as any).currentYear).toBe(2024);
 
     wrapper.setProps({
       modelValue: "2023/10/01 10:00:00",
     });
     await nextTick();
-    // FIXME : 修改 modelValue 后，YearPanel 的 Year 属性没有更新
-    // expect((yearPanelInstance.vm as any).Year).toBe(2023);
+    await sleep();
+
+    expect((yearPanelInstance.vm as any).currentYear).toBe(2023);
+  });
+
+  test("year yearPage", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+        yearPage: 20,
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const yearLis = wrapper
+      .findComponent(Year)
+      .findAll(".laydate-year-list li");
+
+    expect(yearLis.length).toBe(20);
+  });
+
+  test("year 点击年份 触发update:modelValue and change emit", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "year",
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const yearLis = wrapper
+      .findComponent(Year)
+      .findAll(".laydate-year-list li");
+
+    await yearLis[0].trigger("click");
+
+    const datePicker = wrapper.findComponent(LayDatePicker);
+
+    const confirmBtn = wrapper
+      .findComponent(Footer)
+      .find(".laydate-footer-btns .laydate-btns-confirm");
+
+    await confirmBtn.trigger("click");
+
+    expect(datePicker.emitted()).toHaveProperty("update:modelValue");
+    expect(datePicker.emitted()).toHaveProperty("change");
+
+    expect(datePicker.emitted().change[0]).toEqual(["2011"]);
+    expect(datePicker.emitted()["update:modelValue"][0]).toEqual(["2011"]);
+  });
+
+  test("year 手动改变input 触发改变modelValue", async () => {
+    const dateValue = ref();
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker type="year" v-model={dateValue.value}></LayDatePicker>
+        );
+      },
+    });
+
+    const inputDom = wrapper.find("input");
+
+    inputDom.element.value = "2025";
+    await inputDom.trigger("input");
+    await inputDom.trigger("change");
+
+    await sleep();
+    const datePicker = wrapper.findComponent(LayDatePicker);
+    expect(datePicker.props("modelValue")).toEqual("2025");
+
+    await mockInputClick(wrapper);
+    const YearInstance = wrapper.findComponent(Year);
+    const currentLi = YearInstance.find(".laydate-year-list .layui-this");
+    expect(currentLi.text()).toEqual("2025");
+  });
+
+  test("year simple", async () => {
+    const dateValue = ref();
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker
+            type="year"
+            v-model={dateValue.value}
+            simple={true}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const FooterInstance = wrapper.findComponent(Footer);
+
+    const confirmBtn = FooterInstance.find(
+      ".laydate-footer-btns .laydate-btns-confirm"
+    );
+
+    expect(confirmBtn.exists()).toBeFalsy();
+
+    const YearInstance = wrapper.findComponent(Year);
+    const lis = YearInstance.findAll(".laydate-year-list li");
+    await lis[0].trigger("click");
+
+    const datePicker = wrapper.findComponent(LayDatePicker);
+    expect(datePicker.props("modelValue")).toBe("2011");
+  });
+
+  test("year min/max", async () => {
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker type="year" min="2023" max="2024"></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const YearInstance = wrapper.findComponent(Year);
+    const currentLi = YearInstance.find(
+      ".laydate-year-list .layui-laydate-current"
+    );
+
+    const preLi =
+      currentLi.element.previousElementSibling?.previousElementSibling;
+    const nextLi = currentLi.element.nextElementSibling;
+
+    expect(preLi?.className).toBe("layui-disabled");
+    expect(nextLi?.className).toBe("layui-disabled");
+  });
+
+  test("year shortcuts", async () => {
+    const dateValue = ref();
+
+    const wrapper = mount({
+      setup() {
+        const shortcuts = [
+          {
+            text: "明年",
+            value: "2025",
+          },
+          {
+            text: "后年",
+            value: "2026",
+          },
+        ];
+
+        return () => (
+          <LayDatePicker
+            type="year"
+            v-model={dateValue.value}
+            shortcuts={shortcuts}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const DatePicker = wrapper.findComponent(LayDatePicker);
+    const ShortcutsDom = wrapper.findComponent(Shortcuts);
+    const YearInstance = wrapper.findComponent(Year);
+    const FooterInstance = wrapper.findComponent(Footer);
+    const ShortcutsLi = ShortcutsDom.findAll("li");
+
+    expect(ShortcutsLi.length).toBe(2);
+
+    await ShortcutsLi[1].trigger("click");
+
+    const thisLi = YearInstance.find(".layui-this");
+    expect(thisLi.text()).toBe("2026");
+
+    const confirmBtn = FooterInstance.find(
+      ".laydate-footer-btns .laydate-btns-confirm"
+    );
+
+    await confirmBtn.trigger("click");
+
+    expect(DatePicker.props("modelValue")).toBe("2026");
   });
 });
diff --git a/packages/component/component/datePickerV2/component/DatePicker.vue b/packages/component/component/datePicker/component/DatePicker.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/DatePicker.vue
rename to packages/component/component/datePicker/component/DatePicker.vue
diff --git a/packages/component/component/datePickerV2/component/DateRange.vue b/packages/component/component/datePicker/component/DateRange.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/DateRange.vue
rename to packages/component/component/datePicker/component/DateRange.vue
diff --git a/packages/component/component/datePickerV2/component/MonthRange.vue b/packages/component/component/datePicker/component/MonthRange.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/MonthRange.vue
rename to packages/component/component/datePicker/component/MonthRange.vue
diff --git a/packages/component/component/datePickerV2/component/TimeRange.vue b/packages/component/component/datePicker/component/TimeRange.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/TimeRange.vue
rename to packages/component/component/datePicker/component/TimeRange.vue
diff --git a/packages/component/component/datePickerV2/component/YearRange.vue b/packages/component/component/datePicker/component/YearRange.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/YearRange.vue
rename to packages/component/component/datePicker/component/YearRange.vue
diff --git a/packages/component/component/datePickerV2/component/common/Date.vue b/packages/component/component/datePicker/component/common/Date.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Date.vue
rename to packages/component/component/datePicker/component/common/Date.vue
diff --git a/packages/component/component/datePickerV2/component/common/DateContent.vue b/packages/component/component/datePicker/component/common/DateContent.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/DateContent.vue
rename to packages/component/component/datePicker/component/common/DateContent.vue
diff --git a/packages/component/component/datePickerV2/component/common/Footer.vue b/packages/component/component/datePicker/component/common/Footer.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Footer.vue
rename to packages/component/component/datePicker/component/common/Footer.vue
diff --git a/packages/component/component/datePickerV2/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
similarity index 95%
rename from packages/component/component/datePickerV2/component/common/InputBlock.vue
rename to packages/component/component/datePicker/component/common/InputBlock.vue
index 51425b9f..633abb1d 100644
--- a/packages/component/component/datePickerV2/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -183,22 +183,21 @@ const formatOutPutValue = (dates: Dayjs | Array<Dayjs>) => {
 
     if (startDate && endDate) {
       return [startDate, endDate].map((date: Dayjs) => {
-        return isUndefined(DatePickerContext.format)
-          ? date.toDate()
-          : date.format(DatePickerContext.format);
+        return date.format(DatePickerContext.format);
       });
     } else return [];
   } else {
     // 兼容 timestamp属性
     if (["date", "datetime"].includes(props.type!) && props.timestamp) {
-      return props.type === "date"
-        ? dates.startOf("day").valueOf()
-        : dates.valueOf();
+      const unix =
+        props.type === "date"
+          ? dates.startOf("day").valueOf()
+          : dates.valueOf();
+
+      return Math.floor(unix / 1000) * 1000;
     }
 
-    return isUndefined(DatePickerContext.format)
-      ? dates.toDate()
-      : dates.format(DatePickerContext.format);
+    return dates.format(DatePickerContext.format);
   }
 };
 
diff --git a/packages/component/component/datePickerV2/component/common/Month.vue b/packages/component/component/datePicker/component/common/Month.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Month.vue
rename to packages/component/component/datePicker/component/common/Month.vue
diff --git a/packages/component/component/datePickerV2/component/common/Shortcuts.vue b/packages/component/component/datePicker/component/common/Shortcuts.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Shortcuts.vue
rename to packages/component/component/datePicker/component/common/Shortcuts.vue
diff --git a/packages/component/component/datePickerV2/component/common/Time.vue b/packages/component/component/datePicker/component/common/Time.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Time.vue
rename to packages/component/component/datePicker/component/common/Time.vue
diff --git a/packages/component/component/datePickerV2/component/common/Year.vue b/packages/component/component/datePicker/component/common/Year.vue
similarity index 100%
rename from packages/component/component/datePickerV2/component/common/Year.vue
rename to packages/component/component/datePicker/component/common/Year.vue
diff --git a/packages/component/component/datePickerV2/component/interface.ts b/packages/component/component/datePicker/component/interface.ts
similarity index 100%
rename from packages/component/component/datePickerV2/component/interface.ts
rename to packages/component/component/datePicker/component/interface.ts
diff --git a/packages/component/component/datePicker/components/DatePanel.vue b/packages/component/component/datePicker/components/DatePanel.vue
deleted file mode 100644
index 864d18e4..00000000
--- a/packages/component/component/datePicker/components/DatePanel.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0">
-      <div class="layui-laydate-header">
-        <i
-          class="layui-icon laydate-icon laydate-prev-y"
-          @click="changeYearOrMonth('year', -1)"
-          ></i
-        >
-        <i
-          class="layui-icon laydate-icon laydate-prev-m"
-          @click="changeYearOrMonth('month', -1)"
-          ></i
-        >
-        <div class="laydate-set-ym">
-          <span @click="datePicker.showPanel.value = 'year'"
-            >{{ datePicker.currentYear.value }} {{ t("datePicker.year") }}</span
-          >
-          <span @click="datePicker.showPanel.value = 'month'">
-            {{ MONTH_NAME[datePicker.currentMonth.value] }}
-          </span>
-        </div>
-        <i
-          class="layui-icon laydate-icon laydate-next-m"
-          @click="changeYearOrMonth('month', 1)"
-          ></i
-        >
-        <i
-          class="layui-icon laydate-icon laydate-next-y"
-          @click="changeYearOrMonth('year', 1)"
-          ></i
-        >
-      </div>
-      <DateContent
-        :date-list="dateList"
-        v-model="Day"
-        @simple="footOnOk"
-        @update:model-value="ChildUpdateModelValue"
-      ></DateContent>
-      <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-        <span
-          v-if="datePicker.type === 'datetime'"
-          @click="datePicker.showPanel.value = 'time'"
-          class="laydate-btns-time"
-          >{{ t("datePicker.selectTime") }}</span
-        >
-      </PanelFoot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, ref, watch } from "vue";
-import { provideType } from "../interface";
-import { setDateList } from "../day";
-import PanelFoot from "./PanelFoot.vue";
-import DateContent from "./components/DateContent.vue";
-import dayjs from "dayjs";
-import { useI18n } from "../../../language";
-
-export interface TimePanelProps {
-  modelValue: number;
-}
-
-defineOptions({
-  name: "DatePanel",
-});
-
-const { t } = useI18n();
-const props = withDefaults(defineProps<TimePanelProps>(), {});
-const emits = defineEmits(["update:modelValue", "ok"]);
-const Day = ref(props.modelValue);
-const datePicker: provideType = inject("datePicker") as provideType;
-const dateList = ref<any>([]);
-
-const MONTH_NAME = computed(() => [
-  t("datePicker.january"),
-  t("datePicker.february"),
-  t("datePicker.march"),
-  t("datePicker.april"),
-  t("datePicker.may"),
-  t("datePicker.june"),
-  t("datePicker.july"),
-  t("datePicker.august"),
-  t("datePicker.september"),
-  t("datePicker.october"),
-  t("datePicker.november"),
-  t("datePicker.december"),
-]);
-
-// 监听年月, 刷新日期
-watch(
-  [datePicker.currentYear, datePicker.currentMonth],
-  () => {
-    dateList.value = setDateList(
-      datePicker.currentYear.value,
-      datePicker.currentMonth.value
-    );
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.modelValue,
-  () => {
-    Day.value = props.modelValue;
-  }
-);
-
-// 切换年月
-const changeYearOrMonth = (type: "year" | "month", num: number) => {
-  if (type === "year") {
-    datePicker.currentYear.value += num;
-  } else {
-    let month = datePicker.currentMonth.value + num;
-    if (month > 11) {
-      month = 0;
-      datePicker.currentYear.value++;
-    } else if (month < 0) {
-      month = 11;
-      datePicker.currentYear.value--;
-    }
-    datePicker.currentMonth.value = month;
-  }
-};
-
-//关闭回调
-const footOnOk = () => {
-  emits("update:modelValue", Day.value);
-  datePicker.ok();
-};
-
-//现在回调
-const footOnNow = () => {
-  if (datePicker.max.value && dayjs().isAfter(dayjs(datePicker.max.value))) {
-    return;
-  }
-  if (datePicker.min.value && dayjs().isBefore(dayjs(datePicker.min.value))) {
-    return;
-  }
-  datePicker.currentYear.value = dayjs().year();
-  datePicker.currentMonth.value = dayjs().month();
-  datePicker.currentDay.value = new Date(new Date().toDateString()).getTime();
-  Day.value = datePicker.currentDay.value;
-};
-
-//清空回调
-const footOnClear = () => {
-  Day.value = -1;
-  datePicker.currentDay.value = -1;
-};
-
-const ChildUpdateModelValue = () => {
-  emits("update:modelValue", Day.value);
-};
-</script>
diff --git a/packages/component/component/datePicker/components/DateRange.vue b/packages/component/component/datePicker/components/DateRange.vue
deleted file mode 100644
index 20b61f21..00000000
--- a/packages/component/component/datePicker/components/DateRange.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
-  <div
-    class="layui-laydate layui-laydate-range"
-    :class="'layui-laydate-range-' + datePicker.showPanel.value"
-  >
-    <div style="display: flex">
-      <div class="layui-laydate-main laydate-main-list-0">
-        <div class="layui-laydate-header">
-          <i
-            class="layui-icon laydate-icon laydate-prev-y"
-            @click="changeYearOrMonth('year', -1)"
-            ></i
-          >
-          <i
-            class="layui-icon laydate-icon laydate-prev-m"
-            @click="changeYearOrMonth('month', -1)"
-            ></i
-          >
-          <div class="laydate-set-ym">
-            <lay-dropdown ref="dropdownYearPanelRefLeft">
-              <span class="laydate-range-time"
-                >{{ startTime.year || "--" }} {{ t("datePicker.year") }}</span
-              >
-              <template #content>
-                <YearPanel
-                  class="time-panel"
-                  v-model="startTime.year"
-                  @ok="closeTimePanel"
-                ></YearPanel>
-              </template>
-            </lay-dropdown>
-            <lay-dropdown ref="dropdownMonthPanelRefLeft">
-              <span class="laydate-range-time">
-                {{ MONTH_NAME[startTime.month] }}</span
-              >
-              <template #content>
-                <MonthPanel
-                  class="time-panel"
-                  v-model="startTime.month"
-                  @ok="closeTimePanel"
-                ></MonthPanel>
-              </template>
-            </lay-dropdown>
-            <lay-dropdown
-              ref="dropdownTimePanelRefLeft"
-              v-if="datePicker.type === 'datetime'"
-            >
-              <span class="laydate-range-time">
-                {{
-                  dayjs()
-                    .hour(startTime.hms.hh)
-                    .minute(startTime.hms.mm)
-                    .second(startTime.hms.ss)
-                    .format("HH:mm:ss")
-                }}
-              </span>
-              <template #content>
-                <TimePanel
-                  v-model="startTime.hms"
-                  class="time-panel"
-                  @ok="closeTimePanel"
-                ></TimePanel>
-              </template>
-            </lay-dropdown>
-          </div>
-        </div>
-        <DateContent
-          :date-list="prevDateList"
-          v-model:hoverDate="hoverDate"
-          v-model:startDate="startTime.day"
-          v-model:endDate="endTime.day"
-        ></DateContent>
-      </div>
-      <div class="layui-laydate-main laydate-main-list-0">
-        <div class="layui-laydate-header">
-          <div class="laydate-set-ym">
-            <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time"
-                >{{
-                  startTime.month + 1 > 11 ? startTime.year + 1 : startTime.year
-                }}
-                {{ t("datePicker.year") }}</span
-              >
-              <template #content>
-                <YearPanel
-                  class="time-panel"
-                  v-model="endTime.year"
-                  @ok="closeRightYearPanel"
-                ></YearPanel>
-              </template>
-            </lay-dropdown>
-            <lay-dropdown ref="dropdownMonthPanelRefRight">
-              <span class="laydate-range-time">
-                {{
-                  MONTH_NAME[
-                    startTime.month + 1 > 11
-                      ? startTime.month + 1 - 12
-                      : startTime.month + 1
-                  ]
-                }}
-              </span>
-              <template #content>
-                <MonthPanel
-                  class="time-panel"
-                  v-model="endTime.month"
-                  @ok="closeRightMonthPanel"
-                ></MonthPanel>
-              </template>
-            </lay-dropdown>
-            <lay-dropdown
-              ref="dropdownTimePanelRefRight"
-              v-if="datePicker.type === 'datetime'"
-            >
-              <span class="laydate-range-time">
-                {{
-                  dayjs()
-                    .hour(endTime.hms.hh)
-                    .minute(endTime.hms.mm)
-                    .second(endTime.hms.ss)
-                    .format("HH:mm:ss")
-                }}
-              </span>
-              <template #content>
-                <TimePanel
-                  v-model="endTime.hms"
-                  class="time-panel"
-                  @ok="closeTimePanel"
-                ></TimePanel>
-              </template>
-            </lay-dropdown>
-          </div>
-          <i
-            class="layui-icon laydate-icon laydate-next-m"
-            @click="changeYearOrMonth('month', 1)"
-            ></i
-          >
-          <i
-            class="layui-icon laydate-icon laydate-next-y"
-            @click="changeYearOrMonth('year', 1)"
-            ></i
-          >
-        </div>
-        <DateContent
-          :date-list="nextDateList"
-          v-model:hoverDate="hoverDate"
-          v-model:startDate="startTime.day"
-          v-model:endDate="endTime.day"
-        ></DateContent>
-      </div>
-    </div>
-    <PanelFoot
-      @ok="footOnOk"
-      :showNow="false"
-      @now="footOnNow"
-      @clear="footOnClear"
-    >
-      <span v-if="startTime.day !== -1" class="layui-laydate-preview">
-        {{ dayjs(startTime.day).format("YYYY-MM-DD") }}
-        <template v-if="datePicker.type === 'datetime'">
-          {{
-            dayjs()
-              .hour(startTime.hms.hh)
-              .minute(startTime.hms.mm)
-              .second(startTime.hms.ss)
-              .format("HH:mm:ss")
-          }}
-        </template>
-        {{ datePicker.rangeSeparator }}
-        <template v-if="endTime.day !== -1">
-          {{ dayjs(endTime.day).format("YYYY-MM-DD") }}
-          <template v-if="datePicker.type === 'datetime'">
-            {{
-              dayjs()
-                .hour(endTime.hms.hh)
-                .minute(endTime.hms.mm)
-                .second(endTime.hms.ss)
-                .format("HH:mm:ss")
-            }}
-          </template>
-        </template>
-        <template v-else> -- </template>
-      </span>
-    </PanelFoot>
-  </div>
-</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";
-import PanelFoot from "./PanelFoot.vue";
-import DateContent from "./components/DateContent.vue";
-import TimePanel from "./TimePanel.vue";
-import YearPanel from "./YearPanel.vue";
-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;
-}
-
-defineOptions({
-  name: "DateRange",
-});
-
-const props = withDefaults(defineProps<DateRangeProps>(), {});
-const emits = defineEmits([
-  "update:modelValue",
-  "update:startTime",
-  "update:endTime",
-]);
-
-const datePicker: provideType = inject("datePicker") as provideType;
-
-const { t } = useI18n();
-
-const MONTH_NAME = computed(() => [
-  t("datePicker.january"),
-  t("datePicker.february"),
-  t("datePicker.march"),
-  t("datePicker.april"),
-  t("datePicker.may"),
-  t("datePicker.june"),
-  t("datePicker.july"),
-  t("datePicker.august"),
-  t("datePicker.september"),
-  t("datePicker.october"),
-  t("datePicker.november"),
-  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()
-      : 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()
-      : 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);
-
-// 切换年月
-const changeYearOrMonth = (type: "year" | "month", num: number) => {
-  if (type === "year") {
-    startTime.year += num;
-  } else {
-    let month = startTime.month + num;
-    if (month > 11) {
-      month = 0;
-      startTime.year++;
-    } else if (month < 0) {
-      month = 11;
-      startTime.year--;
-    }
-    startTime.month = month;
-  }
-};
-
-// 监听年月, 刷新日期
-watch(
-  () => [startTime.year, startTime.month],
-  () => {
-    prevDateList.value = setDateList(startTime.year, startTime.month);
-    nextDateList.value = setDateList(startTime.year, startTime.month + 1);
-  },
-  { immediate: true }
-);
-
-//关闭选择时间的面板
-const dropdownTimePanelRefLeft = ref();
-const dropdownTimePanelRefRight = ref();
-const dropdownYearPanelRefLeft = ref();
-const dropdownYearPanelRefRight = ref();
-const dropdownMonthPanelRefLeft = ref();
-const dropdownMonthPanelRefRight = ref();
-const closeTimePanel = () => {
-  if (dropdownTimePanelRefLeft.value) dropdownTimePanelRefLeft.value.hide();
-  if (dropdownTimePanelRefRight.value) dropdownTimePanelRefRight.value.hide();
-  if (dropdownYearPanelRefLeft.value) dropdownYearPanelRefLeft.value.hide();
-  if (dropdownMonthPanelRefLeft.value) dropdownMonthPanelRefLeft.value.hide();
-};
-const closeRightYearPanel = () => {
-  if (dropdownYearPanelRefRight.value) dropdownYearPanelRefRight.value.hide();
-  startTime.year = endTime.year;
-};
-const closeRightMonthPanel = () => {
-  dropdownMonthPanelRefRight.value.hide();
-  let month = endTime.month - 1;
-  if (month > 11) {
-    month = 0;
-    startTime.year++;
-  } else if (month < 0) {
-    month = 11;
-    startTime.year--;
-  }
-  startTime.month = month;
-};
-
-//关闭回调
-const footOnOk = () => {
-  let format =
-    datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  let startTimeVal =
-    startTime.day !== -1 && endTime.day !== -1
-      ? dayjs(startTime.day)
-          .hour(startTime.hms.hh)
-          .minute(startTime.hms.mm)
-          .second(startTime.hms.ss)
-          .format(format)
-      : "";
-  let endTimeVal =
-    startTime.day !== -1 && endTime.day !== -1
-      ? dayjs(endTime.day)
-          .hour(endTime.hms.hh)
-          .minute(endTime.hms.mm)
-          .second(endTime.hms.ss)
-          .format(format)
-      : "";
-  emits("update:startTime", startTimeVal);
-  emits("update:endTime", endTimeVal);
-  datePicker.ok();
-};
-
-//现在回调
-const footOnNow = () => {
-  startTime.year = dayjs().year();
-  startTime.month = dayjs().month();
-  startTime.day = new Date(new Date().toDateString()).getTime();
-  startTime.hms.hh = dayjs().hour();
-  startTime.hms.mm = dayjs().minute();
-  startTime.hms.ss = dayjs().second();
-  endTime.day = -1;
-};
-
-//清空回调
-const footOnClear = () => {
-  startTime.day = -1;
-  endTime.day = -1;
-};
-</script>
diff --git a/packages/component/component/datePicker/components/MonthPanel.vue b/packages/component/component/datePicker/components/MonthPanel.vue
deleted file mode 100644
index a58042a5..00000000
--- a/packages/component/component/datePicker/components/MonthPanel.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-      <div class="layui-laydate-header">
-        <div class="laydate-set-ym">
-          <span @click="datePicker.showPanel.value = 'month'">{{
-            typeof Month !== "string"
-              ? MONTH_NAME[Month]
-              : t("datePicker.selectMonth")
-          }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="layui-laydate-content" style="height: 220px">
-      <ul class="layui-laydate-list laydate-month-list">
-        <li
-          v-for="item of MONTH_NAME"
-          :key="item"
-          :class="{
-            'layui-this': MONTH_NAME.indexOf(item) === Month,
-            'layui-laydate-current':
-              Month === '' && parseInt(item) - 1 === dayjs().month(),
-            'layui-disabled': cellDisabled(item),
-          }"
-          @click="handleMonthClick(item)"
-        >
-          {{ item.slice(0, 3) }}
-        </li>
-      </ul>
-    </div>
-    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span
-        v-if="datePicker.type === 'yearmonth'"
-        @click="datePicker.showPanel.value = 'year'"
-        class="laydate-btns-time"
-        >{{ t("datePicker.selectYear") }}</span
-      >
-    </PanelFoot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import dayjs from "dayjs";
-import { useI18n } from "../../../language";
-import { computed, inject, ref, watch } from "vue";
-import { provideType } from "../interface";
-import PanelFoot from "./PanelFoot.vue";
-
-export interface TimePanelProps {
-  modelValue: number | string;
-  max?: number;
-}
-
-defineOptions({
-  name: "TimePanel",
-});
-
-const props = withDefaults(defineProps<TimePanelProps>(), {
-  max: dayjs().year() + 100,
-});
-const emits = defineEmits(["update:modelValue", "ok"]);
-const datePicker: provideType = inject("datePicker") as provideType;
-const Month = ref(props.modelValue);
-const { t } = useI18n();
-
-const MONTH_NAME = computed(() => [
-  t("datePicker.january"),
-  t("datePicker.february"),
-  t("datePicker.march"),
-  t("datePicker.april"),
-  t("datePicker.may"),
-  t("datePicker.june"),
-  t("datePicker.july"),
-  t("datePicker.august"),
-  t("datePicker.september"),
-  t("datePicker.october"),
-  t("datePicker.november"),
-  t("datePicker.december"),
-]);
-
-// 判断单元格是否可以点击(禁用)
-const cellDisabled = computed(() => {
-  return (item: string) => {
-    const month = parseInt(item);
-    if (
-      datePicker.min.value &&
-      month < dayjs(datePicker.min.value).month() + 1
-    ) {
-      return true;
-    }
-    if (
-      datePicker.max.value &&
-      month > dayjs(datePicker.max.value).month() + 1
-    ) {
-      return true;
-    }
-    return false;
-  };
-});
-
-// 点击月份
-const handleMonthClick = (item: string) => {
-  if (cellDisabled.value(item)) {
-    return;
-  }
-  Month.value = MONTH_NAME.value.indexOf(item);
-  if (!datePicker.range) {
-    if (datePicker.type === "yearmonth") {
-      datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
-        .month(MONTH_NAME.value.indexOf(item))
-        .valueOf();
-    }
-    if (datePicker.type === "date" || datePicker.type === "datetime") {
-      emits("update:modelValue", MONTH_NAME.value.indexOf(item));
-      datePicker.showPanel.value = datePicker.type;
-    }
-  }
-  if (datePicker.simple) {
-    footOnOk();
-  }
-};
-
-watch(
-  () => props.modelValue,
-  () => {
-    Month.value = props.modelValue;
-  }
-);
-
-//关闭回调
-const footOnOk = () => {
-  emits(
-    "update:modelValue",
-    Month.value || Month.value === 0 ? Month.value : -1
-  );
-  if (datePicker.range) {
-    //关闭菜单
-    emits("ok");
-    return;
-  } else {
-    if (datePicker.type === "datetime" || datePicker.type === "date") {
-      datePicker.showPanel.value = datePicker.type;
-    } else {
-      datePicker.ok();
-    }
-  }
-};
-
-//现在回调
-const footOnNow = () => {
-  const month = dayjs().month() + 1;
-  if (datePicker.min.value && month < dayjs(datePicker.min.value).month() + 1) {
-    return;
-  }
-  if (datePicker.max.value && month > dayjs(datePicker.max.value).month() + 1) {
-    return;
-  }
-  Month.value = dayjs().month();
-};
-
-//清空回调
-const footOnClear = () => {
-  Month.value = "";
-};
-</script>
diff --git a/packages/component/component/datePicker/components/MonthRange.vue b/packages/component/component/datePicker/components/MonthRange.vue
deleted file mode 100644
index 04fdaec0..00000000
--- a/packages/component/component/datePicker/components/MonthRange.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<template>
-  <div class="layui-laydate layui-laydate-range">
-    <div style="display: flex">
-      <div class="layui-laydate-main laydate-main-list-0">
-        <div class="layui-laydate-header">
-          <i
-            class="layui-icon laydate-icon laydate-prev-y"
-            @click="changeYear(-1)"
-            ></i
-          >
-          <div class="laydate-set-ym">
-            <lay-dropdown ref="dropdownYearPanelRefLeft">
-              <span class="laydate-range-time"
-                >{{ startTime.year || "--" }} {{ t("datePicker.year") }}</span
-              >
-              <template #content>
-                <YearPanel
-                  class="time-panel"
-                  v-model="startTime.year"
-                  @ok="closeLeftYearPanel"
-                ></YearPanel>
-              </template>
-            </lay-dropdown>
-          </div>
-        </div>
-        <div class="layui-laydate-content" style="height: 220px">
-          <ul class="layui-laydate-list laydate-month-list">
-            <li
-              v-for="item of MONTH_NAME"
-              :key="item"
-              :data-unix="getUnix(item, 'left')"
-              :class="{
-                'layui-this':
-                  getUnix(item, 'left') === startTime.unix ||
-                  getUnix(item, 'left') === endTime.unix,
-                'laydate-range-hover': ifHasRangeHoverClass(
-                  getUnix(item, 'left')
-                ),
-                'layui-laydate-current':
-                  (startTime.unix === -1 || endTime.unix === -1) &&
-                  getUnix(item, 'left') === dayjs().startOf('month').valueOf(),
-              }"
-              @click="handleMonthClick(getUnix(item, 'left'))"
-              @mouseenter="monthItemMouseEnter($event, item)"
-            >
-              {{ item.slice(0, 3) }}
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="layui-laydate-main laydate-main-list-0">
-        <div class="layui-laydate-header">
-          <div class="laydate-set-ym">
-            <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time"
-                >{{ startTime.year + 1 }} {{ t("datePicker.year") }}</span
-              >
-              <template #content>
-                <YearPanel
-                  class="time-panel"
-                  v-model="endTime.year"
-                  @ok="closeRightYearPanel"
-                ></YearPanel>
-              </template>
-            </lay-dropdown>
-          </div>
-          <i
-            class="layui-icon laydate-icon laydate-next-y"
-            @click="changeYear(1)"
-            ></i
-          >
-        </div>
-        <div class="layui-laydate-content" style="height: 220px">
-          <ul class="layui-laydate-list laydate-month-list">
-            <li
-              v-for="item of MONTH_NAME"
-              :key="item"
-              :data-unix="getUnix(item, 'right')"
-              :class="{
-                'layui-this':
-                  getUnix(item, 'right') === startTime.unix ||
-                  getUnix(item, 'right') === endTime.unix,
-                'laydate-range-hover': ifHasRangeHoverClass(
-                  getUnix(item, 'right')
-                ),
-                'layui-laydate-current':
-                  (startTime.unix === -1 || endTime.unix === -1) &&
-                  getUnix(item, 'right') === dayjs().startOf('month').valueOf(),
-              }"
-              @click="handleMonthClick(getUnix(item, 'right'))"
-              @mouseenter="monthItemMouseEnter($event, item)"
-            >
-              {{ item.slice(0, 3) }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <PanelFoot
-      @ok="footOnOk"
-      :showNow="false"
-      @now="footOnNow"
-      @clear="footOnClear"
-    >
-      <span v-if="startTime.unix !== -1" class="layui-laydate-preview">
-        {{ dayjs(startTime.unix).format("YYYY-MM") }}
-        {{ datePicker.rangeSeparator }}
-        <template v-if="endTime.unix !== -1">
-          {{ dayjs(endTime.unix).format("YYYY-MM") }}
-        </template>
-        <template v-else> -- </template>
-      </span>
-    </PanelFoot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject, reactive, ref, watch, computed } from "vue";
-import { provideType } from "../interface";
-import PanelFoot from "./PanelFoot.vue";
-import YearPanel from "./YearPanel.vue";
-import dayjs from "dayjs";
-import LayDropdown from "../../dropdown/index.vue";
-import { useI18n } from "../../../language";
-
-export interface DateRangeProps {
-  startTime: string;
-  endTime: string;
-}
-
-defineOptions({
-  name: "MonthRange",
-});
-
-const props = withDefaults(defineProps<DateRangeProps>(), {});
-
-const emits = defineEmits([
-  "update:modelValue",
-  "update:startTime",
-  "update:endTime",
-]);
-
-const { t } = useI18n();
-
-const datePicker: provideType = inject("datePicker") as provideType;
-
-const startTime = reactive({
-  year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
-  unix: props.startTime
-    ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
-    : -1,
-});
-const endTime = reactive({
-  year: props.endTime ? dayjs(props.endTime).year() : dayjs().year() + 1,
-  unix: props.startTime
-    ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
-    : -1,
-});
-
-let hoverMonth = ref(-1);
-
-const MONTH_NAME = computed(() => [
-  t("datePicker.january"),
-  t("datePicker.february"),
-  t("datePicker.march"),
-  t("datePicker.april"),
-  t("datePicker.may"),
-  t("datePicker.june"),
-  t("datePicker.july"),
-  t("datePicker.august"),
-  t("datePicker.september"),
-  t("datePicker.october"),
-  t("datePicker.november"),
-  t("datePicker.december"),
-]);
-
-// 切换年月
-const changeYear = (num: number) => {
-  startTime.year += num;
-};
-
-// 点击月份
-const handleMonthClick = (item: number) => {
-  if (startTime.unix === -1 && endTime.unix === -1) {
-    startTime.unix = item;
-  } else if (startTime.unix !== -1 && endTime.unix !== -1) {
-    hoverMonth.value = -1;
-    startTime.unix = item;
-    endTime.unix = -1;
-  } else if (startTime.unix !== -1 && endTime.unix === -1) {
-    endTime.unix = item;
-    if (item < startTime.unix) {
-      //swap
-      const first = startTime.unix;
-      const last = item;
-      startTime.unix = last;
-      endTime.unix = first;
-    }
-  }
-};
-
-// 监听年月, 刷新日期
-watch(
-  () => [props.startTime, props.endTime],
-  () => {
-    startTime.year = props.startTime
-      ? dayjs(props.startTime).year()
-      : dayjs().year();
-    startTime.unix = props.startTime
-      ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
-      : -1;
-    endTime.year = props.endTime ? dayjs(props.endTime).year() : dayjs().year();
-    endTime.unix = props.startTime
-      ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
-      : -1;
-  }
-);
-
-//关闭选择时间的面板
-const dropdownYearPanelRefLeft = ref();
-const dropdownYearPanelRefRight = ref();
-const closeLeftYearPanel = () => {
-  if (dropdownYearPanelRefLeft.value) dropdownYearPanelRefLeft.value.hide();
-};
-const closeRightYearPanel = () => {
-  if (dropdownYearPanelRefRight.value) dropdownYearPanelRefRight.value.hide();
-  startTime.year = endTime.year;
-};
-
-//关闭回调
-const footOnOk = () => {
-  let format = "YYYY-MM";
-  let startTimeVal =
-    startTime.unix !== -1 && endTime.unix !== -1
-      ? dayjs(startTime.unix).format(format)
-      : "";
-  let endTimeVal =
-    endTime.unix !== -1 && endTime.unix !== -1
-      ? dayjs(endTime.unix).format(format)
-      : "";
-  emits("update:startTime", startTimeVal);
-  emits("update:endTime", endTimeVal);
-  datePicker.ok();
-};
-
-//现在回调
-const footOnNow = () => {
-  startTime.year = dayjs().year();
-  startTime.unix = dayjs(
-    startTime.year + "-" + (dayjs().month() + 1)
-  ).valueOf();
-  endTime.unix = -1;
-  hoverMonth.value = -1;
-};
-
-//清空回调
-const footOnClear = () => {
-  startTime.unix = -1;
-  endTime.unix = -1;
-  hoverMonth.value = -1;
-};
-
-const monthItemMouseEnter = (event: MouseEvent, item: any) => {
-  if (!datePicker.range) {
-    return;
-  }
-  if (startTime.unix === -1) {
-    return;
-  }
-  if (hoverMonth.value !== -1 && endTime.unix !== -1) {
-    hoverMonth.value = -1;
-    return;
-  }
-  hoverMonth.value = parseInt(
-    (event.target as HTMLElement).dataset.unix as string
-  );
-};
-const ifHasRangeHoverClass = computed(() => {
-  return function (item: any) {
-    if (!datePicker.range) {
-      return false;
-    }
-    if (startTime.unix === -1) {
-      return false;
-    }
-    if (hoverMonth.value === -1 && endTime.unix === -1) {
-      return false;
-    }
-    let hover = endTime.unix !== -1 ? endTime.unix : hoverMonth.value;
-    let max = startTime.unix > hover ? startTime.unix : hover;
-    let min = startTime.unix < hover ? startTime.unix : hover;
-    if (item >= min && item <= max) {
-      return true;
-    }
-    return false;
-  };
-});
-
-const getUnix = computed(() => {
-  return function (item: any, position: "left" | "right") {
-    let month = MONTH_NAME.value.indexOf(item);
-    let year = position === "left" ? startTime.year : startTime.year + 1;
-    return dayjs(year + "-" + (month + 1)).valueOf();
-  };
-});
-</script>
diff --git a/packages/component/component/datePicker/components/PanelFoot.vue b/packages/component/component/datePicker/components/PanelFoot.vue
deleted file mode 100644
index 0a37de62..00000000
--- a/packages/component/component/datePicker/components/PanelFoot.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="layui-laydate-footer">
-    <slot></slot>
-    <div class="laydate-footer-btns">
-      <span
-        lay-type="now"
-        v-if="props.showNow"
-        class="laydate-btns-now"
-        @click="handelNow"
-        >{{ t("datePicker.now") }}</span
-      >
-      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">{{
-        t("datePicker.confirm")
-      }}</span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from "../../../language";
-
-export interface PanelFoot {
-  showNow?: boolean;
-}
-
-defineOptions({
-  name: "PanelFoot",
-});
-
-const props = withDefaults(defineProps<PanelFoot>(), {
-  showNow: true,
-});
-
-const { t } = useI18n();
-
-const emits = defineEmits(["ok", "clear", "now"]);
-
-const handelOk = () => {
-  emits("ok");
-};
-
-const handelNow = () => {
-  emits("now");
-};
-</script>
diff --git a/packages/component/component/datePicker/components/TimePanel.vue b/packages/component/component/datePicker/components/TimePanel.vue
deleted file mode 100644
index 16b7f37d..00000000
--- a/packages/component/component/datePicker/components/TimePanel.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
-      <div class="layui-laydate-header">
-        <div class="laydate-set-ym">
-          <span class="laydate-time-text">{{
-            t("datePicker.selectTime")
-          }}</span>
-        </div>
-      </div>
-      <div class="layui-laydate-content" style="height: 210px">
-        <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
-          <li
-            class="num-list"
-            v-for="item in els"
-            :key="item.type"
-            :data-type="item.type"
-          >
-            <ol class="scroll" @click="chooseTime">
-              <li
-                v-for="(it, index) in item.count"
-                :id="item.type + index.toString()"
-                :data-value="index.toString().padStart(2, '0')"
-                :data-type="item.type"
-                :key="it"
-                :class="{
-                  num: true,
-                  'layui-this': index == hms[item.type],
-                  'layui-disabled': cellDisabled(item.type, index),
-                }"
-              >
-                {{ index.toString().padStart(2, "0") }}
-              </li>
-            </ol>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span
-        v-if="datePicker.type === 'datetime' && !datePicker.range"
-        @click="datePicker.showPanel.value = 'datetime'"
-        class="laydate-btns-time"
-        >{{ t("datePicker.selectDate") }}</span
-      >
-      <template v-else-if="!isNaN(hms.hh) && !isNaN(hms.mm) && !isNaN(hms.ss)">
-        {{
-          dayjs().hour(hms.hh).minute(hms.mm).second(hms.ss).format("HH:mm:ss")
-        }}
-      </template>
-    </PanelFoot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import dayjs from "dayjs";
-import { useI18n } from "../../../language";
-import { inject, onMounted, ref, nextTick, watch, computed } from "vue";
-import { provideType } from "../interface";
-import PanelFoot from "./PanelFoot.vue";
-export interface hmsType {
-  hh: number;
-  mm: number;
-  ss: number;
-  [key: string]: any;
-}
-export interface TimePanelProps {
-  modelValue: hmsType;
-}
-
-defineOptions({
-  name: "TimePanel",
-});
-
-const props = withDefaults(defineProps<TimePanelProps>(), {});
-const emits = defineEmits(["update:modelValue", "ok"]);
-const datePicker: provideType = inject("datePicker") as provideType;
-const { t } = useI18n();
-
-const els = [
-  { count: 24, type: "hh" },
-  { count: 60, type: "mm" },
-  { count: 60, type: "ss" },
-];
-const hms = ref<hmsType>({
-  hh: props.modelValue.hh,
-  mm: props.modelValue.mm,
-  ss: props.modelValue.ss,
-});
-
-const cellDisabled = computed(() => {
-  return (type?: string, value?: number) => {
-    const haveValue = typeof value !== "undefined";
-    const toDay = dayjs().format("YYY-MM-DD");
-    const _hms: Record<string, number> = {
-      hh: haveValue ? hms.value.hh : dayjs().hour(),
-      mm: haveValue ? hms.value.mm : dayjs().minute(),
-      ss: haveValue ? hms.value.ss : dayjs().second(),
-    };
-    haveValue && (_hms[type!] = value);
-    const time = `${_hms.hh}:${_hms.mm}:${_hms.ss}`;
-    if (
-      datePicker.min.value &&
-      dayjs(`${toDay} ${time}`).isBefore(
-        dayjs(`${toDay} ${datePicker.min.value}`)
-      )
-    ) {
-      return true;
-    }
-
-    if (
-      datePicker.max.value &&
-      dayjs(`${toDay} ${time}`).isAfter(
-        dayjs(`${toDay} ${datePicker.max.value}`)
-      )
-    ) {
-      return true;
-    }
-
-    return false;
-  };
-});
-
-// 点击时间 - hms
-const chooseTime = (e: any) => {
-  if (e.target.nodeName == "LI") {
-    let { value, type } = e.target.dataset;
-
-    if (cellDisabled.value(type, parseInt(value))) {
-      return;
-    }
-
-    hms.value[type as keyof typeof hms.value] = parseInt(value);
-    if (datePicker.type === "datetime") {
-      emits("update:modelValue", hms.value);
-    }
-  }
-};
-
-const timePanelRef = ref();
-onMounted(() => {
-  scrollTo();
-});
-watch(
-  () => props.modelValue,
-  () => {
-    hms.value = {
-      hh: props.modelValue.hh,
-      mm: props.modelValue.mm,
-      ss: props.modelValue.ss,
-    };
-  },
-  { deep: true }
-);
-const scrollTo = () => {
-  nextTick(() => {
-    timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
-      if (element.nodeName === "LI") {
-        let scrollTop = 0;
-        let parentDom = element.firstElementChild as HTMLElement;
-        let childList = parentDom.childNodes;
-        for (let index = 0; index < childList.length; index++) {
-          const child = childList[index] as HTMLElement;
-          if (child.nodeName !== "LI") {
-            continue;
-          }
-          if (child.classList && child.classList.contains("layui-this")) {
-            scrollTop =
-              child.offsetTop -
-              (parentDom.offsetHeight - child.offsetHeight) / 2;
-            parentDom.scrollTo(0, scrollTop);
-            break;
-          }
-        }
-      }
-    });
-  });
-};
-
-//确认关闭回调
-const footOnOk = () => {
-  emits("update:modelValue", hms.value);
-  if (datePicker.range) {
-    //关闭菜单
-    emits("ok");
-    return;
-  } else {
-    if (datePicker.type === "datetime") {
-      datePicker.showPanel.value = "date";
-      if (datePicker.currentDay.value < 1) {
-        return;
-      }
-    }
-    datePicker.ok();
-  }
-};
-//现在回调
-const footOnNow = () => {
-  if (cellDisabled.value()) {
-    return;
-  }
-
-  hms.value.hh = dayjs().hour();
-  hms.value.mm = dayjs().minute();
-  hms.value.ss = dayjs().second();
-  scrollTo();
-  if (datePicker.type === "datetime") {
-    emits("update:modelValue", hms.value);
-  }
-};
-
-//清空回调
-const footOnClear = () => {
-  hms.value.hh = 0;
-  hms.value.mm = 0;
-  hms.value.ss = 0;
-  scrollTo();
-};
-</script>
diff --git a/packages/component/component/datePicker/components/TimeRange.vue b/packages/component/component/datePicker/components/TimeRange.vue
deleted file mode 100644
index c55413c0..00000000
--- a/packages/component/component/datePicker/components/TimeRange.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <div class="layui-laydate layui-laydate-range">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
-      <div class="layui-laydate-header">
-        <div class="laydate-set-ym">
-          <span class="laydate-time-text">{{ t("datePicker.startTime") }}</span>
-        </div>
-      </div>
-      <div class="layui-laydate-content" style="height: 210px">
-        <ul
-          class="layui-laydate-list laydate-time-list"
-          ref="startTimePanelRef"
-        >
-          <li
-            class="num-list"
-            v-for="item in els"
-            :key="item.type"
-            :data-type="item.type"
-          >
-            <ol class="scroll" @click="chooseStartTime">
-              <li
-                v-for="(it, index) in item.count"
-                :id="item.type + index.toString()"
-                :data-value="index.toString().padStart(2, '0')"
-                :data-type="item.type"
-                :key="it"
-                :class="[
-                  'num',
-                  index == startHms[item.type] ? 'layui-this' : '',
-                ]"
-              >
-                {{ index.toString().padStart(2, "0") }}
-              </li>
-            </ol>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
-      <div class="layui-laydate-header">
-        <div class="laydate-set-ym">
-          <span class="laydate-time-text">{{ t("datePicker.endTime") }}</span>
-        </div>
-      </div>
-      <div class="layui-laydate-content" style="height: 210px">
-        <ul class="layui-laydate-list laydate-time-list" ref="endTimePanelRef">
-          <li
-            class="num-list"
-            v-for="item in els"
-            :key="item.type"
-            :data-type="item.type"
-          >
-            <ol class="scroll" @click="chooseEndTime">
-              <li
-                v-for="(it, index) in item.count"
-                :id="item.type + index.toString()"
-                :data-value="index.toString().padStart(2, '0')"
-                :data-type="item.type"
-                :key="it"
-                :class="['num', index == endHms[item.type] ? 'layui-this' : '']"
-              >
-                {{ index.toString().padStart(2, "0") }}
-              </li>
-            </ol>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <PanelFoot
-      @ok="footOnOk"
-      :showNow="false"
-      @now="footOnNow"
-      @clear="footOnClear"
-    >
-      <template
-        v-if="!isNaN(startHms.hh) && !isNaN(startHms.mm) && !isNaN(startHms.ss)"
-      >
-        {{
-          dayjs()
-            .hour(startHms.hh)
-            .minute(startHms.mm)
-            .second(startHms.ss)
-            .format("HH:mm:ss")
-        }}
-      </template>
-      至
-      <template
-        v-if="!isNaN(endHms.hh) && !isNaN(endHms.mm) && !isNaN(endHms.ss)"
-      >
-        {{
-          dayjs()
-            .hour(endHms.hh)
-            .minute(endHms.mm)
-            .second(endHms.ss)
-            .format("HH:mm:ss")
-        }}
-      </template>
-    </PanelFoot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import dayjs from "dayjs";
-import { useI18n } from "../../../language";
-import { inject, onMounted, ref, nextTick, watch } from "vue";
-import { provideType } from "../interface";
-import PanelFoot from "./PanelFoot.vue";
-
-export interface hmsType {
-  hh: number;
-  mm: number;
-  ss: number;
-  [key: string]: any;
-}
-
-export interface TimeRangeProps {
-  startTime: string;
-  endTime: string;
-}
-
-defineOptions({
-  name: "TimeRange",
-});
-
-const props = withDefaults(defineProps<TimeRangeProps>(), {});
-const emits = defineEmits([
-  "update:modelValue",
-  "ok",
-  "update:startTime",
-  "update:endTime",
-]);
-const datePicker: provideType = inject("datePicker") as provideType;
-const { t } = useI18n();
-
-const els = [
-  { count: 24, type: "hh" },
-  { count: 60, type: "mm" },
-  { count: 60, type: "ss" },
-];
-
-const startHms = ref<hmsType>({
-  hh: dayjs(props.startTime).hour(),
-  mm: dayjs(props.startTime).minute(),
-  ss: dayjs(props.startTime).second(),
-});
-
-const endHms = ref<hmsType>({
-  hh: dayjs(props.endTime).hour(),
-  mm: dayjs(props.endTime).minute(),
-  ss: dayjs(props.endTime).second(),
-});
-
-watch(
-  () => props.startTime,
-  () => {
-    startHms.value = {
-      hh: dayjs(props.startTime).hour(),
-      mm: dayjs(props.startTime).minute(),
-      ss: dayjs(props.startTime).second(),
-    };
-  },
-  { deep: true }
-);
-
-watch(
-  () => props.endTime,
-  () => {
-    endHms.value = {
-      hh: dayjs(props.endTime).hour(),
-      mm: dayjs(props.endTime).minute(),
-      ss: dayjs(props.endTime).second(),
-    };
-  },
-  { deep: true }
-);
-
-const chooseStartTime = (e: any) => {
-  if (e.target.nodeName == "LI") {
-    let { value, type } = e.target.dataset;
-    startHms.value[type as keyof typeof startHms.value] = parseInt(value);
-  }
-};
-
-const chooseEndTime = (e: any) => {
-  if (e.target.nodeName == "LI") {
-    let { value, type } = e.target.dataset;
-    endHms.value[type as keyof typeof endHms.value] = parseInt(value);
-  }
-};
-
-onMounted(() => {
-  startTimeScrollTo();
-  endTimeScrollTo();
-});
-
-const startTimePanelRef = ref();
-const endTimePanelRef = ref();
-
-const startTimeScrollTo = () => {
-  nextTick(() => {
-    startTimePanelRef.value.childNodes.forEach((element: HTMLElement) => {
-      if (element.nodeName === "LI") {
-        let scrollTop = 0;
-        let parentDom = element.firstElementChild as HTMLElement;
-        let childList = parentDom.childNodes;
-        for (let index = 0; index < childList.length; index++) {
-          const child = childList[index] as HTMLElement;
-          if (child.nodeName !== "LI") {
-            continue;
-          }
-          if (child.classList && child.classList.contains("layui-this")) {
-            scrollTop =
-              child.offsetTop -
-              (parentDom.offsetHeight - child.offsetHeight) / 2;
-            parentDom.scrollTo(0, scrollTop);
-            break;
-          }
-        }
-      }
-    });
-  });
-};
-
-const endTimeScrollTo = () => {
-  nextTick(() => {
-    endTimePanelRef.value.childNodes.forEach((element: HTMLElement) => {
-      if (element.nodeName === "LI") {
-        let scrollTop = 0;
-        let parentDom = element.firstElementChild as HTMLElement;
-        let childList = parentDom.childNodes;
-        for (let index = 0; index < childList.length; index++) {
-          const child = childList[index] as HTMLElement;
-          if (child.nodeName !== "LI") {
-            continue;
-          }
-          if (child.classList && child.classList.contains("layui-this")) {
-            scrollTop =
-              child.offsetTop -
-              (parentDom.offsetHeight - child.offsetHeight) / 2;
-            parentDom.scrollTo(0, scrollTop);
-            break;
-          }
-        }
-      }
-    });
-  });
-};
-
-//确认关闭回调
-const footOnOk = () => {
-  emits(
-    "update:startTime",
-    dayjs()
-      .hour(startHms.value.hh)
-      .minute(startHms.value.mm)
-      .second(startHms.value.ss)
-  );
-  emits(
-    "update:endTime",
-    dayjs()
-      .hour(endHms.value.hh)
-      .minute(endHms.value.mm)
-      .second(endHms.value.ss)
-  );
-  datePicker.ok();
-};
-
-//现在回调
-const footOnNow = () => {
-  startHms.value.hh = dayjs().hour();
-  startHms.value.mm = dayjs().minute();
-  startHms.value.ss = dayjs().second();
-  endHms.value.hh = dayjs().hour();
-  endHms.value.mm = dayjs().minute();
-  endHms.value.ss = dayjs().second();
-  startTimeScrollTo();
-  endTimeScrollTo();
-};
-
-//清空回调
-const footOnClear = () => {
-  startHms.value.hh = 0;
-  startHms.value.mm = 0;
-  startHms.value.ss = 0;
-  endHms.value.hh = 0;
-  endHms.value.mm = 0;
-  endHms.value.ss = 0;
-  startTimeScrollTo();
-  endTimeScrollTo();
-};
-</script>
diff --git a/packages/component/component/datePicker/components/YearPanel.vue b/packages/component/component/datePicker/components/YearPanel.vue
deleted file mode 100644
index aabc1266..00000000
--- a/packages/component/component/datePicker/components/YearPanel.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<template>
-  <div class="layui-laydate">
-    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-      <div class="layui-laydate-year-panel-header">
-        <div class="laydate-set-ym">
-          <lay-icon
-            type="layui-icon-left"
-            @click="currentDate -= datePicker.yearPage.value ?? 15"
-          ></lay-icon>
-          <span class="laydate-time-text">
-            {{ yearRange.join(" - ") }}
-          </span>
-          <lay-icon
-            type="layui-icon-right"
-            @click="currentDate += datePicker.yearPage.value ?? 15"
-          ></lay-icon>
-        </div>
-      </div>
-    </div>
-    <div
-      class="layui-laydate-content"
-      style="height: 220px; overflow-y: auto"
-      ref="ScrollRef"
-    >
-      <ul class="layui-laydate-list laydate-year-list">
-        <li
-          v-for="item of yearList"
-          :key="item"
-          :class="{
-            'layui-this': Year === item,
-            'layui-laydate-current': !Year && item === dayjs().year(),
-            'layui-disabled': cellDisabled(item),
-          }"
-          @click="handleYearClick(item)"
-        >
-          {{ item }}
-        </li>
-      </ul>
-    </div>
-    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span
-        v-if="datePicker.type === 'yearmonth'"
-        @click="datePicker.showPanel.value = 'month'"
-        class="laydate-btns-time"
-        >{{ t("datePicker.selectMonth") }}</span
-      >
-      <template v-else-if="parseInt(Year.toString()) > 0">{{ Year }}</template>
-    </PanelFoot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import dayjs from "dayjs";
-import { useI18n } from "../../../language";
-import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
-import { getYears } from "../day";
-import { provideType } from "../interface";
-import PanelFoot from "./PanelFoot.vue";
-import LayIcon from "../../icon";
-
-export interface TimePanelProps {
-  modelValue: number | string;
-}
-
-defineOptions({
-  name: "YearPanel",
-});
-
-const datePicker: provideType = inject("datePicker") as provideType;
-const props = defineProps<TimePanelProps>();
-const emits = defineEmits(["update:modelValue", "ok"]);
-
-const Year = ref(props.modelValue);
-const currentDate: Ref<number> = ref(dayjs().year());
-if (datePicker.currentYear.value)
-  currentDate.value =
-    datePicker.currentYear.value === -1
-      ? dayjs().year()
-      : datePicker.currentYear.value;
-const yearList = computed<number[]>(() =>
-  getYears(
-    currentDate.value ?? new Date(),
-    datePicker.yearPage.value
-    // datePicker.yearStep.value
-  )
-);
-const yearRange = computed(() => [yearList.value.at(0), yearList.value.at(-1)]);
-const unWatch = ref(false);
-
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    currentDate.value = Number(newVal);
-    scrollTo();
-  }
-);
-
-const { t } = useI18n();
-
-// 判断单元格是否可以点击(禁用)
-const cellDisabled = computed(() => {
-  return (item: number) => {
-    if (datePicker.min.value && item < dayjs(datePicker.min.value).year()) {
-      return true;
-    }
-    if (datePicker.max.value && item > dayjs(datePicker.max.value).year()) {
-      return true;
-    }
-    return false;
-  };
-});
-
-// 点击年份
-const handleYearClick = (item: number) => {
-  if (cellDisabled.value(item)) {
-    return true;
-  }
-  unWatch.value = true;
-  Year.value = item;
-  if (!datePicker.range) {
-    if (datePicker.type === "year") {
-      datePicker.currentDay.value = dayjs().year(item).valueOf();
-    } else if (datePicker.type === "yearmonth") {
-      datePicker.currentDay.value = dayjs().year(item).valueOf();
-      datePicker.showPanel.value = "month";
-      emits("update:modelValue", Year.value);
-    } else {
-      emits("update:modelValue", Year.value);
-      datePicker.showPanel.value = datePicker.type;
-    }
-  }
-
-  setTimeout(() => {
-    unWatch.value = false;
-  }, 0);
-
-  if (datePicker.simple) {
-    footOnOk();
-  }
-};
-
-const ScrollRef = ref();
-onMounted(() => {
-  nextTick(() => scrollTo());
-});
-watch(
-  () => Year,
-  () => {
-    Year.value = props.modelValue;
-  }
-);
-const scrollTo = () => {
-  nextTick(() => {
-    let scrollTop = 0;
-    for (const child of ScrollRef.value.firstElementChild.childNodes) {
-      if (child.classList && child.classList.contains("layui-this")) {
-        scrollTop =
-          child.offsetTop -
-          (ScrollRef.value.offsetHeight - child.offsetHeight) / 2;
-        break;
-      }
-    }
-    ScrollRef.value.scrollTo(0, scrollTop);
-  });
-};
-
-//关闭回调
-const footOnOk = () => {
-  emits("update:modelValue", Year.value ? Year.value : -1);
-  if (datePicker.range) {
-    //关闭菜单
-    emits("ok");
-    return;
-  } else {
-    if (datePicker.type === "datetime" || datePicker.type === "date") {
-      datePicker.showPanel.value = datePicker.type;
-    } else {
-      datePicker.ok();
-    }
-  }
-};
-
-//现在回调
-const footOnNow = () => {
-  if (
-    datePicker.max.value &&
-    dayjs().year() > dayjs(datePicker.max.value).year()
-  ) {
-    return;
-  }
-  if (
-    datePicker.min.value &&
-    dayjs().year() < dayjs(datePicker.min.value).year()
-  ) {
-    return;
-  }
-  Year.value = dayjs().year();
-  if (datePicker.type === "yearmonth") {
-    datePicker.currentMonth.value = dayjs().month();
-    emits("update:modelValue", Year.value);
-  }
-  currentDate.value = Year.value;
-  scrollTo();
-};
-
-//清空回调
-const footOnClear = () => {
-  Year.value = "";
-};
-</script>
diff --git a/packages/component/component/datePicker/components/components/DateContent.vue b/packages/component/component/datePicker/components/components/DateContent.vue
deleted file mode 100644
index c35cdd1c..00000000
--- a/packages/component/component/datePicker/components/components/DateContent.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-  <div class="layui-laydate-content">
-    <table style="width: 100%">
-      <thead>
-        <tr>
-          <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template
-          v-for="(o, i) of dateList.length % 7 == 0
-            ? dateList.length / 7
-            : Math.floor(dateList.length / 7) + 1"
-          :key="i"
-        >
-          <tr>
-            <td
-              v-for="(item, index) of dateList.slice(i * 7, i * 7 + 7)"
-              :key="index"
-              :data-unix="item.value"
-              :class="{
-                'laydate-day-prev': item.type !== 'current',
-                'layui-this':
-                  item.value === modelValue ||
-                  (datePicker.range &&
-                    item.type === 'current' &&
-                    (item.value == startDate || item.value == endDate)),
-                'laydate-range-hover': ifHasRangeHoverClass(item),
-                'layui-disabled': cellDisabled(item),
-                'layui-laydate-current':
-                  modelValue === -1 &&
-                  item.value === dayjs().startOf('day').valueOf(),
-              }"
-              @click="handleDayClick(item)"
-              @mouseenter="dayItemMouseEnter($event, item)"
-            >
-              {{ item.day }}
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from "../../../../language";
-import { computed, inject } from "vue";
-import { provideType } from "../../interface";
-import dayjs from "dayjs";
-
-export interface DateContentProps {
-  dateList: any;
-  modelValue?: number;
-  startDate?: number;
-  endDate?: number;
-  hoverDate?: number;
-}
-
-defineOptions({
-  name: "DateContent",
-});
-
-const props = withDefaults(defineProps<DateContentProps>(), {
-  dateList: [],
-  modelValue: -1,
-  hoverDate: -1,
-  startDate: -1,
-  endDate: -1,
-});
-
-const { t } = useI18n();
-
-const WEEK_NAME = computed(() => [
-  t("datePicker.sunday"),
-  t("datePicker.monday"),
-  t("datePicker.tuesday"),
-  t("datePicker.wednesday"),
-  t("datePicker.thursday"),
-  t("datePicker.friday"),
-  t("datePicker.saturday"),
-]);
-
-const datePicker: provideType = inject("datePicker") as provideType;
-
-const emits = defineEmits([
-  "update:modelValue",
-  "update:startDate",
-  "update:endDate",
-  "update:hoverDate",
-  "simple",
-]);
-
-// 判断日期是否可以点击
-const cellDisabled = computed(() => {
-  return (item: { type: string; value: number }) => {
-    if (item.type !== "current" && datePicker.range) {
-      return true;
-    }
-    if (
-      datePicker.min.value &&
-      dayjs(item.value).isBefore(dayjs(datePicker.min.value))
-    ) {
-      return true;
-    }
-    if (
-      datePicker.max.value &&
-      dayjs(item.value).isAfter(dayjs(datePicker.max.value))
-    ) {
-      return true;
-    }
-    return false;
-  };
-});
-
-// 点击日期
-const handleDayClick = (item: any) => {
-  if (cellDisabled.value(item)) {
-    return;
-  }
-  if (datePicker.range) {
-    if (item.type !== "current") {
-      return;
-    }
-
-    if (props.startDate === -1 && props.endDate === -1) {
-      emits("update:startDate", item.value);
-    } else if (props.startDate !== -1 && props.endDate !== -1) {
-      emits("update:hoverDate", item.value);
-      emits("update:startDate", item.value);
-      emits("update:endDate", -1);
-    } else if (props.startDate !== -1 && props.endDate === -1) {
-      emits("update:endDate", item.value);
-      if (item.value < props.startDate) {
-        //swap
-        const first = props.startDate;
-        const last = item.value;
-        emits("update:startDate", last);
-        emits("update:endDate", first);
-      }
-    }
-  } else {
-    emits("update:modelValue", item.value);
-    if (item.type !== "current") {
-      datePicker.currentMonth.value =
-        item.type === "prev"
-          ? datePicker.currentMonth.value - 1
-          : datePicker.currentMonth.value + 1;
-    }
-    if (datePicker.simple) {
-      emits("simple");
-    }
-  }
-};
-
-const dayItemMouseEnter = (event: MouseEvent, item: any) => {
-  if (!datePicker.range) {
-    return;
-  }
-  if (props.startDate === -1) {
-    return;
-  }
-  if (item.type !== "current") {
-    return;
-  }
-  if (props.startDate !== -1 && props.endDate !== -1) {
-    emits("update:hoverDate", -1);
-    return;
-  }
-  emits(
-    "update:hoverDate",
-    parseInt((event.target as HTMLElement).dataset.unix as string)
-  );
-};
-const ifHasRangeHoverClass = computed(() => {
-  return function (item: any) {
-    if (!datePicker.range) {
-      return false;
-    }
-    if (props.startDate === -1) {
-      return false;
-    }
-    if (item.type !== "current") {
-      return false;
-    }
-    if (props.hoverDate === -1 && props.endDate === -1) {
-      return false;
-    }
-    let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
-    let max = props.startDate > hover ? props.startDate : hover;
-    let min = props.startDate < hover ? props.startDate : hover;
-    if (item.value >= min && item.value <= max) {
-      return true;
-    }
-    return false;
-  };
-});
-</script>
diff --git a/packages/component/component/datePicker/day.ts b/packages/component/component/datePicker/day.ts
deleted file mode 100644
index 9cadb13a..00000000
--- a/packages/component/component/datePicker/day.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * 获取年份列表
- * @param {Date | number} date 时间
- * @param {Number} page 页数
- * @param {Number} step 步进
- */
-const getYears = (date?: Date | number, page = 15, step = 1) => {
-  const years = [];
-  const y = typeof date === "number" ? date : date?.getFullYear() ?? 1970;
-  console.log(y, page, step);
-  const r = (page % 2 ? page - 1 : page) / 2;
-  for (let i = y - r; i <= y + r; i += step) {
-    years.push(i);
-  }
-  return years;
-};
-
-/**
- * 获取当前日期
- */
-const getDate = (val = "") => {
-  if (val) {
-    return new Date(val);
-  } else {
-    return new Date();
-  }
-};
-
-/**
- * 获取当前年份
- */
-const getYear = (val = "") => {
-  return getDate(val).getFullYear();
-};
-
-/**
- * 获取当前月份
- */
-const getMonth = (val = "") => {
-  return getDate(val).getMonth();
-};
-
-const getDay = (val = "") => {
-  if (val) {
-    return new Date(getDate(val).toDateString()).getTime();
-  } else {
-    return -1;
-  }
-};
-
-/**
- * 获取月份天数
- *
- * @param year
- * @param month
- */
-const getDayLength = (year: number, month: number): number => {
-  return new Date(year, month + 1, 0).getDate();
-};
-
-// 设置日期列表
-const setDateList = (year: number, month: number) => {
-  const curDays = getDayLength(year, month); // 当月天数
-  const prevDays = getDayLength(year, month - 1); // 上月天数
-  const curFirstDayWeek = new Date(year, month, 1).getDay(); // 当月第一天星期几
-  const list: any[] = [];
-  // 填充上月天数
-  for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
-    list.push({
-      day: i,
-      value: +new Date(year, month - 1, i),
-      isRange: false,
-      isSelected: false,
-      type: "prev",
-    });
-  }
-  // 填充当月天数
-  for (let i = 1; i <= curDays; i++) {
-    list.push({
-      day: i,
-      value: +new Date(year, month, i),
-      isRange: false,
-      isSelected: false,
-      type: "current",
-    });
-  }
-  // 填充下月天数
-  const nextDays = 7 - (list.length % 7);
-  if (nextDays !== 7) {
-    for (let i = 1; i <= nextDays; i++) {
-      list.push({
-        day: i,
-        value: +new Date(year, month + 1, i),
-        isRange: false,
-        isSelected: false,
-        type: "next",
-      });
-    }
-  }
-  return list;
-};
-
-export {
-  getDayLength,
-  getYears,
-  getDate,
-  getMonth,
-  getYear,
-  getDay,
-  setDateList,
-};
diff --git a/packages/component/component/datePicker/font/iconfont.eot b/packages/component/component/datePicker/font/iconfont.eot
deleted file mode 100644
index c861caa8e2c1e5bfff43ca36bf79fe3195545148..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2456
zcmc&$U2GIp6h3EWclM|4ENt8Dw(PdkmhM(tw(YtU3JL_Uh&B;HOP~_7bZ6U={bRd@
zEkWIo_!|<4i3VfP#9-i&L`)1Jkw+dhCIsS(AsAs3<IjsR;X!Bp?#$GdpZdz|-aFs<
z&bjxVbLY&Qd&Wa_+fBqIk+>vs$|eAFngtr$Wyy=ZNkcq#`CiW=yMTg}p(M>y3Vn%m
zT0=85NqNe_K&9ParfANzDS`>mIG7^M!b;d^G(<5Pgy#R|fm%3GM-`H3aL1lkwq7*8
z{2k<auv=f;GY}vD<GG!Xk3$}x%q9!px65ZB|AzMURAxS{jNXJSUqZy|r}bn?{p|IR
zV0#;Fcp8N3mi!Lz6|~jU*;2XX7a-yr=z^L2WKtUBG{&EUtY(wt0yonE=!1~8Tr#Wg
zz3#-mIkBE}wveAKtsOt`0g?M8^t*-ca-~+GR~-<E&@XJMDWg+N25is0%g0{xJ^dHe
zS++N?hQ1R<*1dMkLGn6?Zu{|BGb!{EIfa$UddUk^Gi6KfrFQBk-ab0^GDcbxTN=*H
zOeMkD5_Ce#U>H7GEPDBGK8+RJ(tFakU{6_h{*~g4v5Pqb-F?@t^s_12Lgng&6~A1e
z3JmP%#Zof%S=^U4h$0%1m;IKCGxnG?STVXEcSH%^K^q{u@e>JMuFBPknuxtzm8$zq
z1Oa1&h1eI7_%cRe1r`xLrt853cuZ~()tf7i+3SmaFWU_+R<Wm|iM_4jd59*SOLf21
z#AB;YSk2DBBlJFfN<VT4mYA*flYB)EQX}=^Mc+<%M_B3OE>#M1XEYI$`nb8%+1%2k
z%F*s<r>nawCO^Y1T}o3RKAecOC@#gvD!21fo$=vlOp5Z_#3pGY#{*&J)>UnL{5>JR
ze44$%X!~2n^U~+s+|eEKZCYdO?BCoJ*BaeN>;3*#zyG9LaXQ_S<nXDSZ3%ds9<O4Y
zbNbqvuXH>ib#Q%av~6r(gSN__d^eE`_q2GJD-~{BrK#sPuWVb1|M9j!qrcU)qQM<(
zYv^9x#7FPc1sm(bk)IK&$jaKE(p|a1%&c`DjxvWv_>^&Ygm+2THyX3X>_#@f1xxIr
z9$v@Noe|?OpBgbPF0sQd*RIJ|@wWS@gEXQ>9*zf^TpkWIDP03R^q|a}`MfV0R*kcq
z^0h~Ny)s{b?1QYU;i%ecyulT|00_$XM40ySiH8Ugi&*=H{FU5CE2xvYh&-%xMG^=q
zk{FJ6@DO+2PjvH;e91_uk+919jW5(tM2+%M<8345i-c6(2P!NmF7ul(3q^dqk0*pK
zYP|Ol0T29i%Y4s;H_d3)>%z#^W*bZ7f^QZtgYUJm12|!0Co0Ak8!O;nu(6l=Xs?ay
zkeeqEF*{Hh=}G#~#*BjWjg2J~vL9?LgTHHI2k<{Oc2WQ}!J0>*AotnWOXIxF#&s0o
zkG<Q9da|Uaw1e~7%w#^7&gV+rOmaR2a*ZH%>r-=?WN|6A6p!o0*_nJ!8;T7srFZB#
zy|^&%?2)N>sg%~z#e7y9#R7UJlh+Ex{2_g^6q_!U3L6Fn#KMA)P3E)sG;Tvx*6kXe
zLc$$HP1pXb<!Q58mtePCwZFg8FK4wJ|L9Y}a@ITGY0f-HSZ9t!e`o0k&Kq%@L`sx~
z|7k>(r!3H@9f6JrGQb)YOx+>OGYRV$O`D?%C@2H?EkwLvA2UxiS&@<AizqHpPabtC
lEV0ZEcCx}Q;<7TIpTl1{HkZfWRh~)C&&=y?`#vP5_!q}2aU1{u

diff --git a/packages/component/component/datePicker/font/iconfont.svg b/packages/component/component/datePicker/font/iconfont.svg
deleted file mode 100644
index 788ecc69..00000000
--- a/packages/component/component/datePicker/font/iconfont.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<!--
-2013-9-30: Created.
--->
-<svg>
-<metadata>
-Created by iconfont
-</metadata>
-<defs>
-
-<font id="laydate-icon" horiz-adv-x="1024" >
-  <font-face
-    font-family="laydate-icon"
-    font-weight="500"
-    font-stretch="normal"
-    units-per-em="1024"
-    ascent="896"
-    descent="-128"
-  />
-    <missing-glyph />
-    
-    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
-d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
-t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
-t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
-    
-
-    
-    <glyph glyph-name="youyou" unicode="&#58882;" d="M283.648 721.918976 340.873216 780.926976 740.352 383.997952 340.876288-12.925952 283.648 46.077952 619.52 383.997952Z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="zuozuo" unicode="&#58883;" d="M740.352 721.918976 683.126784 780.926976 283.648 383.997952 683.123712-12.925952 740.352 46.077952 404.48 383.997952Z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="xiayiye" unicode="&#58970;" d="M62.573 384.103l423.401 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.751-18.976-68.727 0l-39.753 39.753 0.269 0.246-385.655 385.661zM451.365 384.103l423.407 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.757-18.977-68.727 0l-39.762 39.754 0.273 0.249-385.662 385.661zM451.365 384.103z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="xiayiye1" unicode="&#58971;" d="M948.066926 382.958838l-411.990051-412.24426c-18.47333-18.47333-48.417689-18.47333-66.875207 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L814.691135 383.088983 467.512212 730.269123c-18.466032 18.458735-18.466032 48.405526 0 66.873991 18.468465 18.464816 48.410391 18.464816 66.872774 0l38.682336-38.682336-0.261507-0.239614 375.259894-375.265975v0.003649m-378.312834 0L157.756743-29.285422c-18.47333-18.47333-48.415256-18.47333-66.872775 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L436.369787 383.088983 89.19208 730.269123c-18.4636 18.458735-18.4636 48.405526 0 66.873991 18.470898 18.464816 48.415256 18.464816 66.872774 0l38.692067-38.682336-0.266372-0.239614 375.267191-375.265975-0.004865 0.003649m0 0z"  horiz-adv-x="1024" />
-
-    
-
-
-  </font>
-</defs></svg>
diff --git a/packages/component/component/datePicker/font/iconfont.ttf b/packages/component/component/datePicker/font/iconfont.ttf
deleted file mode 100644
index 0bd6c4a88dd899aea3926e49bdfb37e81004bcb9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2272
zcmc&#TWl0n82<m6-PudqS=hGQZP{(7E$miXw(YtU3Q7rJ5hW2pOP~_7?9R3&dt-MC
zy9RYb;srwjG0|uYnivc`l8A{9B=X3E#)Lq8F~kdOV!XT<6CZTe@5~Hl<?_s#`Oo?O
z@BEkZpE)x_Ohj!|Cz&R8?0sSDMdP#Ih<F3ot<UZqkI()7)K2Kfq0gmq$>KNt^83(#
zg?zD)t!0$i8_?xTMAC*uJ(*TNe&s#beh-;i1mU_VzX^O9vU)LBsrLK~M0_1xFk46^
zr3uc!{~UBRm#h}Kn+{?=2wlr3bNaq(&fP>#<de=83+2kXxr6Tzxldt!4`J<cy;-Lh
z9Z-qTi)vb%VlrUY{B_~Smwb=^No|(xjVqzAg`qVzuR2Ix57kYQ?JgoI^c*=&U9etU
zL`_q-GI^<=#)!Ai?s^`cR$yy}vr7v}aJGgyG0R{WQ7sm|{5PLL2Dfxl`U>o6Yvf-j
z&hVAUDTBRF+nsqbO<Snin78Ve>r{uCUA;&pW1q#?Do{l=BIcMi#aY`Y16FvCVMLYS
z9kda;8<(iP+K?ObO;LNbAvF$|2nu|Jh1eH{oeVEzU{T>iYW5a9r0gwe+fBU7X2iZ%
zZNU;7*i#{5ZyR_XLd0`v9I!+@w#K|A_6a;nZ_`Kg9fx3vXw4tw%W{x9X@n+eJK-H+
zWt4|hDa?b>L`)jx?m=gFPnRl3hogh8;h~uP1osRnU4i&iBGRL{6d$YH&yNkpr=l?_
z%IgxFrA-_UgqeF+_3ibq3HjwS><vcyUpJnXKH=_x;gE0hT4U$fOjlg%bRTQ?`+NQV
zQ*OoSbW4)Mr*f_*;Bk7qigC{A>+8Ne@Q5_P?Y+^yUHdz<RsQ5#iF|lXkB7Nl=gw7{
zdVXeQ-%8xa`vRT*Ue}5acd)Nxcy$*ayVVx#Y!63%LaE|ZHvf=r%N^#)TJPZ~b7-1R
z8%L&jw{&fjQ8vn(*!&i>*hM|Oo~2vU#t}X}ZCq@z!!9?k%2)8V`)GhPqE4QQ2fADy
z4s<C)<2-q{&NF=87Y(b%Sx)=<Bfb%tFF^M}*VS-T9Wh?zI$r<;Wqc@1NBG1&gs4U2
zzAk?*kJ1Vnq#+^?D?^b4ii#wr;sZR%ga0Rnc~ZV)q}51R<paj2YAB*c`IzyBk@iJG
zD(?ps78F<cHJF7WKHkssVlHZ&yobOF{B+ZN&&6uGA=c}{)DF$U61lK83(Md~Z0rC|
z*w~3b#ughZ;GeOvmquxyjoWZGPoQFUc#!8&de_EGLHg3h5~=j9jb-q+ZR`O4$Hq<y
z;GbZ{Q7FixHulmSZ?kb5Mfd~nwvwK#=xOaxO<PJ8@|i-u;>{*&X^?9Lu}5E6&L&H(
zR4bm-OXa0PUYm?fw9-5Dyk5E!w|sOVUa4fXOsSC5W|2V8W(!)eR5+}sDzU{%rMPi?
zTqG8JELF(i)3}XFq*IbA=+iiGhp2{riBeRcJY~$j0=q11YOt^@*Zya*2Yw5*Y|fV+
zX!RiPIe3?-jA$a8hL1&zCLS1N2dwj^$KC5K(^0G<jw&ixvj!<4Vh(85u0TiBEU-pJ
zbM7$Wq+lJRMboQ@AIdncI~CutkC{7>6DLx95k(XKllwJ=C6?L2PFC1OTvcj?W!%ck
U%LUx7>Qb_{RMXw|I4MH>3rdt+EdT%j

diff --git a/packages/component/component/datePicker/font/iconfont.woff b/packages/component/component/datePicker/font/iconfont.woff
deleted file mode 100644
index bfe5599671f9441ceebdc8afeac71d4f65a741c7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1492
zcmY+Ec~Fx_7{)gwfRsQv0;F70?g7dvDTi_k2q?&X&U_&x2IUmw6v>BjMv!1R4M!=}
zat=&T#2N_qQ9*2LQO<yJsh|ibjuyIT`$u=?H~T)%zB}*i&byoF?&t_G01m-Ff#|_}
zi2p?&#Qz^oUOsjJU=Bgo1Y*~^$60sxGBAeTQK%gtzP=mICn%BR80ayej)(KzhsxNp
zGZD!&7;i(m0T3_~a(rAyr;@_}z_!CY0|-gHI<15bP3S#`S`nfyJcrGuN5&@sfP)f9
zLx^%~07OJnU>=SDwfF%7h8S8TISJOqsY87jqJohDAyMQ=D)by+U2j;o((iXckC^DV
zczE72m}3s{H1!QBN@7!xFa+U;7E&h2NPO&;2$_!{WCke2Q%=!RR6X#c*wHpdxVQ@K
za*hDVQ^UH0&wKXz%uuu#y<C5N4UfgzTVJ7F97Fntdw9Hl-sl5{46d&8rlFak_faM-
zYImL|(Ko}J00bIt1Os%#@xLXp2Uyc$3>EzG=wzb3;(!RdM}$9bAdD=wplNTO;eyZC
zaM2&yfiXjyZ6~lQXuFf+y6i;QlGYzd46q#^XH64j1zTk6hocD0jQb}8QIei?v+m!M
z<d4Tp)>Es8<;=~df(i=8GaG;6EG(;}OU%e5Cb6m4jH3UrA!c<?W>?--Pi$T{%cW?w
z*{9i}HN@-Md30G>345QLyekC9!Ul1&jl{R8jh&8VsBKL`7^4}hX0rIT%BTTieK%sF
zs%v3xCAH4opxhz-QmdM;TIszbHRsw-;u^EBC`g8uzt30JX$z=NVUHAC6|Jm$*iu{J
zUsWx()qYk+4^yD2KlIe&omj5!hY};(WhWc1<ji@JeKvP6@Fc0aUSZJEJFwCtBE);r
zz>V9qE-R-oRBt)nSWB%q-e;y}w&9mH-9D+eGe@vp`sKnL{YUT8p0R+=*_e&4;lmC$
zd=&ik7f4f|kb9C5tI34j7B7RQQs(WN8S@o#?8Q6FCAHgHYr?ZT9h=PJ6CH!YS-4)K
zcaJxS(}NwkQ(mdkuh?(u@+Gf6YnvL_^H2LUM49?H+SMv4a`yC%;Q_-fZid)Ar^uDa
zeo(e(Gn~`dQO2a{+{0&Eh*rMdbbi~Ca#cfo$4_mC_H)AKHo^Zw!0g_*6-T+*%T0tO
zrh6hTL}x5Jz;!-vUswtMM9Xv~ygxQ5jZYrckbTiv!94Q3ES%6Rp}d&;SFbmcW!YHi
zZQzb}&wh+K^QG?)1cW|5tgAe*HGPrFr;!2LC>%Dfy1K9BPb?clgT;k33$=l#v?%4j
z{4ed-3j}P6SQwdB3~<5=M8h5?BM5S7gvaY;<YA<$F`qvJ01`kRr~)$>_zM4h8wll4
z7(xXYO_gN<JE5$7#0m=}oiTB6{lc|hU9h&q%!ki4qx$V~>l76v?MZS?o+4;ntE=S8
zF&atkofJ(AjZ703tsWd|<!l+@+!LHc&{u}m^X74T<>{E<1yO;4Nxr^6Kcj&!H6C-W
z(`|q5eC8*5XP!ls-sGxvP{KqnbIGD*b5y}$iTwf-T_RYq+Zx=fVf9_<T6$1RVY;4Q
zteSkuIeK0RRoKg@J$R@xDKRTB*>P-1@4Bva?qzk-sa0xR#X8sMG&6E_&HiQKEtgx3
z>LtfIQt8)xnzrY;Yf+EB*DOR&shTfhb@0-ik46GN42H;azKOR$cS5Xl&6XwPzf#7(
zRFpCaYtr3ymQWjRB<qK1Qfi&=>`O~G2;TY7X;p5q<X(To^98qPwdeTzuoO3$6{VrA
zn@?i%tU~(AH9BZc4)RZ}J?@*TyGFd_m?~9wF{yL6dw^04U;FiPv{Sc=V~Wwiorf}j
zzR)X1J}Z}1&dOvJv+`M$Xj?|JaW^67NrTH4n!{B!X*1>+7h_!%j12);&&J2W5A7dm
CyJwOB

diff --git a/packages/component/component/datePickerV2/hook/useBaseDatePicker.ts b/packages/component/component/datePicker/hook/useBaseDatePicker.ts
similarity index 100%
rename from packages/component/component/datePickerV2/hook/useBaseDatePicker.ts
rename to packages/component/component/datePicker/hook/useBaseDatePicker.ts
diff --git a/packages/component/component/datePickerV2/hook/useDatePicker.ts b/packages/component/component/datePicker/hook/useDatePicker.ts
similarity index 82%
rename from packages/component/component/datePickerV2/hook/useDatePicker.ts
rename to packages/component/component/datePicker/hook/useDatePicker.ts
index 70de29d6..179561b8 100644
--- a/packages/component/component/datePickerV2/hook/useDatePicker.ts
+++ b/packages/component/component/datePicker/hook/useDatePicker.ts
@@ -15,7 +15,7 @@ import MonthRange from "../component/MonthRange.vue";
 import YearRange from "../component/YearRange.vue";
 
 import { normalizeDayjsValue } from "../util";
-import { isArray, isNumber, isUndefined } from "../../../utils";
+import { isArray, isNumber } from "../../../utils";
 
 export const useDatePicker = (props: RequiredDatePickerProps) => {
   const initDate = computed<Dayjs | Array<Dayjs> | null>(() => {
@@ -37,8 +37,6 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
         value += "";
       }
 
-      // 处理CustomParseFormat插件可能造成解析Date, number, '', null...错误
-
       return normalizeDayjsValue(
         value as DatePickerModelValueSingleType,
         _format.value
@@ -47,16 +45,7 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
   });
 
   const _format = computed(() => {
-    if (!(props.format || isUndefined(props.format))) {
-      console.error(
-        "[Layui-vue/DatePicker] format格式错误。应为dayjs.format支持的格式化占位符列表或者undefined！"
-      );
-    }
-
-    // undefined 兼容dayjs_CustomParseFormat 第一参数为Date对象
-    return props.format || !isUndefined(props.format)
-      ? props.format
-      : typeMap.value.format;
+    return props.format || typeMap.value.format;
   });
 
   const _inputFormat = computed(() => {
diff --git a/packages/component/component/datePicker/index.hooks.ts b/packages/component/component/datePicker/hook/useProps.ts
similarity index 57%
rename from packages/component/component/datePicker/index.hooks.ts
rename to packages/component/component/datePicker/hook/useProps.ts
index e11947c2..3094fa91 100644
--- a/packages/component/component/datePicker/index.hooks.ts
+++ b/packages/component/component/datePicker/hook/useProps.ts
@@ -1,7 +1,9 @@
-import { LayFormContext } from "../../types";
+import type { LayFormContext } from "../../../types";
 import { computed, inject } from "vue";
 
-export default function useProps(props: any) {
+import type { DatePickerProps } from "../interface";
+
+export function useProps(props: DatePickerProps) {
   const size = computed(() => {
     const formContext = inject("LayForm", {} as LayFormContext);
 
diff --git a/packages/component/component/datePickerV2/hook/useShortcutsRange.ts b/packages/component/component/datePicker/hook/useShortcutsRange.ts
similarity index 100%
rename from packages/component/component/datePickerV2/hook/useShortcutsRange.ts
rename to packages/component/component/datePicker/hook/useShortcutsRange.ts
diff --git a/packages/component/component/datePicker/index.less b/packages/component/component/datePicker/index.less
index 09c43cdc..e39f5af6 100644
--- a/packages/component/component/datePicker/index.less
+++ b/packages/component/component/datePicker/index.less
@@ -1,647 +1,697 @@
-@import "../dropdown/index.less";
-@import "../input/index.less";
-
-@lg: 44px;
-@md: 38px;
-@sm: 32px;
-@xs: 26px;
-@lg-width: 260px;
-@md-width: 220px;
-@sm-width: 180px;
-@xs-width: 140px;
-@lg-range-width: 520px;
-@md-range-width: 440px;
-@sm-range-width: 360px;
-@xs-range-width: 280px;
-
-.set-size(@size,@width) {
-  & {
-    width: @width;
-    height: @size;
-    .layui-input {
-      height: @size;
-      line-height: @size;
-    }
-  }
-}
-
-.layui-date-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-width);
-  }
-}
-.layui-date-range-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-range-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-range-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-range-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-range-width);
-  }
-}
-
-@font-face {
-  font-family: "laydate-icon";
-  src: url("./font/iconfont.eot");
-  src: url("./font/iconfont.eot#iefix") format("embedded-opentype"),
-    url("./font/iconfont.svg#iconfont") format("svg"),
-    url("./font/iconfont.woff") format("woff"),
-    url("./font/iconfont.ttf") format("truetype");
-}
-
-.laydate-icon {
-  font-family: "laydate-icon" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html #layuicss-laydate {
-  display: none;
-  position: absolute;
-  width: 1989px;
-}
-
-/* 初始化 */
-.layui-laydate * {
-  margin: 0;
-  padding: 0;
-}
-
-/* 主体结构 */
-.layui-laydate,
-.layui-laydate * {
-  box-sizing: border-box;
-}
-.layui-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;
-  }
-}
-.layui-laydate-main {
-  width: 272px;
-}
-.layui-laydate-header *,
-.layui-laydate-content td,
-.layui-laydate-list li {
-  transition-duration: 0.3s;
-  -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 {
-  display: none !important;
-}
-.laydate-ym-show .laydate-prev-y,
-.laydate-ym-show .laydate-next-y {
-  display: inline-block !important;
-}
-.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 展开时间列表时 */
-.laydate-time-show .layui-laydate-header .layui-icon,
-.laydate-time-show .laydate-set-ym span[lay-type="year"],
-.laydate-time-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 头部结构 */
-.layui-laydate-header {
-  position: relative;
-  line-height: 30px;
-  padding: 10px 70px 5px;
-}
-.layui-laydate-header * {
-  vertical-align: bottom;
-}
-.layui-laydate-header i {
-  position: absolute;
-  top: 10px;
-  padding: 0 5px;
-  color: #999;
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-.layui-laydate-header i.laydate-prev-y {
-  left: 15px;
-}
-.layui-laydate-header i.laydate-prev-m {
-  left: 45px;
-}
-.layui-laydate-header i.laydate-next-y {
-  right: 15px;
-}
-.layui-laydate-header i.laydate-next-m {
-  right: 45px;
-}
-.layui-laydate-year-panel-header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 14px 5px;
-  line-height: 30px;
-  border-bottom: 1px solid #e2e2e2;
-
-  .laydate-set-ym {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    i {
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-}
-.laydate-set-ym {
-  width: 100%;
-  text-align: center;
-  box-sizing: border-box;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.laydate-set-ym span {
-  padding: 0 10px;
-  cursor: pointer;
-}
-.laydate-time-text {
-  cursor: default !important;
-}
-
-/* 主体结构 */
-.layui-laydate-content {
-  position: relative;
-  padding: 10px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-.layui-laydate-content table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-.layui-laydate-content th,
-.layui-laydate-content td {
-  width: 36px;
-  height: 30px;
-  padding: 5px;
-  text-align: center !important;
-}
-.layui-laydate-content th {
-  font-weight: 400;
-}
-.layui-laydate-content td {
-  position: relative;
-  cursor: pointer;
-}
-.laydate-day-mark {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  line-height: 30px;
-  font-size: 12px;
-  overflow: hidden;
-}
-.laydate-day-mark::after {
-  position: absolute;
-  content: "";
-  right: 2px;
-  top: 2px;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-}
-
-/* 底部结构 */
-.layui-laydate-footer {
-  position: relative;
-  height: 46px;
-  line-height: 26px;
-  padding: 10px;
-}
-
-.layui-laydate-footer .laydate-footer-btns span {
-  border-radius: 0px;
-}
-
-.layui-laydate-footer .laydate-footer-btns span:first-child {
-  border-top-left-radius: var(--global-border-radius);
-  border-bottom-left-radius: var(--global-border-radius);
-}
-
-.layui-laydate-footer .laydate-footer-btns span:last-child {
-  border-top-right-radius: var(--global-border-radius);
-  border-bottom-right-radius: var(--global-border-radius);
-}
-
-.layui-laydate-footer span {
-  display: inline-block;
-  vertical-align: top;
-  height: 26px;
-  line-height: 24px;
-  padding: 0 10px;
-  border: 1px solid #c9c9c9;
-  border-radius: 2px;
-  background-color: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.3s;
-}
-.layui-laydate-footer span:hover {
-  color: var(--global-primary-color);
-}
-.layui-laydate-footer span.layui-laydate-preview {
-  cursor: default;
-  border-color: transparent !important;
-}
-.layui-laydate-footer span.layui-laydate-preview:hover {
-  color: #666;
-}
-.layui-laydate-footer span:first-child.layui-laydate-preview {
-  padding-left: 0;
-}
-.laydate-footer-btns {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-.laydate-footer-btns span {
-  margin: 0 0 0 -1px;
-}
-
-/* 年月列表 */
-.layui-laydate-list {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-.layui-laydate-list > li {
-  position: relative;
-  display: inline-block;
-  width: 33.3%;
-  height: 36px;
-  line-height: 36px;
-  margin: 3px 0;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-.laydate-month-list > li {
-  width: 25%;
-  margin: 17px 0;
-}
-.laydate-time-list > li {
-  height: 100%;
-  margin: 0;
-  line-height: normal;
-  cursor: default;
-}
-.laydate-time-list p {
-  position: relative;
-  top: -4px;
-  line-height: 29px;
-}
-.laydate-time-list ol {
-  height: 181px;
-  overflow: hidden;
-}
-.laydate-time-list > li:hover ol {
-  overflow-y: auto;
-}
-
-.laydate-time-list ol li {
-  width: 130%;
-  padding-left: 4px;
-  height: 30px;
-  line-height: 30px;
-  text-align: left;
-  cursor: pointer;
-}
-
-/* 提示 */
-.layui-laydate-hint {
-  top: 115px;
-  left: 50%;
-  width: 250px;
-  margin-left: -125px;
-  line-height: 20px;
-  padding: 15px;
-  text-align: center;
-  font-size: 12px;
-  color: #ff5722;
-}
-
-/* 双日历 */
-.layui-laydate-range {
-  min-width: 546px;
-}
-.layui-laydate-range .layui-laydate-main {
-  display: inline-block;
-  vertical-align: middle;
-}
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
-  border-left: 1px solid #e2e2e2;
-}
-
-/* 默认简约主题 */
-.layui-laydate,
-.layui-laydate-hint {
-  background-color: #fff;
-  color: #666;
-}
-.layui-laydate-header {
-  border-bottom: 1px solid #e2e2e2;
-}
-.layui-laydate-header i:hover,
-.layui-laydate-header span:hover {
-  color: #5fb878;
-}
-.layui-laydate-content {
-  border-top: none 0;
-  border-bottom: none 0;
-}
-.layui-laydate-content th {
-  color: #333;
-}
-.layui-laydate-content td {
-  color: #666;
-}
-.layui-laydate-content td.laydate-selected {
-  background-color: #b5fff8;
-}
-.laydate-selected:hover {
-  background-color: #00f7de !important;
-}
-.layui-laydate-content td:hover,
-.layui-laydate-list li:hover {
-  background-color: #eee;
-  color: #333;
-}
-.laydate-time-list li ol {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #e2e2e2;
-}
-.laydate-time-list li:first-child ol {
-  border-left-width: 1px;
-}
-.laydate-time-list > li:hover {
-  background: none;
-}
-.layui-laydate-content .laydate-day-prev,
-.layui-laydate-content .laydate-day-next {
-  color: #d2d2d2;
-}
-.laydate-selected.laydate-day-prev,
-.laydate-selected.laydate-day-next {
-  background-color: #f8f8f8 !important;
-}
-.layui-laydate-footer {
-  border-top: 1px solid #e2e2e2;
-}
-.layui-laydate-hint {
-  color: #ff5722;
-}
-.laydate-day-mark::after {
-  background-color: #5fb878;
-}
-.layui-laydate-content td.layui-this .laydate-day-mark::after {
-  display: none;
-}
-.layui-laydate-footer span[lay-type="date"] {
-  color: #5fb878;
-}
-.layui-laydate .layui-this {
-  background-color: var(--global-primary-color) !important;
-  color: #fff !important;
-}
-
-.layui-laydate .laydate-disabled,
-.layui-laydate .laydate-disabled:hover {
-  background: none !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-/* 墨绿/自定义背景色主题 */
-.laydate-theme-molv {
-  border: none;
-}
-.laydate-theme-molv.layui-laydate-range {
-  width: 548px;
-}
-.laydate-theme-molv .layui-laydate-main {
-  width: 274px;
-}
-.laydate-theme-molv .layui-laydate-header {
-  border: none;
-  background-color: #009688;
-}
-.laydate-theme-molv .layui-laydate-header i,
-.laydate-theme-molv .layui-laydate-header span {
-  color: #f6f6f6;
-}
-.laydate-theme-molv .layui-laydate-header i:hover,
-.laydate-theme-molv .layui-laydate-header span:hover {
-  color: #fff;
-}
-.laydate-theme-molv .layui-laydate-content {
-  border: 1px solid #e2e2e2;
-  border-top: none;
-  border-bottom: none;
-}
-.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
-  border-left: none;
-}
-.laydate-theme-molv .layui-laydate-footer {
-  border: 1px solid #e2e2e2;
-}
-
-/* 格子主题 */
-.laydate-theme-grid .layui-laydate-content td,
-.laydate-theme-grid .layui-laydate-content thead,
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  border: 1px solid #e2e2e2;
-}
-.laydate-theme-grid .laydate-selected,
-.laydate-theme-grid .laydate-selected:hover {
-  background-color: #f2f2f2 !important;
-  color: #009688 !important;
-}
-.laydate-theme-grid .laydate-selected.laydate-day-prev,
-.laydate-theme-grid .laydate-selected.laydate-day-next {
-  color: #d2d2d2 !important;
-}
-.laydate-theme-grid .laydate-year-list,
-.laydate-theme-grid .laydate-month-list {
-  margin: 1px 0 0 1px;
-}
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  margin: 0 -1px -1px 0;
-}
-.laydate-theme-grid .laydate-year-list > li {
-  height: 43px;
-  line-height: 43px;
-}
-.laydate-theme-grid .laydate-month-list > li {
-  height: 71px;
-  line-height: 71px;
-}
-.laydate-range-hover {
-  background-color: var(--global-neutral-color-2) !important;
-}
-.layui-laydate-content .layui-disabled:hover {
-  background-color: transparent !important;
-}
-
-.laydate-range-inputs {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  border-width: 1px;
-  box-sizing: border-box;
-  width: 100%;
-  border-style: solid;
-  overflow: hidden;
-  display: inline-flex;
-  border-color: var(--input-border-color);
-  border-radius: var(--input-border-radius);
-  &:hover {
-    border-color: #d2d2d2;
-  }
-  .range-separator {
-    margin: 0 5px;
-    color: var(--global-neutral-color-8);
-    background-color: transparent;
-  }
-  .layui-input-wrapper {
-    border: none;
-    box-sizing: border-box;
-    input {
-      text-align: center;
-      padding: 0;
-    }
-  }
-  .layui-input {
-    border: none;
-  }
-}
-.layui-laydate-range {
-  .laydate-set-ym {
-    overflow: visible;
-    white-space: nowrap;
-  }
-  .laydate-set-ym .layui-dropdown {
-    width: auto !important;
-  }
-
-  .time-panel {
-    .layui-laydate-main {
-      width: 272px;
-      display: unset !important;
-    }
-    .layui-laydate-preview {
-      display: none;
-    }
-  }
-  .layui-laydate-content {
-    .laydate-year-list {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-  .layui-laydate-list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-.layui-laydate-range-datetime {
-  .layui-laydate-main {
-    width: 340px;
-  }
-}
-.layui-laydate-current {
-  background-color: var(--global-neutral-color-3);
-}
-
-.laydate-time-list > li:hover ol::-webkit-scrollbar {
-  width: 0px;
-}
-.layui-laydate-content::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #eeeeee;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb:hover {
-  background-color: #dddddd;
-}
+@import "../dropdown/index.less";
+@import "../input/index.less";
+
+@lg: 44px;
+@md: 38px;
+@sm: 32px;
+@xs: 26px;
+@lg-width: 260px;
+@md-width: 220px;
+@sm-width: 180px;
+@xs-width: 140px;
+@lg-range-width: 520px;
+@md-range-width: 440px;
+@sm-range-width: 360px;
+@xs-range-width: 280px;
+
+.set-size(@size,@width) {
+  & {
+    width: @width;
+    height: @size;
+    .layui-input {
+      height: @size;
+      line-height: @size;
+    }
+  }
+}
+
+.layui-date-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-width);
+  }
+}
+.layui-date-range-picker {
+  &[size="lg"] {
+    .set-size(@lg,@lg-range-width);
+  }
+  &[size="md"] {
+    .set-size(@md,@md-range-width);
+  }
+  &[size="sm"] {
+    .set-size(@sm,@sm-range-width);
+  }
+  &[size="xs"] {
+    .set-size(@xs,@xs-range-width);
+  }
+}
+
+
+html #layuicss-laydate {
+  display: none;
+  position: absolute;
+  width: 1989px;
+}
+
+/* 初始化 */
+.layui-laydate * {
+  margin: 0;
+  padding: 0;
+}
+
+/* 主体结构 */
+.layui-laydate,
+.layui-laydate * {
+  box-sizing: border-box;
+}
+.layui-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;
+  }
+}
+.layui-laydate-main {
+  width: 272px;
+}
+.layui-laydate-header *,
+.layui-laydate-content td,
+.layui-laydate-list li {
+  transition-duration: 0.3s;
+  -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 {
+  display: none !important;
+}
+.laydate-ym-show .laydate-prev-y,
+.laydate-ym-show .laydate-next-y {
+  display: inline-block !important;
+}
+.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 展开时间列表时 */
+.laydate-time-show .layui-laydate-header .layui-icon,
+.laydate-time-show .laydate-set-ym span[lay-type="year"],
+.laydate-time-show .laydate-set-ym span[lay-type="month"] {
+  display: none !important;
+}
+
+/* 头部结构 */
+.layui-laydate-header {
+  position: relative;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  // line-height: 30px;
+  // padding: 10px 70px 5px;
+}
+.layui-laydate-header * {
+  vertical-align: bottom;
+}
+.layui-laydate-header i {
+  // position: absolute;
+  // top: 10px;
+  padding: 0 5px;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.layui-laydate-header .layui-icon-prev{
+  left: 15px;
+}
+.layui-laydate-header .layui-icon-left {
+  left: 45px;
+}
+.layui-laydate-header .layui-icon-next {
+  right: 15px;
+}
+.layui-laydate-header .layui-icon-right {
+  right: 45px;
+}
+.layui-laydate-year-panel-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px 5px;
+  line-height: 30px;
+  border-bottom: 1px solid #e2e2e2;
+
+  .laydate-set-ym {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+.laydate-set-ym {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.laydate-set-ym span {
+  padding: 0 10px;
+  cursor: pointer;
+}
+.laydate-time-text {
+  cursor: default !important;
+}
+
+/* 主体结构 */
+.layui-laydate-content {
+  position: relative;
+  padding: 10px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.layui-laydate-content table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.layui-laydate-content th,
+.layui-laydate-content td {
+  width: 36px;
+  height: 30px;
+  padding: 5px;
+  text-align: center !important;
+}
+.layui-laydate-content th {
+  font-weight: 400;
+}
+.layui-laydate-content td {
+  position: relative;
+  cursor: pointer;
+}
+.laydate-day-mark {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  line-height: 30px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.laydate-day-mark::after {
+  position: absolute;
+  content: "";
+  right: 2px;
+  top: 2px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+/* 底部结构 */
+.layui-laydate-footer {
+  // position: relative;
+  // height: 46px;
+  display: flex;
+  line-height: 26px;
+  padding: 10px;
+}
+
+
+.layui-laydate-footer .layui-btn{
+  padding: 0 10px;
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+
+.layui-laydate-footer .laydate-footer-btns .layui-btn{
+  border-radius: 0;
+}
+
+.layui-laydate-footer .laydate-footer-btns .layui-btn:first-child {
+  border-top-left-radius: var(--global-border-radius);
+  border-bottom-left-radius: var(--global-border-radius);
+}
+
+.layui-laydate-footer .laydate-footer-btns .layui-btn:last-child {
+  border-top-right-radius: var(--global-border-radius);
+  border-bottom-right-radius: var(--global-border-radius);
+  margin-left: -1px;
+}
+
+.layui-laydate-footer .layui-btn + .layui-btn {
+  margin-left: 0;
+}
+.layui-laydate-footer {
+  .laydate-footer-btns {
+    .layui-btn:not(.layui-btn-disabled) {
+      span:hover {
+        color: var(--global-primary-color);
+      }
+    }
+    
+  }
+  
+}
+.layui-laydate-footer span.layui-laydate-preview {
+  cursor: default;
+  border-color: transparent !important;
+}
+.layui-laydate-footer span.layui-laydate-preview:hover {
+  color: #666;
+}
+.layui-laydate-footer span:first-child.layui-laydate-preview {
+  padding-left: 0;
+}
+.laydate-footer-btns {
+  margin-left: auto;
+  // position: absolute;
+  // right: 10px;
+  // top: 10px;
+}
+
+.layui-laydate-footer .type-time {
+  color: var(--global-primary-color);
+}
+
+/* 年月列表 */
+.layui-laydate-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.layui-laydate-list > li {
+  position: relative;
+  display: inline-block;
+  width: 33.3%;
+  height: 36px;
+  line-height: 36px;
+  margin: 3px 0;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+.laydate-month-list > li {
+  width: 25%;
+  margin: 17px 0;
+}
+.laydate-time-list > li {
+  height: 100%;
+  margin: 0;
+  line-height: normal;
+  cursor: default;
+}
+.laydate-time-list p {
+  position: relative;
+  top: -4px;
+  line-height: 29px;
+}
+.laydate-time-list ol {
+  height: 181px;
+  overflow: hidden;
+}
+.laydate-time-list > li:hover ol {
+  overflow-y: auto;
+}
+
+.laydate-time-list ol li {
+  width: 130%;
+  padding-left: 4px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* 提示 */
+.layui-laydate-hint {
+  top: 115px;
+  left: 50%;
+  width: 250px;
+  margin-left: -125px;
+  line-height: 20px;
+  padding: 15px;
+  text-align: center;
+  font-size: 12px;
+  color: #ff5722;
+}
+
+/* 双日历 */
+.layui-laydate-range {
+  min-width: 546px;
+}
+.layui-laydate-range .layui-laydate-main {
+  display: inline-block;
+  vertical-align: middle;
+}
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
+.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
+  border-left: 1px solid #e2e2e2;
+}
+
+/* 默认简约主题 */
+.layui-laydate,
+.layui-laydate-hint {
+  background-color: #fff;
+  color: #666;
+}
+.layui-laydate-header {
+  border-bottom: 1px solid #e2e2e2;
+}
+.layui-laydate-header i:hover,
+.layui-laydate-header span:hover {
+  color: #5fb878;
+}
+.layui-laydate-content {
+  border-top: none 0;
+  border-bottom: none 0;
+}
+.layui-laydate-content th {
+  color: #333;
+}
+.layui-laydate-content td {
+  color: #666;
+}
+.layui-laydate-content td.laydate-selected {
+  background-color: #b5fff8;
+}
+.laydate-selected:hover {
+  background-color: #00f7de !important;
+}
+.layui-laydate-content td:hover,
+.layui-laydate-list li:hover {
+  background-color: #eee;
+  color: #333;
+}
+.laydate-time-list li ol {
+  margin: 0;
+  padding: 0;
+  border: 1px solid #e2e2e2;
+}
+.laydate-time-list li:first-child ol {
+  border-left-width: 1px;
+}
+.laydate-time-list > li:hover {
+  background: none;
+}
+.layui-laydate-content .laydate-day-prev,
+.layui-laydate-content .laydate-day-next {
+  color: #d2d2d2;
+}
+.laydate-selected.laydate-day-prev,
+.laydate-selected.laydate-day-next {
+  background-color: #f8f8f8 !important;
+}
+.layui-laydate-footer {
+  border-top: 1px solid #e2e2e2;
+}
+.layui-laydate-hint {
+  color: #ff5722;
+}
+.laydate-day-mark::after {
+  background-color: #5fb878;
+}
+.layui-laydate-content td.layui-this .laydate-day-mark::after {
+  display: none;
+}
+.layui-laydate-footer span[lay-type="date"] {
+  color: #5fb878;
+}
+.layui-laydate .layui-this {
+  background-color: var(--global-primary-color) !important;
+  color: #fff !important;
+}
+
+.layui-laydate .laydate-disabled,
+.layui-laydate .laydate-disabled:hover {
+  background: none !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+/* 墨绿/自定义背景色主题 */
+.laydate-theme-molv {
+  border: none;
+}
+.laydate-theme-molv.layui-laydate-range {
+  width: 548px;
+}
+.laydate-theme-molv .layui-laydate-main {
+  width: 274px;
+}
+.laydate-theme-molv .layui-laydate-header {
+  border: none;
+  background-color: #009688;
+}
+.laydate-theme-molv .layui-laydate-header i,
+.laydate-theme-molv .layui-laydate-header span {
+  color: #f6f6f6;
+}
+.laydate-theme-molv .layui-laydate-header i:hover,
+.laydate-theme-molv .layui-laydate-header span:hover {
+  color: #fff;
+}
+.laydate-theme-molv .layui-laydate-content {
+  border: 1px solid #e2e2e2;
+  border-top: none;
+  border-bottom: none;
+}
+.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
+  border-left: none;
+}
+.laydate-theme-molv .layui-laydate-footer {
+  border: 1px solid #e2e2e2;
+}
+
+/* 格子主题 */
+.laydate-theme-grid .layui-laydate-content td,
+.laydate-theme-grid .layui-laydate-content thead,
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  border: 1px solid #e2e2e2;
+}
+.laydate-theme-grid .laydate-selected,
+.laydate-theme-grid .laydate-selected:hover {
+  background-color: #f2f2f2 !important;
+  color: #009688 !important;
+}
+.laydate-theme-grid .laydate-selected.laydate-day-prev,
+.laydate-theme-grid .laydate-selected.laydate-day-next {
+  color: #d2d2d2 !important;
+}
+.laydate-theme-grid .laydate-year-list,
+.laydate-theme-grid .laydate-month-list {
+  margin: 1px 0 0 1px;
+}
+.laydate-theme-grid .laydate-year-list > li,
+.laydate-theme-grid .laydate-month-list > li {
+  margin: 0 -1px -1px 0;
+}
+.laydate-theme-grid .laydate-year-list > li {
+  height: 43px;
+  line-height: 43px;
+}
+.laydate-theme-grid .laydate-month-list > li {
+  height: 71px;
+  line-height: 71px;
+}
+.laydate-range-hover {
+  background-color: var(--global-neutral-color-2) !important;
+}
+.layui-laydate-content .layui-disabled:not(.layui-laydate-current,.layui-this):hover {
+  background-color: transparent !important;
+}
+
+.laydate-range-inputs {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  border-width: 1px;
+  box-sizing: border-box;
+  width: 100%;
+  border-style: solid;
+  overflow: hidden;
+  display: inline-flex;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  &:hover {
+    border-color: #d2d2d2;
+  }
+  .range-separator {
+    margin: 0 5px;
+    color: var(--global-neutral-color-8);
+    background-color: transparent;
+  }
+  .layui-input-wrapper {
+    border: none;
+    box-sizing: border-box;
+    input {
+      text-align: center;
+      padding: 0;
+    }
+  }
+  .layui-input {
+    border: none;
+  }
+}
+.layui-laydate-range {
+  &-main {
+    display: flex;
+  }
+  .laydate-set-ym {
+    overflow: visible;
+    white-space: nowrap;
+    line-height: 46px;
+  }
+  .laydate-set-ym .layui-dropdown {
+    width: auto !important;
+  }
+
+  .time-panel {
+    .layui-laydate-main {
+      width: 272px;
+      display: unset !important;
+    }
+    .layui-laydate-preview {
+      display: none;
+    }
+  }
+  .layui-laydate-content {
+    .laydate-year-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .layui-laydate-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.layui-laydate-range-datetime {
+  .layui-laydate-main {
+    width: 340px;
+  }
+}
+.layui-laydate-current {
+  background-color: var(--global-neutral-color-3);
+}
+
+.laydate-time-list > li:hover ol::-webkit-scrollbar {
+  width: 0px;
+}
+.layui-laydate-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #eeeeee;
+}
+.layui-laydate-content::-webkit-scrollbar-thumb:hover {
+  background-color: #dddddd;
+}
+
+.layui-date-range-picker{
+  .end-input{
+    .layui-input-clear{
+      opacity: 0;
+      visibility: hidden;
+      display: block;
+      padding: 0 10px;
+    }
+  }
+
+  .laydate-range-inputs{
+    &:hover {
+      .end-input{
+        .layui-input-clear{
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+.layui-laydate-shortcut{
+  width: 80px;
+  padding: 6px 0;
+  display: inline-block;
+  vertical-align: top;
+  overflow: auto;
+  max-height: 276px;
+  text-align: center;
+}
+
+.layui-laydate-shortcut+.layui-laydate-main {
+  display: inline-block;
+  border-left: 1px solid #e2e2e2;
+}
+
+.layui-laydate-shortcut>li {
+  padding: 5px 8px;
+  cursor: pointer;
+  line-height: 18px;
+
+  &:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all .3s;
+  }
+}
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index f6ab62dc..ccea47f0 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -1,136 +1,32 @@
-<template>
-  <div
-    :class="['layui-date-picker', { 'layui-date-range-picker': range }]"
-    :size="size"
-  >
-    <lay-dropdown
-      ref="dropdownRef"
-      :disabled="disabled"
-      :autoFitMinWidth="false"
-      :contentClass="contentClass"
-      :contentStyle="contentStyle"
-    >
-      <lay-input
-        :name="name"
-        :readonly="readonly"
-        :placeholder="startPlaceholder"
-        :prefix-icon="prefixIcon"
-        :suffix-icon="suffixIcon"
-        :disabled="disabled"
-        v-model="dateValue"
-        v-if="!range"
-        @change="onChange"
-        @blur="$emit('blur')"
-        @focus="$emit('focus')"
-        :allow-clear="!disabled && allowClear"
-        :size="size"
-        @clear="handleClear"
-      >
-      </lay-input>
-      <div class="laydate-range-inputs" v-else>
-        <lay-input
-          :readonly="readonly"
-          :name="name"
-          v-model="dateValue[0]"
-          :placeholder="startPlaceholder"
-          :disabled="disabled"
-          @change="onChange"
-          @blur="$emit('blur')"
-          @focus="$emit('focus')"
-          class="start-input"
-          :size="size"
-        >
-        </lay-input>
-        <span class="range-separator">{{ rangeSeparator }}</span>
-        <lay-input
-          :readonly="readonly"
-          :name="name"
-          :allow-clear="!disabled && allowClear"
-          :placeholder="endPlaceholder"
-          v-model="dateValue[1]"
-          :disabled="disabled"
-          @change="onChange"
-          @blur="$emit('blur')"
-          @focus="$emit('focus')"
-          class="end-input"
-          :size="size"
-          @clear="handleClear"
-        >
-        </lay-input>
-      </div>
+<script setup lang="ts">
+import "./index.less";
+import dayjs from "dayjs";
+import { computed, provide } from "vue";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import IsSameOrBefore from "dayjs/plugin/IsSameOrBefore";
+import IsSameOrAfter from "dayjs/plugin/IsSameOrAfter";
+import objectSupport from "dayjs/plugin/objectSupport";
+import {
+  DATE_PICKER_CONTEXT,
+  type DatePickerProps as _DatePickerProps,
+  type DatePickerType,
+} from "./interface";
 
-      <template #content>
-        <!-- 日期选择器 -->
-        <DatePanel
-          v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
-          v-model="currentDay"
-        ></DatePanel>
-        <!-- 时间选择器 -->
-        <TimePanel
-          v-if="!range && showPanel === 'time'"
-          v-model="hms"
-        ></TimePanel>
-        <!-- 年份选择器 -->
-        <YearPanel
-          v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
-          v-model="currentYear"
-        >
-        </YearPanel>
-        <!-- 月份选择器 -->
-        <MonthPanel
-          v-if="!range && showPanel === 'month'"
-          v-model="currentMonth"
-        ></MonthPanel>
-        <!-- 日期选择器（范围） -->
-        <DateRange
-          v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
-          v-model:startTime="rangeValue.first"
-          v-model:endTime="rangeValue.last"
-        ></DateRange>
-        <!-- 月份选择器（范围） -->
-        <MonthRange
-          v-if="range && (showPanel === 'yearmonth' || showPanel === 'month')"
-          v-model:startTime="rangeValue.first"
-          v-model:endTime="rangeValue.last"
-        >
-        </MonthRange>
-        <!-- 时间选择器 (范围) -->
-        <TimeRange
-          v-if="range && showPanel === 'time'"
-          v-model:startTime="rangeValue.first"
-          v-model:endTime="rangeValue.last"
-          :format="format"
-        ></TimeRange>
-        <!-- 年份选择器 (范围) -->
-      </template>
-    </lay-dropdown>
-  </div>
-</template>
+import { useProps } from "./hook/useProps";
+import { useDatePicker } from "./hook/useDatePicker";
 
-<script lang="ts" setup>
-// import "./index.less";
-import dayjs from "dayjs";
-import LayInput from "../input/index.vue";
-import LayDropdown from "../dropdown/index.vue";
-import { getMonth, getYear, getDay } from "./day";
-import type { Ref } from "vue";
-import { ref, watch, reactive, provide, computed } from "vue";
-import DatePanel from "./components/DatePanel.vue";
-import TimePanel from "./components/TimePanel.vue";
-import YearPanel from "./components/YearPanel.vue";
-import MonthPanel from "./components/MonthPanel.vue";
-import DateRange from "./components/DateRange.vue";
-import MonthRange from "./components/MonthRange.vue";
-import TimeRange from "./components/TimeRange.vue";
-import useProps from "./index.hooks";
-import { DatePickerProps } from "./interface";
+import InputBlock from "./component/common/InputBlock.vue";
 
-defineOptions({
-  name: "LayDatePicker",
-});
+dayjs.extend(customParseFormat);
+dayjs.extend(IsSameOrBefore);
+dayjs.extend(IsSameOrAfter);
+dayjs.extend(objectSupport);
+
+export type DatePickerProps = _DatePickerProps;
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
-  modelValue: "",
+  modelValue: null,
+  size: "md",
   type: "date",
   disabled: false,
   readonly: false,
@@ -141,328 +37,30 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   prefixIcon: "layui-icon-date",
   suffixIcon: "",
   timestamp: false,
-  format: "",
+  defaultValue: null,
+  defaultTime: null,
   yearPage: 15,
-  yearStep: 1,
+  // yearStep: 1,
 });
 
 const { size } = useProps(props);
+const { RenderComponent, renderComponentProps } = useDatePicker(props);
 
-const startPlaceholder = computed(() => {
-  if (Array.isArray(props.placeholder)) {
-    return props.placeholder[0];
-  }
-  return props.placeholder;
-});
-
-const endPlaceholder = computed(() => {
-  if (Array.isArray(props.placeholder)) {
-    return props.placeholder[1];
-  }
-  return props.placeholder;
+const format = computed<string>(() => {
+  return props.inputFormat ?? renderComponentProps.value.inputFormat!;
 });
 
-const dropdownRef = ref(null);
-const $emits = defineEmits([
-  "update:modelValue",
-  "change",
-  "blur",
-  "focus",
-  "clear",
-]);
-const currentYear = ref<number>(0);
-const currentMonth = ref<number>(0);
-const currentDay = ref<number>(0);
-const yearPage = ref<number>(props.yearPage);
-const yearStep = ref<number>(props.yearStep);
-const showPanel = ref<string>("date");
-const rangeValue = reactive({ first: "", last: "" });
-const hms = ref({
-  hh: 0,
-  mm: 0,
-  ss: 0,
-});
-
-const calDateValue = () => {
-  let dayjsVal;
-  switch (props.type) {
-    case "date":
-      dayjsVal =
-        currentDay.value !== -1
-          ? dayjs(currentDay.value).format(
-              props.format ? props.format : "YYYY-MM-DD"
-            )
-          : "";
-      break;
-    case "datetime":
-      dayjsVal =
-        currentDay.value !== -1
-          ? dayjs(currentDay.value)
-              .hour(hms.value.hh)
-              .minute(hms.value.mm)
-              .second(hms.value.ss)
-              .format(props.format ? props.format : "YYYY-MM-DD HH:mm:ss")
-          : "";
-      break;
-    case "year":
-      dayjsVal =
-        currentYear.value !== -1
-          ? dayjs().year(currentYear.value).format("YYYY")
-          : "";
-      break;
-    case "month":
-      dayjsVal =
-        currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : "";
-      break;
-    case "time":
-      dayjsVal = dayjs()
-        .hour(hms.value.hh)
-        .minute(hms.value.mm)
-        .second(hms.value.ss)
-        .format(props.format ? props.format : "HH:mm:ss");
-      break;
-    case "yearmonth":
-      dayjsVal =
-        currentYear.value !== -1 && currentMonth.value !== -1
-          ? dayjs()
-              .year(currentYear.value)
-              .month(currentMonth.value)
-              .format(props.format ? props.format : "YYYY-MM")
-          : "";
-      break;
-    default:
-      dayjsVal =
-        currentDay.value !== -1
-          ? dayjs(currentDay.value)
-              .hour(hms.value.hh)
-              .minute(hms.value.mm)
-              .second(hms.value.ss)
-              .format()
-          : "";
-      break;
-  }
-  dateValue.value = dayjsVal !== "Invalid Date" ? dayjsVal : "";
-  return dayjsVal;
-};
-
-const calDateValueByRange = () => {
-  // 根据类型不同，格式化日期
-  let format = "YYYY-MM-DD";
-  switch (props.type) {
-    case "date":
-      format = props.format ? props.format : "YYYY-MM-DD";
-      break;
-    case "datetime":
-      format = props.format ? props.format : "YYYY-MM-DD HH:mm:ss";
-      break;
-    case "yearmonth":
-      format = props.format ? props.format : "YYYY-MM";
-      break;
-    case "time":
-      format = props.format ? props.format : "HH:mm:ss";
-      break;
-    case "month":
-      format = props.format ? props.format : "MM";
-      break;
-    case "year":
-      format = props.format ? props.format : "YYYY";
-      break;
-  }
-  dateValue.value = [
-    rangeValue.first ? dayjs(rangeValue.first).format(format) : "",
-    rangeValue.last ? dayjs(rangeValue.last).format(format) : rangeValue.last,
-  ];
-};
-
-// 计算结果日期
-const dateValue = props.range ? ref(["", ""]) : ref("");
-const getDateValue = () => {
-  let dayjsVal = calDateValue();
-  if (dayjsVal === "Invalid Date") {
-    $emits("update:modelValue", "");
-    return;
-  }
-  if (props.timestamp) {
-    $emits("update:modelValue", dayjs(dayjsVal).unix() * 1000);
-    $emits("change", dayjs(dayjsVal).unix() * 1000);
-  } else {
-    $emits("update:modelValue", dayjsVal);
-    $emits("change", dayjsVal);
-  }
-};
+provide(DATE_PICKER_CONTEXT, renderComponentProps.value);
 
-/**
- * 处理 range 启用时的值内容
- */
-const getDateValueByRange = () => {
-  // 如果内容是空的，直接返回
-  if (rangeValue.first === "" || rangeValue.last === "") {
-    dateValue.value = ["", ""];
-    $emits("update:modelValue", dateValue.value);
-    $emits("change", dateValue.value);
-    return;
-  }
-  calDateValueByRange();
-  $emits("update:modelValue", dateValue.value);
-  $emits("change", dateValue.value);
-};
-
-// 确认事件
-const ok = () => {
-  if (!props.range) {
-    getDateValue();
-  } else {
-    getDateValueByRange();
-  }
-  if (dropdownRef.value)
-    // @ts-ignore
-    dropdownRef.value.hide();
-  showPanel.value = props.type;
-};
-
-/**
- * 根据 type 变化，判定需要展示的面板
- */
-watch(
-  () => props.type,
-  () => {
-    showPanel.value = props.type;
-    if (props.type === "yearmonth" && !props.range) {
-      showPanel.value = "year";
-    }
-  },
-  { immediate: true }
-);
-
-/**
- * 监听 modelValue 变化，更新内部变量
- */
-watch(
-  () => props.modelValue,
-  () => {
-    let initModelValue: string =
-      props.range && props.modelValue
-        ? (props.modelValue as string[])[0] || ""
-        : (props.modelValue as string);
-    if (props.type === "month" || props.type === "year") {
-      initModelValue += "";
-    }
-    if (dateValue.value && dateValue.value === initModelValue) {
-      return;
-    }
-    hms.value.hh = isNaN(dayjs(initModelValue).hour())
-      ? 0
-      : dayjs(initModelValue).hour();
-    hms.value.mm = isNaN(dayjs(initModelValue).minute())
-      ? 0
-      : dayjs(initModelValue).minute();
-    hms.value.ss = isNaN(dayjs(initModelValue).second())
-      ? 0
-      : dayjs(initModelValue).second();
-    if (
-      initModelValue != null &&
-      initModelValue.length === 8 &&
-      props.type === "time"
-    ) {
-      let modelValue = initModelValue;
-      modelValue = "1970-01-01 " + modelValue;
-      hms.value.hh = dayjs(modelValue).hour();
-      hms.value.mm = dayjs(modelValue).minute();
-      hms.value.ss = dayjs(modelValue).second();
-    }
-    currentYear.value = initModelValue ? getYear(initModelValue) : -1;
-    currentMonth.value = initModelValue ? getMonth(initModelValue) : -1;
-    currentDay.value = initModelValue ? getDay(initModelValue) : -1;
-    if (props.type === "date" || props.type === "datetime") {
-      if (currentYear.value === -1) currentYear.value = dayjs().year();
-      if (currentMonth.value === -1) currentMonth.value = dayjs().month();
-      if (props.timestamp) {
-        currentDay.value = initModelValue
-          ? dayjs(parseInt(initModelValue)).startOf("date").unix() * 1000
-          : -1;
-      }
-    }
-    if (
-      initModelValue != null &&
-      initModelValue.length === 8 &&
-      props.type === "time"
-    ) {
-      // 时间范围选择，对 HH-mm-ss 格式补全
-      rangeValue.first = "1970-01-01 " + initModelValue;
-      rangeValue.last =
-        props.range && props.modelValue
-          ? "1970-01-01 " + (props.modelValue as string[])[1] || ""
-          : "";
-    } else {
-      rangeValue.first = initModelValue;
-      rangeValue.last =
-        props.range && props.modelValue
-          ? (props.modelValue as string[])[1] || ""
-          : "";
-    }
-    if (!props.range) {
-      calDateValue();
-    } else {
-      calDateValueByRange();
-    }
-  },
-  { immediate: true }
-);
-
-const innerMin: Ref<string> = ref("");
-const innerMax: Ref<string> = ref("");
-
-/**
- * 监听 min/max 变化，更新内部变量
- */
-watch(
-  () => props.min,
-  () => {
-    innerMin.value = props.min as string;
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.max,
-  () => {
-    innerMax.value = props.max as string;
-  },
-  { immediate: true }
-);
-
-const onChange = () => {
-  if (dropdownRef.value)
-    // @ts-ignore
-    dropdownRef.value.hide();
-  $emits("update:modelValue", dateValue.value);
-};
-
-const handleClear = () => {
-  dateValue.value = props.range ? [] : "";
-  onChange();
-  $emits("clear");
-};
-
-provide("datePicker", {
-  currentYear: currentYear,
-  currentMonth: currentMonth,
-  currentDay: currentDay,
-  dateValue: dateValue,
-  type: props.type,
-  showPanel: showPanel,
-  hms: hms,
-  ok: () => ok(),
-  getDateValue: () => getDateValue,
-  range: props.range,
-  rangeValue: rangeValue,
-  rangeSeparator: props.rangeSeparator,
-  simple: props.simple,
-  timestamp: props.timestamp,
-  min: innerMin,
-  max: innerMax,
-  defaultTime: props.defaultTime,
-  yearPage: yearPage,
-  yearStep: yearStep,
+defineOptions({
+  name: "LayDatePicker",
 });
 </script>
+
+<template>
+  <InputBlock v-bind="{ ...props, ...$attrs }" :format="format" :size="size">
+    <template #default="{ onPick }">
+      <RenderComponent v-bind="renderComponentProps" @pick="onPick" />
+    </template>
+  </InputBlock>
+</template>
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
index 3087b1ac..7a802537 100644
--- a/packages/component/component/datePicker/interface.ts
+++ b/packages/component/component/datePicker/interface.ts
@@ -1,57 +1,95 @@
-import type { Ref, StyleValue } from "vue";
-
-export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
-
-export type provideType = {
-  currentYear: Ref;
-  currentMonth: Ref;
-  currentDay: Ref;
-  dateValue: Ref;
-  hms: Ref;
-  type: string;
-  showPanel: Ref;
-  clear: Function;
-  now: Function;
-  ok: Function;
-  range: boolean;
-  rangeValue: {
-    first: string;
-    last: string;
-    hover: string;
-    firstTime: { hh: number; mm: number; ss: number };
-    lastTime: { hh: number; mm: number; ss: number };
+import type { Dayjs, ConfigType } from "dayjs";
+import type { StyleValue, Component, InjectionKey } from "vue";
+import type { CommonSize, CommonClass } from "../../types/common";
+
+export type DatePickerType =
+  | "date"
+  | "datetime"
+  | "year"
+  | "month"
+  | "time"
+  | "yearmonth";
+
+export type TypeMap = {
+  [k in DatePickerType]: {
+    component: Component;
+    format: string;
   };
-  rangeSeparator: string;
-  simple: boolean;
-  timestamp: boolean;
-  max: Ref<string>;
-  min: Ref<string>;
-  defaultTime: string | string[];
-  yearPage: Ref<number>;
-  yearStep: Ref<number>;
 };
 
+export type DatePickerModelValueSingleType = ConfigType;
+
 export interface DatePickerProps {
   name?: string;
-  modelValue?: string | number | string[];
-  type?: "date" | "datetime" | "year" | "month" | "time" | "yearmonth";
+  modelValue?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
+  type?: DatePickerType;
   disabled?: boolean;
   readonly?: boolean;
-  placeholder?: string | string[];
+  placeholder?: string | Array<string>;
   allowClear?: boolean;
   simple?: boolean;
   max?: string;
   min?: string;
   range?: boolean;
   rangeSeparator?: string;
-  size?: "lg" | "md" | "sm" | "xs";
+  size?: CommonSize;
   prefixIcon?: string;
   suffixIcon?: string;
   timestamp?: boolean;
   format?: string;
-  defaultTime?: string | string[];
+  inputFormat?: string;
+  defaultValue?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
+  defaultTime?:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>;
   contentStyle?: StyleValue;
-  contentClass?: string | Array<string | object> | object;
+  contentClass?: CommonClass;
   yearPage?: number;
-  yearStep?: number;
+  // yearStep?: number;
+  shortcuts?: Array<Shortcuts>;
+}
+
+export interface RequiredDatePickerProps extends DatePickerProps {
+  size: CommonSize;
+  type: DatePickerType;
+  disabled: boolean;
+  readonly: boolean;
+  allowClear: boolean;
+  simple: boolean;
+  range: boolean;
+  rangeSeparator: string;
+  prefixIcon: string;
+  suffixIcon: string;
+  timestamp: boolean;
+  yearPage: number;
+}
+
+export type DatePickerEmits = {
+  (e: "update:modelValue", value: string | Array<string>): void;
+  (e: "change", value: string | Array<string>): void;
+  (e: "blur", event: Event): void;
+  (e: "focus", event: Event): void;
+  (e: "clear"): void;
+};
+
+export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
+
+export interface DatePickerContextType extends RequiredDatePickerProps {
+  modelValue: DatePickerValue;
+}
+
+export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
+  Symbol("LayDatePicker");
+
+export interface Shortcuts {
+  text: string | number;
+  value:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>
+    | (() => DatePickerModelValueSingleType)
+    | (() => Array<DatePickerModelValueSingleType>);
 }
diff --git a/packages/component/component/datePickerV2/util.ts b/packages/component/component/datePicker/util.ts
similarity index 93%
rename from packages/component/component/datePickerV2/util.ts
rename to packages/component/component/datePicker/util.ts
index 6fc4720a..8ed6848e 100644
--- a/packages/component/component/datePickerV2/util.ts
+++ b/packages/component/component/datePicker/util.ts
@@ -8,8 +8,7 @@ export const normalizeDayjsValue = (
 ): Dayjs | null => {
   const date = dayjs(value, format);
 
-  // return date.isValid() ? date : dayjs(value).isValid() ? dayjs(value) : null;
-  return date.isValid() ? date : null;
+  return dayjs(value).isValid() ? dayjs(value) : date.isValid() ? date : null;
 };
 
 export const dayjsToString = (
@@ -18,10 +17,10 @@ export const dayjsToString = (
 ) => {
   const date = dayjs(value, format);
 
-  return date.isValid()
-    ? dayjs(value, format).format(format)
-    : dayjs(value).isValid()
+  return dayjs(value).isValid()
     ? dayjs(value).format(format)
+    : date.isValid()
+    ? date.format(format)
     : "";
 };
 
diff --git a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx b/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
deleted file mode 100644
index 09d86d7f..00000000
--- a/packages/component/component/datePickerV2/__tests__/yearPanel.test.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { afterEach, describe, expect, test } from "vitest";
-import { nextTick, ref } from "vue";
-import { sleep } from "../../../test-utils";
-
-import LayDatePicker from "../index.vue";
-import LayDropdown from "../../dropdown/index.vue";
-import Year from "../component/common/Year.vue";
-import Footer from "../component/common/Footer.vue";
-import Shortcuts from "../component/common/Shortcuts.vue";
-import { getYears } from "../util";
-
-const mockInputClick = async (wrapper: any) => {
-  await wrapper.find(".layui-input").trigger("click");
-  await nextTick();
-  await sleep();
-};
-
-describe("YearPanel", () => {
-  afterEach(() => {
-    document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
-  });
-
-  test("year render", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        type: "year",
-        modelValue: "2024/10/01 10:00:00",
-      },
-    });
-
-    const datePickerInstance = wrapper.findComponent(LayDatePicker);
-    const dropdownInstance = datePickerInstance.findComponent(LayDropdown);
-    await nextTick();
-
-    await datePickerInstance.find(".layui-input").trigger("click");
-    await nextTick();
-    await sleep();
-
-    const yearPanelInstance = datePickerInstance.findComponent(Year);
-
-    expect(dropdownInstance.exists()).toBe(true);
-    expect((dropdownInstance.vm as any).open).toBe(true);
-    expect(yearPanelInstance.findAll("li").length).toBe(getYears().length);
-  });
-
-  test("year 外部修改modelValue 内部状态更新", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        type: "year",
-        modelValue: "2024/10/01 10:00:00",
-      },
-    });
-
-    const datePickerInstance = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    await datePickerInstance.find(".layui-input").trigger("click");
-    await nextTick();
-    await sleep();
-
-    const yearPanelInstance = datePickerInstance.findComponent(Year);
-    expect(yearPanelInstance.exists()).toBe(true);
-    expect((yearPanelInstance.vm as any).currentYear).toBe(2024);
-
-    wrapper.setProps({
-      modelValue: "2023/10/01 10:00:00",
-    });
-    await nextTick();
-    await sleep();
-
-    expect((yearPanelInstance.vm as any).currentYear).toBe(2023);
-  });
-
-  test("year yearPage", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        type: "year",
-        yearPage: 20,
-      },
-    });
-
-    await mockInputClick(wrapper);
-
-    const yearLis = wrapper
-      .findComponent(Year)
-      .findAll(".laydate-year-list li");
-
-    expect(yearLis.length).toBe(20);
-  });
-
-  test("year 点击年份 触发update:modelValue and change emit", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        type: "year",
-      },
-    });
-
-    await mockInputClick(wrapper);
-
-    const yearLis = wrapper
-      .findComponent(Year)
-      .findAll(".laydate-year-list li");
-
-    await yearLis[0].trigger("click");
-
-    const datePicker = wrapper.findComponent(LayDatePicker);
-
-    const confirmBtn = wrapper
-      .findComponent(Footer)
-      .find(".laydate-footer-btns .laydate-btns-confirm");
-
-    await confirmBtn.trigger("click");
-
-    expect(datePicker.emitted()).toHaveProperty("update:modelValue");
-    expect(datePicker.emitted()).toHaveProperty("change");
-
-    expect(datePicker.emitted().change[0]).toEqual(["2011"]);
-    expect(datePicker.emitted()["update:modelValue"][0]).toEqual(["2011"]);
-  });
-
-  test("year 手动改变input 触发改变modelValue", async () => {
-    const dateValue = ref();
-    const wrapper = mount({
-      setup() {
-        return () => (
-          <LayDatePicker type="year" v-model={dateValue.value}></LayDatePicker>
-        );
-      },
-    });
-
-    const inputDom = wrapper.find("input");
-
-    inputDom.element.value = "2025";
-    await inputDom.trigger("input");
-    await inputDom.trigger("change");
-
-    await sleep();
-    const datePicker = wrapper.findComponent(LayDatePicker);
-    expect(datePicker.props("modelValue")).toEqual("2025");
-
-    await mockInputClick(wrapper);
-    const YearInstance = wrapper.findComponent(Year);
-    const currentLi = YearInstance.find(".laydate-year-list .layui-this");
-    expect(currentLi.text()).toEqual("2025");
-  });
-
-  test("year simple", async () => {
-    const dateValue = ref();
-    const wrapper = mount({
-      setup() {
-        return () => (
-          <LayDatePicker
-            type="year"
-            v-model={dateValue.value}
-            simple={true}
-          ></LayDatePicker>
-        );
-      },
-    });
-
-    await mockInputClick(wrapper);
-
-    const FooterInstance = wrapper.findComponent(Footer);
-
-    const confirmBtn = FooterInstance.find(
-      ".laydate-footer-btns .laydate-btns-confirm"
-    );
-
-    expect(confirmBtn.exists()).toBeFalsy();
-
-    const YearInstance = wrapper.findComponent(Year);
-    const lis = YearInstance.findAll(".laydate-year-list li");
-    await lis[0].trigger("click");
-
-    const datePicker = wrapper.findComponent(LayDatePicker);
-    expect(datePicker.props("modelValue")).toBe("2011");
-  });
-
-  test("year min/max", async () => {
-    const wrapper = mount({
-      setup() {
-        return () => (
-          <LayDatePicker type="year" min="2023" max="2024"></LayDatePicker>
-        );
-      },
-    });
-
-    await mockInputClick(wrapper);
-
-    const YearInstance = wrapper.findComponent(Year);
-    const currentLi = YearInstance.find(
-      ".laydate-year-list .layui-laydate-current"
-    );
-
-    const preLi =
-      currentLi.element.previousElementSibling?.previousElementSibling;
-    const nextLi = currentLi.element.nextElementSibling;
-
-    expect(preLi?.className).toBe("layui-disabled");
-    expect(nextLi?.className).toBe("layui-disabled");
-  });
-
-  test("year shortcuts", async () => {
-    const dateValue = ref();
-
-    const wrapper = mount({
-      setup() {
-        const shortcuts = [
-          {
-            text: "明年",
-            value: "2025",
-          },
-          {
-            text: "后年",
-            value: "2026",
-          },
-        ];
-
-        return () => (
-          <LayDatePicker
-            type="year"
-            v-model={dateValue.value}
-            shortcuts={shortcuts}
-          ></LayDatePicker>
-        );
-      },
-    });
-
-    await mockInputClick(wrapper);
-
-    const DatePicker = wrapper.findComponent(LayDatePicker);
-    const ShortcutsDom = wrapper.findComponent(Shortcuts);
-    const YearInstance = wrapper.findComponent(Year);
-    const FooterInstance = wrapper.findComponent(Footer);
-    const ShortcutsLi = ShortcutsDom.findAll("li");
-
-    expect(ShortcutsLi.length).toBe(2);
-
-    await ShortcutsLi[1].trigger("click");
-
-    const thisLi = YearInstance.find(".layui-this");
-    expect(thisLi.text()).toBe("2026");
-
-    const confirmBtn = FooterInstance.find(
-      ".laydate-footer-btns .laydate-btns-confirm"
-    );
-
-    await confirmBtn.trigger("click");
-
-    expect(DatePicker.props("modelValue")).toBe("2026");
-  });
-});
diff --git a/packages/component/component/datePickerV2/index.less b/packages/component/component/datePickerV2/index.less
deleted file mode 100644
index e39f5af6..00000000
--- a/packages/component/component/datePickerV2/index.less
+++ /dev/null
@@ -1,697 +0,0 @@
-@import "../dropdown/index.less";
-@import "../input/index.less";
-
-@lg: 44px;
-@md: 38px;
-@sm: 32px;
-@xs: 26px;
-@lg-width: 260px;
-@md-width: 220px;
-@sm-width: 180px;
-@xs-width: 140px;
-@lg-range-width: 520px;
-@md-range-width: 440px;
-@sm-range-width: 360px;
-@xs-range-width: 280px;
-
-.set-size(@size,@width) {
-  & {
-    width: @width;
-    height: @size;
-    .layui-input {
-      height: @size;
-      line-height: @size;
-    }
-  }
-}
-
-.layui-date-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-width);
-  }
-}
-.layui-date-range-picker {
-  &[size="lg"] {
-    .set-size(@lg,@lg-range-width);
-  }
-  &[size="md"] {
-    .set-size(@md,@md-range-width);
-  }
-  &[size="sm"] {
-    .set-size(@sm,@sm-range-width);
-  }
-  &[size="xs"] {
-    .set-size(@xs,@xs-range-width);
-  }
-}
-
-
-html #layuicss-laydate {
-  display: none;
-  position: absolute;
-  width: 1989px;
-}
-
-/* 初始化 */
-.layui-laydate * {
-  margin: 0;
-  padding: 0;
-}
-
-/* 主体结构 */
-.layui-laydate,
-.layui-laydate * {
-  box-sizing: border-box;
-}
-.layui-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;
-  }
-}
-.layui-laydate-main {
-  width: 272px;
-}
-.layui-laydate-header *,
-.layui-laydate-content td,
-.layui-laydate-list li {
-  transition-duration: 0.3s;
-  -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 {
-  display: none !important;
-}
-.laydate-ym-show .laydate-prev-y,
-.laydate-ym-show .laydate-next-y {
-  display: inline-block !important;
-}
-.laydate-ym-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 展开时间列表时 */
-.laydate-time-show .layui-laydate-header .layui-icon,
-.laydate-time-show .laydate-set-ym span[lay-type="year"],
-.laydate-time-show .laydate-set-ym span[lay-type="month"] {
-  display: none !important;
-}
-
-/* 头部结构 */
-.layui-laydate-header {
-  position: relative;
-  height: 46px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  // line-height: 30px;
-  // padding: 10px 70px 5px;
-}
-.layui-laydate-header * {
-  vertical-align: bottom;
-}
-.layui-laydate-header i {
-  // position: absolute;
-  // top: 10px;
-  padding: 0 5px;
-  color: #999;
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-.layui-laydate-header .layui-icon-prev{
-  left: 15px;
-}
-.layui-laydate-header .layui-icon-left {
-  left: 45px;
-}
-.layui-laydate-header .layui-icon-next {
-  right: 15px;
-}
-.layui-laydate-header .layui-icon-right {
-  right: 45px;
-}
-.layui-laydate-year-panel-header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 14px 5px;
-  line-height: 30px;
-  border-bottom: 1px solid #e2e2e2;
-
-  .laydate-set-ym {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    i {
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-}
-.laydate-set-ym {
-  width: 100%;
-  text-align: center;
-  box-sizing: border-box;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.laydate-set-ym span {
-  padding: 0 10px;
-  cursor: pointer;
-}
-.laydate-time-text {
-  cursor: default !important;
-}
-
-/* 主体结构 */
-.layui-laydate-content {
-  position: relative;
-  padding: 10px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-.layui-laydate-content table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-.layui-laydate-content th,
-.layui-laydate-content td {
-  width: 36px;
-  height: 30px;
-  padding: 5px;
-  text-align: center !important;
-}
-.layui-laydate-content th {
-  font-weight: 400;
-}
-.layui-laydate-content td {
-  position: relative;
-  cursor: pointer;
-}
-.laydate-day-mark {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  line-height: 30px;
-  font-size: 12px;
-  overflow: hidden;
-}
-.laydate-day-mark::after {
-  position: absolute;
-  content: "";
-  right: 2px;
-  top: 2px;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-}
-
-/* 底部结构 */
-.layui-laydate-footer {
-  // position: relative;
-  // height: 46px;
-  display: flex;
-  line-height: 26px;
-  padding: 10px;
-}
-
-
-.layui-laydate-footer .layui-btn{
-  padding: 0 10px;
-  white-space: nowrap;
-  transition: all 0.3s;
-}
-
-.layui-laydate-footer .laydate-footer-btns .layui-btn{
-  border-radius: 0;
-}
-
-.layui-laydate-footer .laydate-footer-btns .layui-btn:first-child {
-  border-top-left-radius: var(--global-border-radius);
-  border-bottom-left-radius: var(--global-border-radius);
-}
-
-.layui-laydate-footer .laydate-footer-btns .layui-btn:last-child {
-  border-top-right-radius: var(--global-border-radius);
-  border-bottom-right-radius: var(--global-border-radius);
-  margin-left: -1px;
-}
-
-.layui-laydate-footer .layui-btn + .layui-btn {
-  margin-left: 0;
-}
-.layui-laydate-footer {
-  .laydate-footer-btns {
-    .layui-btn:not(.layui-btn-disabled) {
-      span:hover {
-        color: var(--global-primary-color);
-      }
-    }
-    
-  }
-  
-}
-.layui-laydate-footer span.layui-laydate-preview {
-  cursor: default;
-  border-color: transparent !important;
-}
-.layui-laydate-footer span.layui-laydate-preview:hover {
-  color: #666;
-}
-.layui-laydate-footer span:first-child.layui-laydate-preview {
-  padding-left: 0;
-}
-.laydate-footer-btns {
-  margin-left: auto;
-  // position: absolute;
-  // right: 10px;
-  // top: 10px;
-}
-
-.layui-laydate-footer .type-time {
-  color: var(--global-primary-color);
-}
-
-/* 年月列表 */
-.layui-laydate-list {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-.layui-laydate-list > li {
-  position: relative;
-  display: inline-block;
-  width: 33.3%;
-  height: 36px;
-  line-height: 36px;
-  margin: 3px 0;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-.laydate-month-list > li {
-  width: 25%;
-  margin: 17px 0;
-}
-.laydate-time-list > li {
-  height: 100%;
-  margin: 0;
-  line-height: normal;
-  cursor: default;
-}
-.laydate-time-list p {
-  position: relative;
-  top: -4px;
-  line-height: 29px;
-}
-.laydate-time-list ol {
-  height: 181px;
-  overflow: hidden;
-}
-.laydate-time-list > li:hover ol {
-  overflow-y: auto;
-}
-
-.laydate-time-list ol li {
-  width: 130%;
-  padding-left: 4px;
-  height: 30px;
-  line-height: 30px;
-  text-align: left;
-  cursor: pointer;
-}
-
-/* 提示 */
-.layui-laydate-hint {
-  top: 115px;
-  left: 50%;
-  width: 250px;
-  margin-left: -125px;
-  line-height: 20px;
-  padding: 15px;
-  text-align: center;
-  font-size: 12px;
-  color: #ff5722;
-}
-
-/* 双日历 */
-.layui-laydate-range {
-  min-width: 546px;
-}
-.layui-laydate-range .layui-laydate-main {
-  display: inline-block;
-  vertical-align: middle;
-}
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-header,
-.layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
-  border-left: 1px solid #e2e2e2;
-}
-
-/* 默认简约主题 */
-.layui-laydate,
-.layui-laydate-hint {
-  background-color: #fff;
-  color: #666;
-}
-.layui-laydate-header {
-  border-bottom: 1px solid #e2e2e2;
-}
-.layui-laydate-header i:hover,
-.layui-laydate-header span:hover {
-  color: #5fb878;
-}
-.layui-laydate-content {
-  border-top: none 0;
-  border-bottom: none 0;
-}
-.layui-laydate-content th {
-  color: #333;
-}
-.layui-laydate-content td {
-  color: #666;
-}
-.layui-laydate-content td.laydate-selected {
-  background-color: #b5fff8;
-}
-.laydate-selected:hover {
-  background-color: #00f7de !important;
-}
-.layui-laydate-content td:hover,
-.layui-laydate-list li:hover {
-  background-color: #eee;
-  color: #333;
-}
-.laydate-time-list li ol {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #e2e2e2;
-}
-.laydate-time-list li:first-child ol {
-  border-left-width: 1px;
-}
-.laydate-time-list > li:hover {
-  background: none;
-}
-.layui-laydate-content .laydate-day-prev,
-.layui-laydate-content .laydate-day-next {
-  color: #d2d2d2;
-}
-.laydate-selected.laydate-day-prev,
-.laydate-selected.laydate-day-next {
-  background-color: #f8f8f8 !important;
-}
-.layui-laydate-footer {
-  border-top: 1px solid #e2e2e2;
-}
-.layui-laydate-hint {
-  color: #ff5722;
-}
-.laydate-day-mark::after {
-  background-color: #5fb878;
-}
-.layui-laydate-content td.layui-this .laydate-day-mark::after {
-  display: none;
-}
-.layui-laydate-footer span[lay-type="date"] {
-  color: #5fb878;
-}
-.layui-laydate .layui-this {
-  background-color: var(--global-primary-color) !important;
-  color: #fff !important;
-}
-
-.layui-laydate .laydate-disabled,
-.layui-laydate .laydate-disabled:hover {
-  background: none !important;
-  color: #d2d2d2 !important;
-  cursor: not-allowed !important;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
-
-/* 墨绿/自定义背景色主题 */
-.laydate-theme-molv {
-  border: none;
-}
-.laydate-theme-molv.layui-laydate-range {
-  width: 548px;
-}
-.laydate-theme-molv .layui-laydate-main {
-  width: 274px;
-}
-.laydate-theme-molv .layui-laydate-header {
-  border: none;
-  background-color: #009688;
-}
-.laydate-theme-molv .layui-laydate-header i,
-.laydate-theme-molv .layui-laydate-header span {
-  color: #f6f6f6;
-}
-.laydate-theme-molv .layui-laydate-header i:hover,
-.laydate-theme-molv .layui-laydate-header span:hover {
-  color: #fff;
-}
-.laydate-theme-molv .layui-laydate-content {
-  border: 1px solid #e2e2e2;
-  border-top: none;
-  border-bottom: none;
-}
-.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
-  border-left: none;
-}
-.laydate-theme-molv .layui-laydate-footer {
-  border: 1px solid #e2e2e2;
-}
-
-/* 格子主题 */
-.laydate-theme-grid .layui-laydate-content td,
-.laydate-theme-grid .layui-laydate-content thead,
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  border: 1px solid #e2e2e2;
-}
-.laydate-theme-grid .laydate-selected,
-.laydate-theme-grid .laydate-selected:hover {
-  background-color: #f2f2f2 !important;
-  color: #009688 !important;
-}
-.laydate-theme-grid .laydate-selected.laydate-day-prev,
-.laydate-theme-grid .laydate-selected.laydate-day-next {
-  color: #d2d2d2 !important;
-}
-.laydate-theme-grid .laydate-year-list,
-.laydate-theme-grid .laydate-month-list {
-  margin: 1px 0 0 1px;
-}
-.laydate-theme-grid .laydate-year-list > li,
-.laydate-theme-grid .laydate-month-list > li {
-  margin: 0 -1px -1px 0;
-}
-.laydate-theme-grid .laydate-year-list > li {
-  height: 43px;
-  line-height: 43px;
-}
-.laydate-theme-grid .laydate-month-list > li {
-  height: 71px;
-  line-height: 71px;
-}
-.laydate-range-hover {
-  background-color: var(--global-neutral-color-2) !important;
-}
-.layui-laydate-content .layui-disabled:not(.layui-laydate-current,.layui-this):hover {
-  background-color: transparent !important;
-}
-
-.laydate-range-inputs {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  border-width: 1px;
-  box-sizing: border-box;
-  width: 100%;
-  border-style: solid;
-  overflow: hidden;
-  display: inline-flex;
-  border-color: var(--input-border-color);
-  border-radius: var(--input-border-radius);
-  &:hover {
-    border-color: #d2d2d2;
-  }
-  .range-separator {
-    margin: 0 5px;
-    color: var(--global-neutral-color-8);
-    background-color: transparent;
-  }
-  .layui-input-wrapper {
-    border: none;
-    box-sizing: border-box;
-    input {
-      text-align: center;
-      padding: 0;
-    }
-  }
-  .layui-input {
-    border: none;
-  }
-}
-.layui-laydate-range {
-  &-main {
-    display: flex;
-  }
-  .laydate-set-ym {
-    overflow: visible;
-    white-space: nowrap;
-    line-height: 46px;
-  }
-  .laydate-set-ym .layui-dropdown {
-    width: auto !important;
-  }
-
-  .time-panel {
-    .layui-laydate-main {
-      width: 272px;
-      display: unset !important;
-    }
-    .layui-laydate-preview {
-      display: none;
-    }
-  }
-  .layui-laydate-content {
-    .laydate-year-list {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-  .layui-laydate-list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-.layui-laydate-range-datetime {
-  .layui-laydate-main {
-    width: 340px;
-  }
-}
-.layui-laydate-current {
-  background-color: var(--global-neutral-color-3);
-}
-
-.laydate-time-list > li:hover ol::-webkit-scrollbar {
-  width: 0px;
-}
-.layui-laydate-content::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #eeeeee;
-}
-.layui-laydate-content::-webkit-scrollbar-thumb:hover {
-  background-color: #dddddd;
-}
-
-.layui-date-range-picker{
-  .end-input{
-    .layui-input-clear{
-      opacity: 0;
-      visibility: hidden;
-      display: block;
-      padding: 0 10px;
-    }
-  }
-
-  .laydate-range-inputs{
-    &:hover {
-      .end-input{
-        .layui-input-clear{
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-    }
-  }
-}
-
-.layui-laydate-shortcut{
-  width: 80px;
-  padding: 6px 0;
-  display: inline-block;
-  vertical-align: top;
-  overflow: auto;
-  max-height: 276px;
-  text-align: center;
-}
-
-.layui-laydate-shortcut+.layui-laydate-main {
-  display: inline-block;
-  border-left: 1px solid #e2e2e2;
-}
-
-.layui-laydate-shortcut>li {
-  padding: 5px 8px;
-  cursor: pointer;
-  line-height: 18px;
-
-  &:hover {
-    background-color: #eee;
-    color: #333;
-    transition: all .3s;
-  }
-}
diff --git a/packages/component/component/datePickerV2/index.ts b/packages/component/component/datePickerV2/index.ts
deleted file mode 100644
index f747fde1..00000000
--- a/packages/component/component/datePickerV2/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { withInstall } from "../../utils";
-import Component from "./index.vue";
-
-const component = withInstall(Component);
-export default component;
diff --git a/packages/component/component/datePickerV2/index.vue b/packages/component/component/datePickerV2/index.vue
deleted file mode 100644
index fca293c7..00000000
--- a/packages/component/component/datePickerV2/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import "./index.less";
-import dayjs from "dayjs";
-import { computed, provide } from "vue";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import IsSameOrBefore from "dayjs/plugin/IsSameOrBefore";
-import IsSameOrAfter from "dayjs/plugin/IsSameOrAfter";
-import objectSupport from "dayjs/plugin/objectSupport";
-import {
-  DATE_PICKER_CONTEXT,
-  type DatePickerProps as _DatePickerProps,
-  type DatePickerType,
-} from "./interface";
-
-import { useDatePicker } from "./hook/useDatePicker";
-
-import InputBlock from "./component/common/InputBlock.vue";
-
-dayjs.extend(customParseFormat);
-dayjs.extend(IsSameOrBefore);
-dayjs.extend(IsSameOrAfter);
-dayjs.extend(objectSupport);
-
-export type DatePickerProps = _DatePickerProps;
-
-const props = withDefaults(defineProps<DatePickerProps>(), {
-  modelValue: null,
-  size: "md",
-  type: "date",
-  disabled: false,
-  readonly: false,
-  allowClear: false,
-  simple: false,
-  range: false,
-  rangeSeparator: "至",
-  prefixIcon: "layui-icon-date",
-  suffixIcon: "",
-  timestamp: false,
-  defaultValue: null,
-  defaultTime: null,
-  yearPage: 15,
-  // yearStep: 1,
-});
-
-const { RenderComponent, renderComponentProps } = useDatePicker(props);
-
-const format = computed<string>(() => {
-  return props.inputFormat ?? renderComponentProps.value.inputFormat!;
-});
-
-provide(DATE_PICKER_CONTEXT, renderComponentProps.value);
-
-defineOptions({
-  name: "LayDatePickerV2",
-});
-</script>
-
-<template>
-  <InputBlock v-bind="{ ...props, ...$attrs }" :format="format">
-    <template #default="{ onPick }">
-      <RenderComponent v-bind="renderComponentProps" @pick="onPick" />
-    </template>
-  </InputBlock>
-</template>
diff --git a/packages/component/component/datePickerV2/interface.ts b/packages/component/component/datePickerV2/interface.ts
deleted file mode 100644
index 7a802537..00000000
--- a/packages/component/component/datePickerV2/interface.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { Dayjs, ConfigType } from "dayjs";
-import type { StyleValue, Component, InjectionKey } from "vue";
-import type { CommonSize, CommonClass } from "../../types/common";
-
-export type DatePickerType =
-  | "date"
-  | "datetime"
-  | "year"
-  | "month"
-  | "time"
-  | "yearmonth";
-
-export type TypeMap = {
-  [k in DatePickerType]: {
-    component: Component;
-    format: string;
-  };
-};
-
-export type DatePickerModelValueSingleType = ConfigType;
-
-export interface DatePickerProps {
-  name?: string;
-  modelValue?:
-    | DatePickerModelValueSingleType
-    | Array<DatePickerModelValueSingleType>;
-  type?: DatePickerType;
-  disabled?: boolean;
-  readonly?: boolean;
-  placeholder?: string | Array<string>;
-  allowClear?: boolean;
-  simple?: boolean;
-  max?: string;
-  min?: string;
-  range?: boolean;
-  rangeSeparator?: string;
-  size?: CommonSize;
-  prefixIcon?: string;
-  suffixIcon?: string;
-  timestamp?: boolean;
-  format?: string;
-  inputFormat?: string;
-  defaultValue?:
-    | DatePickerModelValueSingleType
-    | Array<DatePickerModelValueSingleType>;
-  defaultTime?:
-    | DatePickerModelValueSingleType
-    | Array<DatePickerModelValueSingleType>;
-  contentStyle?: StyleValue;
-  contentClass?: CommonClass;
-  yearPage?: number;
-  // yearStep?: number;
-  shortcuts?: Array<Shortcuts>;
-}
-
-export interface RequiredDatePickerProps extends DatePickerProps {
-  size: CommonSize;
-  type: DatePickerType;
-  disabled: boolean;
-  readonly: boolean;
-  allowClear: boolean;
-  simple: boolean;
-  range: boolean;
-  rangeSeparator: string;
-  prefixIcon: string;
-  suffixIcon: string;
-  timestamp: boolean;
-  yearPage: number;
-}
-
-export type DatePickerEmits = {
-  (e: "update:modelValue", value: string | Array<string>): void;
-  (e: "change", value: string | Array<string>): void;
-  (e: "blur", event: Event): void;
-  (e: "focus", event: Event): void;
-  (e: "clear"): void;
-};
-
-export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
-
-export interface DatePickerContextType extends RequiredDatePickerProps {
-  modelValue: DatePickerValue;
-}
-
-export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
-  Symbol("LayDatePicker");
-
-export interface Shortcuts {
-  text: string | number;
-  value:
-    | DatePickerModelValueSingleType
-    | Array<DatePickerModelValueSingleType>
-    | (() => DatePickerModelValueSingleType)
-    | (() => Array<DatePickerModelValueSingleType>);
-}
diff --git a/packages/component/index.ts b/packages/component/index.ts
index 77562e51..100b7e8e 100644
--- a/packages/component/index.ts
+++ b/packages/component/index.ts
@@ -84,7 +84,6 @@ import LayException from "./component/exception/index";
 import LayResult from "./component/result/index";
 import LayFullscreen from "./component/fullscreen/index";
 import LayDatePicker from "./component/datePicker/index";
-import LayDatePickerV2 from "./component/datePickerV2/index";
 import LayTransition from "./component/transition/index";
 import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
@@ -188,7 +187,6 @@ const components: Record<string, Plugin> = {
   LayFullscreen,
   LayConfigProvider,
   LayDatePicker,
-  LayDatePickerV2,
   LayTransition,
   LayUpload,
   LayRipple,
-- 
Gitee


From 1b98465232e37c0e5283866930a01a1aa7548c08 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Sat, 12 Oct 2024 15:40:20 +0800
Subject: [PATCH 32/45] test: add date type

---
 .../datePicker/__tests__/datePicker.test.tsx  | 169 ++++++++++++------
 .../datePicker/__tests__/yearPanel.test.tsx   |   2 +-
 2 files changed, 112 insertions(+), 59 deletions(-)

diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
index aa25a09a..8de1f18d 100644
--- a/packages/component/component/datePicker/__tests__/datePicker.test.tsx
+++ b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -1,103 +1,156 @@
 import { mount } from "@vue/test-utils";
 import { afterEach, describe, expect, test } from "vitest";
+import { sleep } from "../../../test-utils";
 
 import LayDatePicker from "../index.vue";
+import Date from "../component/common/Date.vue";
+import Year from "../component/common/Year.vue";
+import Footer from "../component/common/Footer.vue";
+// import Month from "../component/common/Month.vue";
 import { nextTick } from "vue";
 
-describe("LayDatePicker", () => {
+const mockInputClick = async (wrapper: any) => {
+  await wrapper.find(".layui-input").trigger("click");
+  await nextTick();
+  await sleep();
+};
+
+describe("LayDatePicker date type", () => {
   afterEach(() => {
-    const popperDom = document.body.querySelector(".layui-popper");
-    if (popperDom) {
-      popperDom.remove();
-    }
+    document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
   });
 
   test("modelValue", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
-        modelValue: "2024/10/01 10:00:00",
+        modelValue: "2025/11/12 10:00:00",
       },
     });
 
+    await mockInputClick(wrapper);
+
     const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.props() as any).modelValue).toBe("2024/10/01 10:00:00");
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/01 00:00:00").getTime()
+    const DateInstance = wrapper.findComponent(Date);
+
+    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");
   });
 
-  test("modelValue 修改", async () => {
+  test("外部修改 modelValue 内部选中改变", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
-        modelValue: "2024/10/01 10:00:00",
+        modelValue: "2025/11/12",
       },
     });
 
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    wrapper.setProps({
-      modelValue: "2024/10/02 10:00:00",
-    });
-    await nextTick();
-    expect((component.props() as any).modelValue).toBe("2024/10/02 10:00:00");
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/02 00:00:00").getTime()
-    );
-  });
+    await mockInputClick(wrapper);
 
-  test("modelValue 负数时间", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "1970/01/01 00:00:00",
-      },
+    await wrapper.setProps({
+      modelValue: "2024/10/02",
     });
 
-    const component = wrapper.findComponent(LayDatePicker);
     await nextTick();
-    expect((component.props() as any).modelValue).toBe("1970/01/01 00:00:00");
-    expect((component.vm as any).currentYear).toBe(1970);
-    expect((component.vm as any).currentMonth).toBe(1 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("1970/01/01 00:00:00").getTime()
+
+    const component = wrapper.findComponent(LayDatePicker);
+
+    expect((component.props() as any).modelValue).toBe("2024/10/02");
+
+    const DateInstance = wrapper.findComponent(Date);
+    const [YearSpan, MonthSpan] = DateInstance.findAll(
+      ".layui-laydate-header .laydate-set-ym span"
     );
+    const dateCurrent = DateInstance.find(".layui-laydate-content .layui-this");
+
+    expect(YearSpan.text()).toContain("2024");
+    expect(MonthSpan.text()).toContain("10");
+    expect(dateCurrent.text()).toBe("2");
+
+    await YearSpan.trigger("click");
+    await sleep();
+
+    const YearInstance = wrapper.findComponent(Year);
+
+    expect((YearInstance.vm as any).currentYear).toBe(2024);
   });
 
-  test("timestamp 负数时间", async () => {
+  test("update:modelValue", async () => {
     const wrapper = mount(LayDatePicker, {
       props: {
-        timestamp: true,
-        modelValue: -1,
+        modelValue: "2025/11/12",
       },
     });
+    const datePicker = wrapper.findComponent(LayDatePicker);
 
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.vm as any).currentYear).toBe(1970);
-    expect((component.vm as any).currentMonth).toBe(1 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("1970/01/01 00:00:00").getTime()
+    await mockInputClick(wrapper);
+    const DateInstance = wrapper.findComponent(Date);
+
+    const dateCurrent = DateInstance.findAll(
+      ".layui-laydate-content td:not(.laydate-day-prev)"
     );
+
+    // click 2号
+    await dateCurrent[1].trigger("click");
+
+    const confirmBtn = wrapper
+      .findComponent(Footer)
+      .find(".laydate-footer-btns .laydate-btns-confirm");
+
+    await confirmBtn.trigger("click");
+
+    expect(datePicker.emitted()).toHaveProperty("update:modelValue");
+    expect(datePicker.emitted()["update:modelValue"][0]).toEqual([
+      "2025-11-02",
+    ]);
   });
 
-  test("format", async () => {
-    const wrapper = mount(LayDatePicker, {
-      props: {
-        modelValue: "2024/10/01 10:00:00",
-        format: "MM-dd",
+  test("min/max", async () => {
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker min="2024/10/2" max="2024/10/13"></LayDatePicker>
+        );
       },
     });
 
-    const component = wrapper.findComponent(LayDatePicker);
-    await nextTick();
-    expect((component.vm as any).currentYear).toBe(2024);
-    expect((component.vm as any).currentMonth).toBe(10 - 1);
-    expect((component.vm as any).currentDay).toBe(
-      new Date("2024/10/01 00:00:00").getTime()
+    await mockInputClick(wrapper);
+    const DateInstance = wrapper.findComponent(Date);
+
+    const dateCurrent = DateInstance.findAll(
+      ".layui-laydate-content td:not(.laydate-day-prev)"
     );
+
+    expect(
+      dateCurrent[0].element.classList.contains("layui-disabled")
+    ).toBeTruthy();
+    expect(
+      dateCurrent[13].element.classList.contains("layui-disabled")
+    ).toBeTruthy();
+
+    expect(
+      dateCurrent[12].element.classList.contains("layui-disabled")
+    ).toBeFalsy();
   });
 });
diff --git a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
index 09d86d7f..d16b7224 100644
--- a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
@@ -16,7 +16,7 @@ const mockInputClick = async (wrapper: any) => {
   await sleep();
 };
 
-describe("YearPanel", () => {
+describe("LayDatePicker year type", () => {
   afterEach(() => {
     document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
   });
-- 
Gitee


From 2eb98f3257fa54c2420c7547b63de4bfd63de7de Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Mon, 14 Oct 2024 15:26:44 +0800
Subject: [PATCH 33/45] fix: placeholder

---
 .../component/datePicker/component/common/InputBlock.vue      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
index 633abb1d..2301dc83 100644
--- a/packages/component/component/datePicker/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -30,7 +30,9 @@ const classes = computed(() => {
   return ["layui-date-picker", { "layui-date-range-picker": props.range }];
 });
 const _Placeholder = computed(() => {
-  return isArray(props.placeholder) ? props.placeholder : [props.placeholder];
+  return isArray(props.placeholder)
+    ? props.placeholder
+    : [props.placeholder, props.placeholder];
 });
 
 const inputValue = computed(() => {
-- 
Gitee


From 3c42cf79ebe9f4dc27e6125bb0fcdf48770a49d3 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Tue, 15 Oct 2024 13:01:41 +0800
Subject: [PATCH 34/45] test(component/LayDatePicker): add yearmonth test

---
 .../datePicker/__tests__/yearmonth.test.tsx   | 153 ++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 packages/component/component/datePicker/__tests__/yearmonth.test.tsx

diff --git a/packages/component/component/datePicker/__tests__/yearmonth.test.tsx b/packages/component/component/datePicker/__tests__/yearmonth.test.tsx
new file mode 100644
index 00000000..f2bf2b2e
--- /dev/null
+++ b/packages/component/component/datePicker/__tests__/yearmonth.test.tsx
@@ -0,0 +1,153 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import LayDatePicker from "../index.vue";
+import { nextTick } from "vue";
+import { sleep } from "../../../test-utils";
+import { getYears } from "../util";
+
+const getInputElementValue = (el: VueWrapper) => el.get("input").element.value;
+const getInstanceModelValue = (el: VueWrapper) =>
+  (el.vm.$props as any).modelValue!;
+const clickInput = async (el: VueWrapper) => {
+  await el.get(".layui-input").trigger("click");
+  await nextTick();
+  await sleep();
+};
+const getPopperElement = () => document.body.querySelector(".layui-popper");
+const openYearPanel = async () => {
+  const popperElement = getPopperElement();
+  if (popperElement) {
+    try {
+      popperElement
+        .querySelector(".laydate-set-ym span")!
+        .dispatchEvent(new MouseEvent("click"));
+    } catch (e) {
+      // do nothing
+    }
+    await nextTick();
+    await sleep();
+  }
+};
+const closeYearPanel = async () => {
+  const popperElement = getPopperElement();
+  if (popperElement) {
+    try {
+      popperElement
+        .querySelector(".laydate-year-list li.layui-this")!
+        .dispatchEvent(new MouseEvent("click"));
+    } catch (e) {
+      // do nothing
+    }
+    await nextTick();
+    await sleep();
+  }
+};
+const selectYear = async (year: number) => {
+  const popperElement = getPopperElement();
+  if (popperElement) {
+    await openYearPanel();
+    Array.from(popperElement.querySelectorAll(`.laydate-year-list li`)!)
+      .find((el) => el.textContent === year.toString())!
+      .dispatchEvent(new MouseEvent("click"));
+    await nextTick();
+    await sleep();
+    await closeYearPanel();
+  }
+};
+const yearRange = async () => {
+  await openYearPanel();
+  const popperElement = getPopperElement();
+  let r: Array<Number> = [];
+  if (popperElement) {
+    r = Array.from(
+      popperElement.querySelectorAll(`.laydate-year-list li`)!
+    ).map((el) => Number(el.textContent));
+  }
+  await closeYearPanel();
+  return r;
+};
+const selectMonth = async (month: number) => {
+  const popperElement = getPopperElement();
+  if (popperElement) {
+    await closeYearPanel();
+    Array.from(popperElement.querySelectorAll(`.laydate-month-list li`)!)
+      .find((el) => `${el.textContent}` === `${month.toString()}月`)!
+      .dispatchEvent(new MouseEvent("click"));
+    await nextTick();
+    await sleep();
+  }
+};
+const clickOk = async () => {
+  const popperElement = getPopperElement();
+  if (popperElement) {
+    try {
+      popperElement
+        .querySelector(".laydate-btns-confirm")!
+        .dispatchEvent(new MouseEvent("click"));
+    } catch (e) {
+      // do nothing
+    }
+    await nextTick();
+    await sleep();
+  }
+};
+
+describe("LayDatePicker yearmonth type", () => {
+  afterEach(() => {
+    document.querySelectorAll(".layui-popper").forEach((el) => el.remove());
+  });
+
+  it("render", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "yearmonth",
+        modelValue: "",
+      },
+    });
+
+    await nextTick();
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    expect(datePickerInstance.exists()).toBeTruthy();
+    expect(getInputElementValue(datePickerInstance)).toBe("");
+    expect(getInstanceModelValue(datePickerInstance)).toBe("");
+
+    wrapper.setProps({
+      modelValue: "2024-10",
+    });
+
+    await nextTick();
+    expect(getInstanceModelValue(datePickerInstance)).toBe("2024-10");
+    expect(getInputElementValue(datePickerInstance)).toBe("2024-10");
+
+    await clickInput(wrapper);
+    expect(getPopperElement()).toBeTruthy();
+  });
+
+  it("on simple mode", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "yearmonth",
+        modelValue: "2024-10",
+        simple: true,
+      },
+    });
+
+    await nextTick();
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    expect(datePickerInstance.exists()).toBeTruthy();
+    expect(getInputElementValue(datePickerInstance)).toBe("2024-10");
+
+    await clickInput(wrapper);
+    const popperElement = getPopperElement();
+    expect(popperElement).toBeTruthy();
+    const years = await yearRange();
+    expect(years).toEqual(getYears(2024));
+    await selectYear(2022);
+    await selectMonth(4);
+    expect(datePickerInstance.emitted("update:modelValue")![0][0]).toBe(
+      "2022-04"
+    );
+  });
+});
-- 
Gitee


From f9bbb7b22deac8603d4b2141ecb52c8bfa935541 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Tue, 15 Oct 2024 15:38:45 +0800
Subject: [PATCH 35/45] test(component/LayDatePicker): add more test

---
 .../datePicker/__tests__/datePicker.test.tsx  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
index 8de1f18d..dc9c4d0a 100644
--- a/packages/component/component/datePicker/__tests__/datePicker.test.tsx
+++ b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -8,6 +8,7 @@ import Year from "../component/common/Year.vue";
 import Footer from "../component/common/Footer.vue";
 // import Month from "../component/common/Month.vue";
 import { nextTick } from "vue";
+import { dayjsToString } from "../util";
 
 const mockInputClick = async (wrapper: any) => {
   await wrapper.find(".layui-input").trigger("click");
@@ -153,4 +154,42 @@ describe("LayDatePicker date type", () => {
       dateCurrent[12].element.classList.contains("layui-disabled")
     ).toBeFalsy();
   });
+
+  test("shortcuts", async () => {
+    const time = new window.Date();
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayDatePicker
+            type="date"
+            simple={true}
+            shortcuts={[
+              {
+                text: "今天",
+                value: time,
+              },
+              {
+                text: "昨天",
+                value: () => time.getTime() - 86400000,
+              },
+            ]}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    const datePickerInstance = wrapper.findComponent(LayDatePicker);
+    await mockInputClick(wrapper);
+    const shortcuts = document.body.querySelectorAll(
+      ".layui-laydate-shortcut li"
+    );
+
+    await shortcuts[1].dispatchEvent(new MouseEvent("click"));
+    await nextTick();
+    await sleep();
+
+    expect(document.body.querySelector(".layui-this")?.textContent).toBe(
+      dayjsToString(time.getTime() - 86400000, "D")
+    );
+  });
 });
-- 
Gitee


From 8ce24533657cddb41a6074e09f397a8ebf69a7a0 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Tue, 15 Oct 2024 15:43:12 +0800
Subject: [PATCH 36/45] =?UTF-8?q?chore:=20=E6=94=AF=E6=8C=81=E4=BC=A0?=
 =?UTF-8?q?=E5=85=A5=20footer=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=BA=95?=
 =?UTF-8?q?=E6=A0=8F=E5=B7=A6=E4=BE=A7=E9=83=A8=E5=88=86=E3=80=81=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20static=20=E5=B1=9E=E6=80=A7=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=9D=A2=E6=9D=BF=E3=80=81simple=20=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E8=A7=A6=E5=8F=91=20update:modelValue?=
 =?UTF-8?q?=E3=80=81Month=20=E9=9D=A2=E6=9D=BF=E5=A4=B4=E9=83=A8=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E6=AD=A3=E7=A1=AE=E6=98=BE=E7=A4=BA=201=20=E6=9C=88?=
 =?UTF-8?q?=E4=BB=BD=E3=80=81=E4=BB=8E=E6=A8=A1=E6=9D=BF=E4=B8=AD=E7=A7=BB?=
 =?UTF-8?q?=E8=B5=B0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../datePicker/component/DatePicker.vue       | 31 ++++++++------
 .../datePicker/component/DateRange.vue        | 13 +++++-
 .../datePicker/component/MonthRange.vue       | 17 ++++++--
 .../datePicker/component/TimeRange.vue        | 22 ++++++++--
 .../datePicker/component/YearRange.vue        | 17 ++++++--
 .../component/common/InputBlock.vue           | 14 ++++++-
 .../datePicker/component/common/Month.vue     |  4 +-
 .../component/component/datePicker/index.less | 40 ++++++++++---------
 .../component/component/datePicker/index.vue  |  7 +++-
 .../component/datePicker/interface.ts         | 19 ++++++++-
 10 files changed, 134 insertions(+), 50 deletions(-)

diff --git a/packages/component/component/datePicker/component/DatePicker.vue b/packages/component/component/datePicker/component/DatePicker.vue
index 6479d4ed..5785163e 100644
--- a/packages/component/component/datePicker/component/DatePicker.vue
+++ b/packages/component/component/datePicker/component/DatePicker.vue
@@ -136,6 +136,7 @@ const handleNow = () => {
   } else {
     showDate.value = currentData.value = dayjs();
   }
+  if (props.simple) handleConfirm();
 };
 
 const handleChangeShortcut = (shortcuts: ShortcutsType) => {
@@ -143,9 +144,9 @@ const handleChangeShortcut = (shortcuts: ShortcutsType) => {
     isFunction(shortcuts.value) ? shortcuts.value() : shortcuts.value
   ) as DatePickerModelValueSingleType;
 
-  currentData.value = dayjs(date, props.format);
+  currentData.value = dayjs(date);
 
-  handleConfirm();
+  if (props.simple) handleConfirm();
 };
 
 const footerValue = () => {
@@ -155,12 +156,13 @@ const footerValue = () => {
 };
 </script>
 
+<!-- 当datetime模式下 切换为time时，只通过css隐藏date模块，不销毁date模块。 -->
+<!-- 防止date内部inputDate watch 因重新渲染而再次执行。 -->
+<!-- 再次执行会导致在非simple模式下切换日期重新赋值datepicker.modelValue -->
+
 <template>
   <div class="layui-laydate">
     <Shortcuts @change-shortcut="handleChangeShortcut"></Shortcuts>
-    <!-- 当datetime模式下 切换为time时，只通过css隐藏date模块，不销毁date模块。 -->
-    <!-- 防止date内部inputDate watch 因重新渲染而再次执行。 -->
-    <!-- 再次执行会导致在非simple模式下切换日期重新赋值datepicker.modelValue -->
     <Date
       v-if="currentType === 'date' || currentType === 'time'"
       v-show="currentType === 'date'"
@@ -200,14 +202,17 @@ const footerValue = () => {
       @confirm="handleConfirm(true)"
       @now="handleNow"
     >
-      <LayButton
-        v-if="dateType === 'datetime'"
-        size="xs"
-        :class="{ 'type-time': currentType === 'time' }"
-        @click="handleToggleTimePanel"
-        >{{ currentType === "date" ? "选择时间" : "选择日期" }}</LayButton
-      >
-      <template v-else>{{ footerValue() }}</template>
+      <slot name="footer">
+        <LayButton
+          v-if="dateType === 'datetime'"
+          size="xs"
+          :class="{ 'type-time': currentType === 'time' }"
+          @click="handleToggleTimePanel"
+        >
+          {{ currentType === "date" ? "选择时间" : "选择日期" }}
+        </LayButton>
+        <template v-else>{{ footerValue() }}</template>
+      </slot>
     </Footer>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/DateRange.vue b/packages/component/component/datePicker/component/DateRange.vue
index ca474c97..08324770 100644
--- a/packages/component/component/datePicker/component/DateRange.vue
+++ b/packages/component/component/datePicker/component/DateRange.vue
@@ -178,6 +178,10 @@ const handleDatePick = (value: number) => {
   } else {
     endDate.value = _endDate;
   }
+
+  if (props.simple && startDate.value && endDate.value) {
+    handleConfirm();
+  }
 };
 
 const handleDateHover = (val: number) => {
@@ -389,10 +393,17 @@ const handleConfirm = () => {
         </DateContent>
       </div>
     </div>
-    <Footer :showNow="false" @confirm="handleConfirm">
+    <Footer
+      :showNow="false"
+      :showConfirm="!props.simple"
+      @confirm="handleConfirm"
+    >
       {{ startDate?.format(props.inputFormat) }}
       {{ props.rangeSeparator }}
       {{ endDate?.format(props.inputFormat) }}
+      <template #footer>
+        <slot name="footer"> </slot>
+      </template>
     </Footer>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/MonthRange.vue b/packages/component/component/datePicker/component/MonthRange.vue
index 2637246c..cda5fa77 100644
--- a/packages/component/component/datePicker/component/MonthRange.vue
+++ b/packages/component/component/datePicker/component/MonthRange.vue
@@ -97,6 +97,9 @@ const handleMonthPick = (date: Dayjs) => {
   } else {
     endDate.value = date;
   }
+  if (props.simple && startDate.value && endDate.value) {
+    handleConfirm();
+  }
 };
 
 const handleMonthHover = (date: Dayjs) => {
@@ -206,10 +209,16 @@ const handleConfirm = () => {
         </template>
       </Month>
     </div>
-    <Footer :showNow="false" @confirm="handleConfirm">
-      {{ startDate?.format(props.inputFormat) }}
-      {{ props.rangeSeparator }}
-      {{ endDate?.format(props.inputFormat) }}
+    <Footer
+      :showNow="false"
+      :showConfirm="!props.simple"
+      @confirm="handleConfirm"
+    >
+      <slot name="footer">
+        {{ startDate?.format(props.inputFormat) }}
+        {{ props.rangeSeparator }}
+        {{ endDate?.format(props.inputFormat) }}
+      </slot>
     </Footer>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/TimeRange.vue b/packages/component/component/datePicker/component/TimeRange.vue
index 132f481e..fd7c1bfc 100644
--- a/packages/component/component/datePicker/component/TimeRange.vue
+++ b/packages/component/component/datePicker/component/TimeRange.vue
@@ -41,6 +41,12 @@ watch(
   { immediate: true }
 );
 
+const handleTimePick = () => {
+  if (props.simple && startDate.value && endDate.value) {
+    handleConfirm();
+  }
+};
+
 const handleLeftTimePick = (date: Dayjs) => {
   if (date.isSameOrAfter(endDate.value)) {
     startDate.value = endDate.value;
@@ -48,6 +54,7 @@ const handleLeftTimePick = (date: Dayjs) => {
   } else {
     startDate.value = date;
   }
+  handleTimePick();
 };
 
 const handleRightTimePick = (date: Dayjs) => {
@@ -57,6 +64,7 @@ const handleRightTimePick = (date: Dayjs) => {
   } else {
     endDate.value = date;
   }
+  handleTimePick();
 };
 
 const handleChangeShortcut = (shortcuts: ShortcutsType) => {
@@ -95,10 +103,16 @@ const handleConfirm = () => {
         </template>
       </Time>
     </div>
-    <Footer :showNow="false" @confirm="handleConfirm">
-      {{ startDate?.format(props.inputFormat) }}
-      {{ props.rangeSeparator }}
-      {{ endDate?.format(props.inputFormat) }}
+    <Footer
+      :showNow="false"
+      :showConfirm="!props.simple"
+      @confirm="handleConfirm"
+    >
+      <slot name="footer">
+        {{ startDate?.format(props.inputFormat) }}
+        {{ props.rangeSeparator }}
+        {{ endDate?.format(props.inputFormat) }}
+      </slot>
     </Footer>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/YearRange.vue b/packages/component/component/datePicker/component/YearRange.vue
index 953fe880..f30be9cf 100644
--- a/packages/component/component/datePicker/component/YearRange.vue
+++ b/packages/component/component/datePicker/component/YearRange.vue
@@ -81,6 +81,9 @@ const handleYearPick = (date: Dayjs) => {
   } else {
     endDate.value = date;
   }
+  if (props.simple && startDate.value && endDate.value) {
+    handleConfirm();
+  }
 };
 
 const handleYearHover = (date: Dayjs) => {
@@ -153,10 +156,16 @@ const handleConfirm = () => {
         </template>
       </Year>
     </div>
-    <Footer :showNow="false" @confirm="handleConfirm">
-      {{ startDate?.format(props.inputFormat) }}
-      {{ props.rangeSeparator }}
-      {{ endDate?.format(props.inputFormat) }}
+    <Footer
+      :showNow="false"
+      :showConfirm="!props.simple"
+      @confirm="handleConfirm"
+    >
+      <slot name="footer">
+        {{ startDate?.format(props.inputFormat) }}
+        {{ props.rangeSeparator }}
+        {{ endDate?.format(props.inputFormat) }}
+      </slot>
     </Footer>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
index 2301dc83..f4ac53d5 100644
--- a/packages/component/component/datePicker/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -11,7 +11,7 @@ import LayDropdown from "../../../dropdown/index.vue";
 import LayInput from "../../../input/index.vue";
 
 import { dayjsToString, checkRangeValue } from "../../util";
-import { isArray, isNumber, isUndefined } from "../../../../utils";
+import { isArray, isNumber } from "../../../../utils";
 
 const props = withDefaults(defineProps<DatePickerProps>(), {});
 const emits = defineEmits([
@@ -27,7 +27,13 @@ const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 const dropdownRef = ref<InstanceType<typeof LayDropdown>>();
 
 const classes = computed(() => {
-  return ["layui-date-picker", { "layui-date-range-picker": props.range }];
+  return [
+    "layui-date-picker",
+    {
+      "layui-date-range-picker": props.range,
+      "layui-date-picker-static": props.static,
+    },
+  ];
 });
 const _Placeholder = computed(() => {
   return isArray(props.placeholder)
@@ -215,6 +221,7 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
 <template>
   <div :class="classes" :size="size">
     <lay-dropdown
+      v-if="!props.static"
       ref="dropdownRef"
       :disabled="disabled"
       :autoFitMinWidth="false"
@@ -277,5 +284,8 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
         <slot :onPick="onPick"></slot>
       </template>
     </lay-dropdown>
+    <template v-else>
+      <slot :onPick="onPick"></slot>
+    </template>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/common/Month.vue b/packages/component/component/datePicker/component/common/Month.vue
index 5526b69b..c23d8967 100644
--- a/packages/component/component/datePicker/component/common/Month.vue
+++ b/packages/component/component/datePicker/component/common/Month.vue
@@ -4,8 +4,8 @@
       <slot name="header">
         <div class="laydate-set-ym" v-if="dateType === 'month'">
           <span class="laydate-time-text">{{
-            currentMonth
-              ? MONTH_NAME[currentMonth]
+            (Number(currentMonth) ?? -1) > -1
+              ? MONTH_NAME[Number(currentMonth)]
               : t("datePicker.selectMonth")
           }}</span>
         </div>
diff --git a/packages/component/component/datePicker/index.less b/packages/component/component/datePicker/index.less
index e39f5af6..9560d9e7 100644
--- a/packages/component/component/datePicker/index.less
+++ b/packages/component/component/datePicker/index.less
@@ -54,7 +54,6 @@
   }
 }
 
-
 html #layuicss-laydate {
   display: none;
   position: absolute;
@@ -162,7 +161,7 @@ html #layuicss-laydate {
   cursor: pointer;
   user-select: none;
 }
-.layui-laydate-header .layui-icon-prev{
+.layui-laydate-header .layui-icon-prev {
   left: 15px;
 }
 .layui-laydate-header .layui-icon-left {
@@ -265,14 +264,13 @@ html #layuicss-laydate {
   padding: 10px;
 }
 
-
-.layui-laydate-footer .layui-btn{
+.layui-laydate-footer .layui-btn {
   padding: 0 10px;
   white-space: nowrap;
   transition: all 0.3s;
 }
 
-.layui-laydate-footer .laydate-footer-btns .layui-btn{
+.layui-laydate-footer .laydate-footer-btns .layui-btn {
   border-radius: 0;
 }
 
@@ -297,9 +295,7 @@ html #layuicss-laydate {
         color: var(--global-primary-color);
       }
     }
-    
   }
-  
 }
 .layui-laydate-footer span.layui-laydate-preview {
   cursor: default;
@@ -554,7 +550,8 @@ html #layuicss-laydate {
 .laydate-range-hover {
   background-color: var(--global-neutral-color-2) !important;
 }
-.layui-laydate-content .layui-disabled:not(.layui-laydate-current,.layui-this):hover {
+.layui-laydate-content
+  .layui-disabled:not(.layui-laydate-current, .layui-this):hover {
   background-color: transparent !important;
 }
 
@@ -647,9 +644,9 @@ html #layuicss-laydate {
   background-color: #dddddd;
 }
 
-.layui-date-range-picker{
-  .end-input{
-    .layui-input-clear{
+.layui-date-range-picker {
+  .end-input {
+    .layui-input-clear {
       opacity: 0;
       visibility: hidden;
       display: block;
@@ -657,10 +654,10 @@ html #layuicss-laydate {
     }
   }
 
-  .laydate-range-inputs{
+  .laydate-range-inputs {
     &:hover {
-      .end-input{
-        .layui-input-clear{
+      .end-input {
+        .layui-input-clear {
           opacity: 1;
           visibility: visible;
         }
@@ -669,7 +666,7 @@ html #layuicss-laydate {
   }
 }
 
-.layui-laydate-shortcut{
+.layui-laydate-shortcut {
   width: 80px;
   padding: 6px 0;
   display: inline-block;
@@ -679,19 +676,26 @@ html #layuicss-laydate {
   text-align: center;
 }
 
-.layui-laydate-shortcut+.layui-laydate-main {
+.layui-laydate-shortcut + .layui-laydate-main {
   display: inline-block;
   border-left: 1px solid #e2e2e2;
 }
 
-.layui-laydate-shortcut>li {
+.layui-laydate-shortcut > li {
   padding: 5px 8px;
   cursor: pointer;
   line-height: 18px;
+  user-select: none;
 
   &:hover {
     background-color: #eee;
     color: #333;
-    transition: all .3s;
+    transition: all 0.3s;
   }
 }
+/* 静态面板 */
+.layui-date-picker-static {
+  width: auto !important;
+  height: 100% !important;
+  border: 1px solid var(--input-border-color);
+}
\ No newline at end of file
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index ccea47f0..a6d6a9ba 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -41,6 +41,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   defaultTime: null,
   yearPage: 15,
   // yearStep: 1,
+  static: false,
 });
 
 const { size } = useProps(props);
@@ -60,7 +61,11 @@ defineOptions({
 <template>
   <InputBlock v-bind="{ ...props, ...$attrs }" :format="format" :size="size">
     <template #default="{ onPick }">
-      <RenderComponent v-bind="renderComponentProps" @pick="onPick" />
+      <RenderComponent v-bind="renderComponentProps" @pick="onPick">
+        <template #footer>
+          <slot name="footer" v-bind="{ props }"></slot>
+        </template>
+      </RenderComponent>
     </template>
   </InputBlock>
 </template>
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
index 7a802537..25a70210 100644
--- a/packages/component/component/datePicker/interface.ts
+++ b/packages/component/component/datePicker/interface.ts
@@ -48,9 +48,22 @@ export interface DatePickerProps {
     | Array<DatePickerModelValueSingleType>;
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
+  /**
+   * 年份分页
+   * @version 2.19.0
+   */
   yearPage?: number;
   // yearStep?: number;
+  /**
+   * 快捷选项
+   * @version 2.19.0
+   */
   shortcuts?: Array<Shortcuts>;
+  /**
+   * 静态面板
+   * @version 2.19.0
+   */
+  static?: boolean;
 }
 
 export interface RequiredDatePickerProps extends DatePickerProps {
@@ -90,6 +103,10 @@ export interface Shortcuts {
   value:
     | DatePickerModelValueSingleType
     | Array<DatePickerModelValueSingleType>
+    | Date
+    | Array<Date>
     | (() => DatePickerModelValueSingleType)
-    | (() => Array<DatePickerModelValueSingleType>);
+    | (() => Array<DatePickerModelValueSingleType>)
+    | (() => Date)
+    | (() => Array<Date>);
 }
-- 
Gitee


From 9beaa3aab235178da7294ec0161c6036b8aa082e Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Tue, 15 Oct 2024 15:43:37 +0800
Subject: [PATCH 37/45] =?UTF-8?q?docs:=20datePicker=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E6=B6=A6=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../document/zh-CN/components/datePicker.md   | 310 +++++++-----------
 1 file changed, 121 insertions(+), 189 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 7fbae553..449a643b 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -7,13 +7,32 @@
 ::: describe 高级 Web 日历组件，足以应对日期相关的各种业务场景。
 :::
 
-::: title 基础使用
+::: title 多类型选择
 :::
 
 ::: demo
 
 <template>
-  <lay-date-picker v-model="endTime" placeholder="click me" allowClear></lay-date-picker>
+  <lay-form>
+    <lay-form-item label="日期" mode="inline">
+      <lay-date-picker v-model="endTime" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="时间" mode="inline">
+      <lay-date-picker type="time" v-model="endTime2" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="日期时间" mode="inline">
+      <lay-date-picker type="datetime" v-model="endTime3" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年份" mode="inline">
+      <lay-date-picker type="year" v-model="endTime4" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="月份" mode="inline">
+      <lay-date-picker type="month" v-model="endTime5" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年份月份" mode="inline">
+      <lay-date-picker type="yearmonth" v-model="endTime6" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+  </lay-form>
 </template>
 
 <script>
@@ -23,9 +42,19 @@ export default {
   setup() {
 
     const endTime = ref(null);
+    const endTime2 = ref(null);
+    const endTime3 = ref(null);
+    const endTime4 = ref(null);
+    const endTime5 = ref(null);
+    const endTime6 = ref(null);
 
     return {
-      endTime
+      endTime,
+      endTime2,
+      endTime3,
+      endTime4,
+      endTime5,
+      endTime6
     }
   }
 }
@@ -33,28 +62,48 @@ export default {
 
 :::
 
-::: title 日期时间
+::: title 范围选择
 :::
 
 ::: demo
 
 <template>
-  <lay-date-picker type="datetime" v-model="endTime2" placeholder="click me"></lay-date-picker>
+  <lay-form>
+    <lay-form-item label="日期范围" :tips="`modelValue: ${rangeTime1}`">
+      <lay-date-picker  v-model="rangeTime1" range :placeholder="['开始日期','结束日期']" :allow-clear="true"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="时间范围" :tips="`modelValue: ${rangeTime4}`">
+      <lay-date-picker  v-model="rangeTime4" range type="time" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="时间日期范围" :tips="`modelValue: ${rangeTime2}`">
+      <lay-date-picker  v-model="rangeTime2" range type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label=" " :tips="`modelValue: ${rangeTime5}，默认设置时间为 12:30:00`">
+      <lay-date-picker v-model="rangeTime5" range :default-time="defaultTime1" type="datetime" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年范围" :tips="`modelValue: ${rangeTime6}`">
+      <lay-date-picker  v-model="rangeTime6" range type="year" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="月范围" :tips="`modelValue: ${rangeTime7}`">
+      <lay-date-picker  v-model="rangeTime7" range type="month" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年月范围" :tips="`modelValue: ${rangeTime3}`">
+      <lay-date-picker  v-model="rangeTime3" range type="yearmonth" :placeholder="['开始日期','结束日期']"></lay-date-picker>
+    </lay-form-item>
+  </lay-form>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
+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 rangeTime6 = ref([]);
+const rangeTime7 = ref([]);
 
-export default {
-  setup() {
-
-   const endTime2 = ref(null);
-
-    return {
-      endTime2
-    }
-  }
-}
+const defaultTime1 = '12:30:00'
 </script>
 
 :::
@@ -65,7 +114,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker disabled type="year" v-model="endTime3"></lay-date-picker>
+  <lay-date-picker disabled type="year" v-model="endTimeDisabled"></lay-date-picker>
 </template>
 
 <script>
@@ -74,10 +123,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime3 = ref("2022-03-04 17:35:00");
+   const endTimeDisabled = ref("2022-03-04 17:35:00");
 
     return {
-      endTime3
+      endTimeDisabled
     }
   }
 }
@@ -88,13 +137,13 @@ export default {
 ::: title 年份选择
 :::
 
-::: demo 将 `type` 设置成 `"year"` 使用年份选择模式。可以用 `yearPage` 指定每页展示年份的数量，用 `yearStep` 指定生成年份的步进值。
+::: demo 将 `type` 设置成 `"year"` 使用年份选择模式。可以用 `year-page` 指定每页展示年份的数量，用 `year-step` 指定生成年份的步进值。
 
 <template>
   <lay-space>
-    <lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
-    <lay-date-picker type="year" v-model="endTime3" :year-page="32"></lay-date-picker>
-    <lay-date-picker type="year" v-model="endTime3" :year-page="29" :year-step="2"></lay-date-picker>
+    <lay-date-picker type="year" v-model="endTimeYearRange"></lay-date-picker>
+    <lay-date-picker type="year" v-model="endTimeYearRange" :year-page="32"></lay-date-picker>
+    <lay-date-picker type="year" v-model="endTimeYearRange" :year-page="29" :year-step="2"></lay-date-picker>
   </lay-space>
 </template>
 
@@ -104,62 +153,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime3 = ref("2022");
-
-    return {
-      endTime3
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 月份选择
-:::
-
-::: demo
-
-<template>
-  <lay-date-picker type="month" v-model="mouth"></lay-date-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-   const mouth = ref("4");
-
-    return {
-      mouth
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 时间选择
-:::
-
-::: demo
-
-<template>
-  <lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-   const endTime5 = ref("17:35:00");
+   const endTimeYearRange = ref("2022");
 
     return {
-      endTime5
+      endTimeYearRange
     }
   }
 }
@@ -167,13 +164,26 @@ export default {
 
 :::
 
-::: title 年月选择
+::: title 快速选择
 :::
 
-::: demo
+::: demo 设置 `simple` 属性后，只需要点击一次后自动关闭，无需点击确认按钮。
 
 <template>
-  <lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
+<lay-form>
+    <lay-form-item label="日期" mode="inline">
+      <lay-date-picker simple v-model="endTime" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年份" mode="inline">
+      <lay-date-picker simple type="year" v-model="endTime4" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="月份" mode="inline">
+      <lay-date-picker simple type="month" v-model="endTime5" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+    <lay-form-item label="年份月份" mode="inline">
+      <lay-date-picker simple type="yearmonth" v-model="endTime6" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
+  </lay-form>
 </template>
 
 <script>
@@ -181,11 +191,7 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-
-   const endTime6 = ref("2022-03");
-
     return {
-      endTime6
     }
   }
 }
@@ -193,79 +199,6 @@ export default {
 
 :::
 
-::: title 一次性选择
-:::
-
-::: demo 只需要点击一次后自动关闭，无需点击确认按钮,仅在 type 等于`year`、`month`、`date`时有效
-
-<template>
-<div style="display:flex">
-  <lay-date-picker v-model="endTime7" simple type="year"></lay-date-picker>
-  <lay-date-picker v-model="endTime7" simple type="month" style="margin:0 10px"></lay-date-picker>
-  <lay-date-picker v-model="endTime7" simple type="date"></lay-date-picker>
-</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-   const endTime7 = ref("2022-03-04 17:35:00");
-
-    return {
-      endTime7
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 范围选择
-:::
-
-::: demo
-
-<template>
-    <lay-space direction="vertical">
-    <lay-space>
-      <lay-date-picker  v-model="rangeTime1" range :placeholder="['开始日期','结束日期']" :allow-clear="true"></lay-date-picker>
-      modelValue:{{rangeTime1}}
-    </lay-space>
-    <lay-space>
-      <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}}
-    </lay-space>
-    <lay-space>
-      <lay-date-picker  v-model="rangeTime4" range type="time" :placeholder="['开始日期','结束日期']"></lay-date-picker>
-      modelValue:{{rangeTime4}}
-    </lay-space>
-  </lay-space>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-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>
-
-:::
-
 ::: title 时间戳模式
 :::
 
@@ -297,12 +230,12 @@ export default {
       timestamp1,timestamp2
     }
   }
-
+}
 </script>
 
 :::
 
-::: title 最大值,最小值
+::: title 限制可选范围
 :::
 
 ::: demo 通过预设`min`、`max`属性限制组件选择的最大值与最小值,目前仅支持`date`、`year`、`month`、`time(不包含range)`模式，且无法在初始化时强制变更 modelValue,在未来的版本中将补齐这一特性并支持更多模式
@@ -367,7 +300,7 @@ export default {
 ::: demo 目前在 type 等于`year`、`month`这类输出值为非组合值时无效，使用`format`属性任意组合吧
 
 <template>
-  <lay-date-picker v-model="endTime8" simple type="date" :format="'DD/MM/YYYY'" placeholder="click me"></lay-date-picker>
+  <lay-date-picker v-model="endTimeFormat" simple type="date" :format="'DD/MM/YYYY'" placeholder="click me"></lay-date-picker>
 </template>
 
 <script>
@@ -375,9 +308,9 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-   const endTime8 = ref();
+   const endTimeFormat = ref(null);
     return {
-      endTime8
+      endTimeFormat
     }
   }
 }
@@ -389,31 +322,31 @@ export default {
 
 ::: table
 
-| 属性           | 描述                                         | 类型                                        | 默认值              | 可选值                                              | 版本     |
-| -------------- | -------------------------------------------- | ------------------------------------------- | ------------------- | --------------------------------------------------- | -------- |
-| name           | 原始属性 name                                | `string`                                    | --                  | --                                                  | --       |
-| v-model        | 当前时间                                     | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>`                | --                  | --                                                  | --       |
-| type           | 选择类型                                     | `string`                                    | `date`              | `date` `datetime` `year` `month` `time` `yearmonth` | --       |
-| disabled       | 是否禁止修改                                 | `boolean`                                   | `false`             | —                                                   | —        |
-| readonly       | `input` 是否只读                             | `boolean`                                   | `false`             | —                                                   | —        |
-| placeholder    | `input` 占位符                               | `string`                                    | --                  | —                                                   | —        |
-| allowClear     | 允许清空                                     | `boolean`                                   | `false`             | --                                                  | --       |
-| simple         | 一次性选择，无需点击确认按钮                 | `boolean`                                   | `false`             | --                                                  | --       |
-| max            | 最大可选日期                                 | `string`                                    | --                  | --                                                  | --       |
-| min            | 最小可选日期                                 | `string`                                    | --                  | --                                                  | --       |
-| rang           | 是否范围选择                                 | `boolean`                                   | `false`             | --                                                  | --       |
-| rangeSeparator | 范围分隔符                                   | `string`                                    | `至`                | --                                                  | --       |
-| size           | 尺寸                                         | `string`                                    | `lg` `md` `sm` `xs` | `md`                                                | --       |
-| prefix-icon    | 前置图标                                     | `string`                                    | `layui-icon-date`   | 内置图标集                                          | `1.4.0`  |
-| suffix-icon    | 后置图标                                     | `string`                                    | --                  | 内置图标集                                          | `1.4.0`  |
-| timestamp      | 时间戳模式(13 位),仅对 date 和 datetime 有效 | `boolean`                                   | `false`             | `true` `false`                                      | `1.6.5`  |
-| format         | 输出格式化                                   | `string`                                    | --                  | 例如`YYYY-MM-DD`                                    | -        |
-| default-value   | `首次未点击` 时，下拉弹窗打开时默认显示的时间，传空为组件首次 `渲染时间`      | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>`                    | --                  | --                                      | `2.19.0` |
-| default-time   | 范围日期 `type=datetime` 时分秒默认时间      | `string` `Array<string>`                    | --                  | 例如`12:30:00`                                      | `2.17.2` |
-| contentStyle   | 内容自定义样式                               | `StyleValue`                                | --                  | --                                                  | --       |
-| contentClass   | 内容自定义 Class                             | `string` `Array<string \| object>` `object` | --                  | --                                                  | --       |
-| yearPage       | 年份选择器每页年份的个数                     | `2.19.0`                                    | `number`            | `15`                                                | --       |
-| yearStep       | 年份选择器年份的步进值                       | `2.19.0`                                    | `number`            | `1`                                                 | --       |
+| 属性            | 描述                                                                     | 类型                                                                     | 默认值              | 可选值                                              | 版本     |
+| --------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------- | --------------------------------------------------- | -------- |
+| name            | 原始属性 name                                                            | `string`                                                                 | --                  | --                                                  | --       |
+| v-model         | 当前时间                                                                 | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>` | --                  | --                                                  | --       |
+| type            | 选择类型                                                                 | `string`                                                                 | `date`              | `date` `datetime` `year` `month` `time` `yearmonth` | --       |
+| disabled        | 是否禁止修改                                                             | `boolean`                                                                | `false`             | —                                                   | —        |
+| readonly        | `input` 是否只读                                                         | `boolean`                                                                | `false`             | —                                                   | —        |
+| placeholder     | `input` 占位符                                                           | `string`                                                                 | --                  | —                                                   | —        |
+| allow-clear     | 允许清空                                                                 | `boolean`                                                                | `false`             | --                                                  | --       |
+| simple          | 一次性选择，无需点击确认按钮                                             | `boolean`                                                                | `false`             | --                                                  | --       |
+| max             | 最大可选日期                                                             | `string`                                                                 | --                  | --                                                  | --       |
+| min             | 最小可选日期                                                             | `string`                                                                 | --                  | --                                                  | --       |
+| rang            | 是否范围选择                                                             | `boolean`                                                                | `false`             | --                                                  | --       |
+| range-separator | 范围分隔符                                                               | `string`                                                                 | `至`                | --                                                  | --       |
+| size            | 尺寸                                                                     | `string`                                                                 | `lg` `md` `sm` `xs` | `md`                                                | --       |
+| prefix-icon     | 前置图标                                                                 | `string`                                                                 | `layui-icon-date`   | 内置图标集                                          | `1.4.0`  |
+| suffix-icon     | 后置图标                                                                 | `string`                                                                 | --                  | 内置图标集                                          | `1.4.0`  |
+| timestamp       | 时间戳模式(13 位),仅对 date 和 datetime 有效                             | `boolean`                                                                | `false`             | `true` `false`                                      | `1.6.5`  |
+| format          | 输出格式化                                                               | `string`                                                                 | --                  | 例如`YYYY-MM-DD`                                    | -        |
+| default-value   | `首次未点击` 时，下拉弹窗打开时默认显示的时间，传空为组件首次 `渲染时间` | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>` | --                  | --                                                  | `2.19.0` |
+| 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       | 年份选择器每页年份的个数                                                 | `2.19.0`                                                                 | `number`            | `15`                                                | --       |
+| year-step       | 年份选择器年份的步进值                                                   | `2.19.0`                                                                 | `number`            | `1`                                                 | --       |
 
 :::
 
@@ -434,8 +367,7 @@ export default {
 ```ts
 import type { ConfigType } from "dayjs";
 
-type DatePickerModelValueSingleType = ConfigType
-
+type DatePickerModelValueSingleType = ConfigType;
 ```
 
 ::: previousNext datePicker
-- 
Gitee


From 43b75bd4aa3bbb5090a80e94cfa5b2828e0083ff Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 15 Oct 2024 19:05:18 +0800
Subject: [PATCH 38/45] docs: update

---
 .../document/zh-CN/components/datePicker.md   | 211 ++++++++++--------
 .../datePicker/component/interface.ts         |   6 +-
 .../component/datePicker/interface.ts         |  12 +-
 3 files changed, 122 insertions(+), 107 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 449a643b..0172c3b1 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -35,29 +35,15 @@
   </lay-form>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted } from 'vue'
 
-export default {
-  setup() {
-
-    const endTime = ref(null);
-    const endTime2 = ref(null);
-    const endTime3 = ref(null);
-    const endTime4 = ref(null);
-    const endTime5 = ref(null);
-    const endTime6 = ref(null);
-
-    return {
-      endTime,
-      endTime2,
-      endTime3,
-      endTime4,
-      endTime5,
-      endTime6
-    }
-  }
-}
+const endTime = ref(null);
+const endTime2 = ref(null);
+const endTime3 = ref(null);
+const endTime4 = ref(null);
+const endTime5 = ref(null);
+const endTime6 = ref(null);
 </script>
 
 :::
@@ -117,19 +103,10 @@ const defaultTime1 = '12:30:00'
   <lay-date-picker disabled type="year" v-model="endTimeDisabled"></lay-date-picker>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-
-   const endTimeDisabled = ref("2022-03-04 17:35:00");
-
-    return {
-      endTimeDisabled
-    }
-  }
-}
+const endTimeDisabled = ref("2022-03-04 17:35:00");
 </script>
 
 :::
@@ -147,19 +124,10 @@ export default {
   </lay-space>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-
-   const endTimeYearRange = ref("2022");
-
-    return {
-      endTimeYearRange
-    }
-  }
-}
+const endTimeYearRange = ref("2022");
 </script>
 
 :::
@@ -186,15 +154,15 @@ export default {
   </lay-form>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-    return {
-    }
-  }
-}
+const endTime = ref(null);
+const endTime2 = ref(null);
+const endTime3 = ref(null);
+const endTime4 = ref(null);
+const endTime5 = ref(null);
+const endTime6 = ref(null);
 </script>
 
 :::
@@ -217,20 +185,11 @@ export default {
   </lay-space>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-
-   const timestamp1 = ref(new Date().getTime());
-   const timestamp2 = ref(new Date().getTime());
-
-    return {
-      timestamp1,timestamp2
-    }
-  }
-}
+const timestamp1 = ref(new Date().getTime());
+const timestamp2 = ref(new Date().getTime());
 </script>
 
 :::
@@ -238,7 +197,7 @@ export default {
 ::: title 限制可选范围
 :::
 
-::: demo 通过预设`min`、`max`属性限制组件选择的最大值与最小值,目前仅支持`date`、`year`、`month`、`time(不包含range)`模式，且无法在初始化时强制变更 modelValue,在未来的版本中将补齐这一特性并支持更多模式
+::: demo 通过预设`min`、`max`属性限制组件选择的最大值与最小值。
 
 <template>
   <lay-space direction="vertical">
@@ -265,31 +224,18 @@ export default {
   </lay-space>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 import dayjs from "dayjs";
-export default {
-  setup() {
-   const minDate = dayjs().startOf('month').add(10,'day').format('YYYY-MM-DD HH:mm');
-   const maxDate = dayjs().endOf('month').subtract(10,'day').format('YYYY-MM-DD HH:mm');
-   const limitDate=ref(dayjs().startOf('month').add(11,'day').format('YYYY-MM-DD HH:mm'));
-   const limitYear=ref(dayjs().year());
-   const limitMonth=ref(dayjs().month()+1);
-   const limitDateRange=ref([])
-   const maxLimitDate = dayjs().add(1,'month').endOf('month').subtract(10,'day').format('YYYY-MM-DD HH:mm');
-   const limitTimeRange = ref([]);
-    return {
-      minDate,
-      maxDate,
-      limitDate,
-      limitYear,
-      limitMonth,
-      limitDateRange,
-      maxLimitDate,
-      limitTimeRange
-    }
-  }
-}
+
+const minDate = dayjs().startOf('month').add(10,'day').format('YYYY-MM-DD HH:mm');
+const maxDate = dayjs().endOf('month').subtract(10,'day').format('YYYY-MM-DD HH:mm');
+const limitDate=ref(dayjs().startOf('month').add(11,'day').format('YYYY-MM-DD HH:mm'));
+const limitYear=ref(dayjs().year());
+const limitMonth=ref(dayjs().month()+1);
+const limitDateRange=ref([])
+const maxLimitDate = dayjs().add(1,'month').endOf('month').subtract(10,'day').format('YYYY-MM-DD HH:mm');
+const limitTimeRange = ref([]);
 </script>
 
 :::
@@ -300,23 +246,77 @@ export default {
 ::: demo 目前在 type 等于`year`、`month`这类输出值为非组合值时无效，使用`format`属性任意组合吧
 
 <template>
-  <lay-date-picker v-model="endTimeFormat" simple type="date" :format="'DD/MM/YYYY'" placeholder="click me"></lay-date-picker>
+  endTimeFormat: {{endTimeFormat}}
+  <lay-date-picker v-model="endTimeFormat" simple type="date" :format="'DD/MM/YYYY'" placeholder="format"></lay-date-picker>
+  endTimeInputFormat: {{endTimeInputFormat}}
+  <lay-date-picker v-model="endTimeInputFormat" simple type="date" :inputFormat="'DD/MM/YYYY'" placeholder="inputFormat"></lay-date-picker>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 
-export default {
-  setup() {
-   const endTimeFormat = ref(null);
-    return {
-      endTimeFormat
-    }
-  }
-}
+const endTimeFormat = ref(null);
+const endTimeInputFormat = ref(null);
 </script>
 
 :::
+
+::: title 快捷选项
+:::
+
+::: demo 通过 `shortcuts` 在左侧添加快捷选项
+
+<template>
+  <lay-space>
+    <lay-date-picker v-model="value1" :shortcuts="shortcuts1" type="date" placeholder="format"></lay-date-picker>
+    <lay-date-picker v-model="value2" :shortcuts="shortcuts2" type="date" range  placeholder="范围"></lay-date-picker>
+  </lay-space>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value1 = ref(null);
+const value2 = ref(null);
+
+const shortcuts1 = [
+  {text: '明天', value: new Date(new Date().setDate(new Date().getDate() + 1))},
+  {text: '后天', value: new Date(new Date().setDate(new Date().getDate() + 2))}
+]
+
+const shortcuts2 = [
+  {
+    text: '上周',
+    value: () => {
+      const end1 = new Date()
+      const start1 = new Date()
+      start1.setTime(start1.getTime() - 3600 * 1000 * 24 * 7)
+      return [start1, end1]
+    },
+  },
+  {
+    text: '上月',
+    value: () => {
+      const end2 = new Date()
+      const start2 = new Date()
+      start2.setTime(start2.getTime() - 3600 * 1000 * 24 * 30)
+      return [start2, end2]
+    },
+  },
+  {
+    text: '之前3个月',
+    value: () => {
+      const end3 = new Date()
+      const start3 = new Date()
+      start3.setTime(start3.getTime() - 3600 * 1000 * 24 * 90)
+      return [start3, end3]
+    },
+  },
+]
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::
 
@@ -341,12 +341,14 @@ export default {
 | suffix-icon     | 后置图标                                                                 | `string`                                                                 | --                  | 内置图标集                                          | `1.4.0`  |
 | timestamp       | 时间戳模式(13 位),仅对 date 和 datetime 有效                             | `boolean`                                                                | `false`             | `true` `false`                                      | `1.6.5`  |
 | format          | 输出格式化                                                               | `string`                                                                 | --                  | 例如`YYYY-MM-DD`                                    | -        |
+| input-format          | 输入框格式化                                                               | `string`                                                                 | --                  | 例如`YYYY-MM-DD`                                    | `2.19.0`    |
 | default-value   | `首次未点击` 时，下拉弹窗打开时默认显示的时间，传空为组件首次 `渲染时间` | `DatePickerModelValueSingleType` `Array<DatePickerModelValueSingleType>` | --                  | --                                                  | `2.19.0` |
 | 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       | 年份选择器每页年份的个数                                                 | `2.19.0`                                                                 | `number`            | `15`                                                | --       |
-| year-step       | 年份选择器年份的步进值                                                   | `2.19.0`                                                                 | `number`            | `1`                                                 | --       |
+| year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
+| shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | `15`             | --|              `2.19.0`                    |  
+
 
 :::
 
@@ -364,10 +366,23 @@ export default {
 
 :::
 
+::: title Types
+
 ```ts
+
 import type { ConfigType } from "dayjs";
 
 type DatePickerModelValueSingleType = ConfigType;
+
+interface Shortcuts {
+  text: string | number;
+  value:
+    | DatePickerModelValueSingleType
+    | Array<DatePickerModelValueSingleType>
+    | (() => DatePickerModelValueSingleType)
+    | (() => Array<DatePickerModelValueSingleType>);
+}
+
 ```
 
 ::: previousNext datePicker
diff --git a/packages/component/component/datePicker/component/interface.ts b/packages/component/component/datePicker/component/interface.ts
index ee688b85..6c38cd9e 100644
--- a/packages/component/component/datePicker/component/interface.ts
+++ b/packages/component/component/datePicker/component/interface.ts
@@ -12,11 +12,13 @@ export interface BasePanelProps {
   classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
-export interface UniquePickerProps extends DatePickerContextType {
+export interface UniquePickerProps
+  extends /* @vue-ignore */ DatePickerContextType {
   modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
 }
 
-export interface RangePickerProps extends DatePickerContextType {
+export interface RangePickerProps
+  extends /* @vue-ignore */ DatePickerContextType {
   modelValue: Array<Dayjs>;
 }
 
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
index 25a70210..4e0605f4 100644
--- a/packages/component/component/datePicker/interface.ts
+++ b/packages/component/component/datePicker/interface.ts
@@ -66,7 +66,8 @@ export interface DatePickerProps {
   static?: boolean;
 }
 
-export interface RequiredDatePickerProps extends DatePickerProps {
+export interface RequiredDatePickerProps
+  extends /* @vue-ignore */ DatePickerProps {
   size: CommonSize;
   type: DatePickerType;
   disabled: boolean;
@@ -91,7 +92,8 @@ export type DatePickerEmits = {
 
 export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
 
-export interface DatePickerContextType extends RequiredDatePickerProps {
+export interface DatePickerContextType
+  extends /* @vue-ignore */ RequiredDatePickerProps {
   modelValue: DatePickerValue;
 }
 
@@ -103,10 +105,6 @@ export interface Shortcuts {
   value:
     | DatePickerModelValueSingleType
     | Array<DatePickerModelValueSingleType>
-    | Date
-    | Array<Date>
     | (() => DatePickerModelValueSingleType)
-    | (() => Array<DatePickerModelValueSingleType>)
-    | (() => Date)
-    | (() => Array<Date>);
+    | (() => Array<DatePickerModelValueSingleType>);
 }
-- 
Gitee


From cec93347f2530287bb2b4e8250251760651b2d78 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Tue, 15 Oct 2024 19:56:22 +0800
Subject: [PATCH 39/45] fix: update

---
 .../document/zh-CN/components/datePicker.md   | 23 ++++++++++++----
 .../datePicker/component/DateRange.vue        |  6 +----
 .../datePicker/component/TimeRange.vue        |  8 ------
 .../component/common/InputBlock.vue           |  5 +---
 .../datePicker/component/interface.ts         | 10 +++----
 .../component/component/datePicker/index.less | 26 +++++++++----------
 .../component/component/datePicker/index.vue  |  2 +-
 .../component/datePicker/interface.ts         | 18 ++++++-------
 8 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 0172c3b1..3072d419 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -114,13 +114,12 @@ const endTimeDisabled = ref("2022-03-04 17:35:00");
 ::: title 年份选择
 :::
 
-::: demo 将 `type` 设置成 `"year"` 使用年份选择模式。可以用 `year-page` 指定每页展示年份的数量，用 `year-step` 指定生成年份的步进值。
+::: demo 将 `type` 设置成 `"year"` 使用年份选择模式。可以用 `year-page` 指定每页展示年份的数量。
 
 <template>
   <lay-space>
     <lay-date-picker type="year" v-model="endTimeYearRange"></lay-date-picker>
     <lay-date-picker type="year" v-model="endTimeYearRange" :year-page="32"></lay-date-picker>
-    <lay-date-picker type="year" v-model="endTimeYearRange" :year-page="29" :year-step="2"></lay-date-picker>
   </lay-space>
 </template>
 
@@ -138,19 +137,31 @@ const endTimeYearRange = ref("2022");
 ::: demo 设置 `simple` 属性后，只需要点击一次后自动关闭，无需点击确认按钮。
 
 <template>
-<lay-form>
+  <lay-form>
     <lay-form-item label="日期" mode="inline">
       <lay-date-picker simple v-model="endTime" placeholder="click me" allow-clear></lay-date-picker>
     </lay-form-item>
+    <lay-form-item label="日期 range" mode="inline">
+      <lay-date-picker simple range v-model="endTimeRange" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
     <lay-form-item label="年份" mode="inline">
       <lay-date-picker simple type="year" v-model="endTime4" placeholder="click me" allow-clear></lay-date-picker>
     </lay-form-item>
+    <lay-form-item label="年份" mode="inline">
+      <lay-date-picker simple type="year" range v-model="endTime4Range" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
     <lay-form-item label="月份" mode="inline">
       <lay-date-picker simple type="month" v-model="endTime5" placeholder="click me" allow-clear></lay-date-picker>
     </lay-form-item>
+    <lay-form-item label="月份" mode="inline">
+      <lay-date-picker simple type="month" range v-model="endTime5Range" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
     <lay-form-item label="年份月份" mode="inline">
       <lay-date-picker simple type="yearmonth" v-model="endTime6" placeholder="click me" allow-clear></lay-date-picker>
     </lay-form-item>
+     <lay-form-item label="年份月份range" mode="inline">
+      <lay-date-picker simple type="yearmonth" range v-model="endTime6Range" placeholder="click me" allow-clear></lay-date-picker>
+    </lay-form-item>
   </lay-form>
 </template>
 
@@ -158,11 +169,13 @@ const endTimeYearRange = ref("2022");
 import { ref } from 'vue'
 
 const endTime = ref(null);
-const endTime2 = ref(null);
-const endTime3 = ref(null);
+const endTimeRange = ref(null);
 const endTime4 = ref(null);
+const endTime4Range = ref(null);
 const endTime5 = ref(null);
+const endTime5Range = ref(null);
 const endTime6 = ref(null);
+const endTime6Range = ref(null);
 </script>
 
 :::
diff --git a/packages/component/component/datePicker/component/DateRange.vue b/packages/component/component/datePicker/component/DateRange.vue
index 08324770..aed23ede 100644
--- a/packages/component/component/datePicker/component/DateRange.vue
+++ b/packages/component/component/datePicker/component/DateRange.vue
@@ -393,11 +393,7 @@ const handleConfirm = () => {
         </DateContent>
       </div>
     </div>
-    <Footer
-      :showNow="false"
-      :showConfirm="!props.simple"
-      @confirm="handleConfirm"
-    >
+    <Footer :showNow="false" :showConfirm="!simple" @confirm="handleConfirm">
       {{ startDate?.format(props.inputFormat) }}
       {{ props.rangeSeparator }}
       {{ endDate?.format(props.inputFormat) }}
diff --git a/packages/component/component/datePicker/component/TimeRange.vue b/packages/component/component/datePicker/component/TimeRange.vue
index fd7c1bfc..b6865372 100644
--- a/packages/component/component/datePicker/component/TimeRange.vue
+++ b/packages/component/component/datePicker/component/TimeRange.vue
@@ -41,12 +41,6 @@ watch(
   { immediate: true }
 );
 
-const handleTimePick = () => {
-  if (props.simple && startDate.value && endDate.value) {
-    handleConfirm();
-  }
-};
-
 const handleLeftTimePick = (date: Dayjs) => {
   if (date.isSameOrAfter(endDate.value)) {
     startDate.value = endDate.value;
@@ -54,7 +48,6 @@ const handleLeftTimePick = (date: Dayjs) => {
   } else {
     startDate.value = date;
   }
-  handleTimePick();
 };
 
 const handleRightTimePick = (date: Dayjs) => {
@@ -64,7 +57,6 @@ const handleRightTimePick = (date: Dayjs) => {
   } else {
     endDate.value = date;
   }
-  handleTimePick();
 };
 
 const handleChangeShortcut = (shortcuts: ShortcutsType) => {
diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
index f4ac53d5..8bae2856 100644
--- a/packages/component/component/datePicker/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -31,7 +31,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,
     },
   ];
 });
@@ -284,8 +284,5 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
         <slot :onPick="onPick"></slot>
       </template>
     </lay-dropdown>
-    <template v-else>
-      <slot :onPick="onPick"></slot>
-    </template>
   </div>
 </template>
diff --git a/packages/component/component/datePicker/component/interface.ts b/packages/component/component/datePicker/component/interface.ts
index 6c38cd9e..e30aefcf 100644
--- a/packages/component/component/datePicker/component/interface.ts
+++ b/packages/component/component/datePicker/component/interface.ts
@@ -12,15 +12,13 @@ export interface BasePanelProps {
   classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
-export interface UniquePickerProps
-  extends /* @vue-ignore */ DatePickerContextType {
+export type UniquePickerProps = DatePickerContextType & {
   modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
-}
+};
 
-export interface RangePickerProps
-  extends /* @vue-ignore */ DatePickerContextType {
+export type RangePickerProps = DatePickerContextType & {
   modelValue: Array<Dayjs>;
-}
+};
 
 export interface DateContentSingleDateObject {
   day: number;
diff --git a/packages/component/component/datePicker/index.less b/packages/component/component/datePicker/index.less
index 9560d9e7..2a0fb580 100644
--- a/packages/component/component/datePicker/index.less
+++ b/packages/component/component/datePicker/index.less
@@ -109,14 +109,14 @@ html #layuicss-laydate {
 .layui-laydate {
   animation-name: laydate-downbit;
 }
-.layui-laydate-static {
-  position: relative;
-  z-index: 0;
-  display: inline-block;
-  margin: 0;
-  -webkit-animation: none;
-  animation: none;
-}
+// .layui-laydate-static {
+//   position: relative;
+//   z-index: 0;
+//   display: inline-block;
+//   margin: 0;
+//   -webkit-animation: none;
+//   animation: none;
+// }
 
 /* 展开年月列表时 */
 .laydate-ym-show .laydate-prev-m,
@@ -694,8 +694,8 @@ html #layuicss-laydate {
   }
 }
 /* 静态面板 */
-.layui-date-picker-static {
-  width: auto !important;
-  height: 100% !important;
-  border: 1px solid var(--input-border-color);
-}
\ No newline at end of file
+// .layui-date-picker-static {
+//   width: auto !important;
+//   height: 100% !important;
+//   border: 1px solid var(--input-border-color);
+// }
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index a6d6a9ba..82252ab1 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   defaultTime: null,
   yearPage: 15,
   // yearStep: 1,
-  static: false,
+  // static: false,
 });
 
 const { size } = useProps(props);
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
index 4e0605f4..f0255099 100644
--- a/packages/component/component/datePicker/interface.ts
+++ b/packages/component/component/datePicker/interface.ts
@@ -59,15 +59,14 @@ export interface DatePickerProps {
    * @version 2.19.0
    */
   shortcuts?: Array<Shortcuts>;
-  /**
-   * 静态面板
-   * @version 2.19.0
-   */
-  static?: boolean;
+  // /**
+  //  * 静态面板
+  //  * @version 2.19.0
+  //  */
+  // static?: boolean;
 }
 
-export interface RequiredDatePickerProps
-  extends /* @vue-ignore */ DatePickerProps {
+export interface RequiredDatePickerProps extends DatePickerProps {
   size: CommonSize;
   type: DatePickerType;
   disabled: boolean;
@@ -92,10 +91,9 @@ export type DatePickerEmits = {
 
 export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
 
-export interface DatePickerContextType
-  extends /* @vue-ignore */ RequiredDatePickerProps {
+export type DatePickerContextType = RequiredDatePickerProps & {
   modelValue: DatePickerValue;
-}
+};
 
 export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
   Symbol("LayDatePicker");
-- 
Gitee


From 75e16e5e3e665c02650dd733e8ff795ea2a55934 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 10:57:15 +0800
Subject: [PATCH 40/45] chore: update

---
 .../document/zh-CN/components/datePicker.md    | 18 +++++++++---------
 .../datePicker/component/DateRange.vue         |  8 ++++++--
 .../datePicker/component/TimeRange.vue         |  6 +-----
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 3072d419..f26d38b4 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -134,7 +134,7 @@ const endTimeYearRange = ref("2022");
 ::: title 快速选择
 :::
 
-::: demo 设置 `simple` 属性后，只需要点击一次后自动关闭，无需点击确认按钮。
+::: demo 设置 `simple` 属性后，只需要点击一次后自动关闭，无需点击确认按钮。 对于 `datetime` 、 `time` 与对应 `range` 模式因交互影响无效。
 
 <template>
   <lay-form>
@@ -256,7 +256,7 @@ const limitTimeRange = ref([]);
 ::: title 格式化
 :::
 
-::: demo 目前在 type 等于`year`、`month`这类输出值为非组合值时无效，使用`format`属性任意组合吧
+::: demo `format` 用于格式化输出 `modelValue`，`inputFormat` 用于格式化输入框显示。
 
 <template>
   endTimeFormat: {{endTimeFormat}}
@@ -342,25 +342,25 @@ const shortcuts2 = [
 | type            | 选择类型                                                                 | `string`                                                                 | `date`              | `date` `datetime` `year` `month` `time` `yearmonth` | --       |
 | disabled        | 是否禁止修改                                                             | `boolean`                                                                | `false`             | —                                                   | —        |
 | readonly        | `input` 是否只读                                                         | `boolean`                                                                | `false`             | —                                                   | —        |
-| placeholder     | `input` 占位符                                                           | `string`                                                                 | --                  | —                                                   | —        |
+| placeholder     | `input` 占位符                           | `string` `Array<string>`                           | --                  | —                                                   | —        |
 | allow-clear     | 允许清空                                                                 | `boolean`                                                                | `false`             | --                                                  | --       |
 | simple          | 一次性选择，无需点击确认按钮                                             | `boolean`                                                                | `false`             | --                                                  | --       |
-| max             | 最大可选日期                                                             | `string`                                                                 | --                  | --                                                  | --       |
-| min             | 最小可选日期                                                             | `string`                                                                 | --                  | --                                                  | --       |
-| rang            | 是否范围选择                                                             | `boolean`                                                                | `false`             | --                                                  | --       |
+| max             | 最大可选日期                                            | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
+| min             | 最小可选日期                                           | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
+| range            | 是否范围选择                                                             | `boolean`                                                                | `false`             | --                                                  | --       |
 | range-separator | 范围分隔符                                                               | `string`                                                                 | `至`                | --                                                  | --       |
 | size            | 尺寸                                                                     | `string`                                                                 | `lg` `md` `sm` `xs` | `md`                                                | --       |
 | prefix-icon     | 前置图标                                                                 | `string`                                                                 | `layui-icon-date`   | 内置图标集                                          | `1.4.0`  |
 | suffix-icon     | 后置图标                                                                 | `string`                                                                 | --                  | 内置图标集                                          | `1.4.0`  |
 | timestamp       | 时间戳模式(13 位),仅对 date 和 datetime 有效                             | `boolean`                                                                | `false`             | `true` `false`                                      | `1.6.5`  |
-| format          | 输出格式化                                                               | `string`                                                                 | --                  | 例如`YYYY-MM-DD`                                    | -        |
-| input-format          | 输入框格式化                                                               | `string`                                                                 | --                  | 例如`YYYY-MM-DD`                                    | `2.19.0`    |
+| 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` |
 | content-style   | 内容自定义样式                                                           | `StyleValue`                                                             | --                  | --                                                  | --       |
 | content-class   | 内容自定义 Class                                                         | `string` `Array<string \| object>` `object`                              | --                  | --                                                  | --       |
 | year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
-| shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | `15`             | --|              `2.19.0`                    |  
+| shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | --             | --|              `2.19.0`                    |  
 
 
 :::
diff --git a/packages/component/component/datePicker/component/DateRange.vue b/packages/component/component/datePicker/component/DateRange.vue
index aed23ede..3dd78acb 100644
--- a/packages/component/component/datePicker/component/DateRange.vue
+++ b/packages/component/component/datePicker/component/DateRange.vue
@@ -46,6 +46,10 @@ const monthRightRef = ref<DropdownRef>();
 const timeLeftRef = ref<DropdownRef>();
 const timeRightRef = ref<DropdownRef>();
 
+const _simple = computed(() => {
+  return props.simple && props.type !== "datetime";
+});
+
 const MONTH_NAME = computed(() => [
   t("datePicker.january"),
   t("datePicker.february"),
@@ -179,7 +183,7 @@ const handleDatePick = (value: number) => {
     endDate.value = _endDate;
   }
 
-  if (props.simple && startDate.value && endDate.value) {
+  if (_simple.value && startDate.value && endDate.value) {
     handleConfirm();
   }
 };
@@ -393,7 +397,7 @@ const handleConfirm = () => {
         </DateContent>
       </div>
     </div>
-    <Footer :showNow="false" :showConfirm="!simple" @confirm="handleConfirm">
+    <Footer :showNow="false" :showConfirm="!_simple" @confirm="handleConfirm">
       {{ startDate?.format(props.inputFormat) }}
       {{ props.rangeSeparator }}
       {{ endDate?.format(props.inputFormat) }}
diff --git a/packages/component/component/datePicker/component/TimeRange.vue b/packages/component/component/datePicker/component/TimeRange.vue
index b6865372..451ce07d 100644
--- a/packages/component/component/datePicker/component/TimeRange.vue
+++ b/packages/component/component/datePicker/component/TimeRange.vue
@@ -95,11 +95,7 @@ const handleConfirm = () => {
         </template>
       </Time>
     </div>
-    <Footer
-      :showNow="false"
-      :showConfirm="!props.simple"
-      @confirm="handleConfirm"
-    >
+    <Footer :showNow="false" @confirm="handleConfirm">
       <slot name="footer">
         {{ startDate?.format(props.inputFormat) }}
         {{ props.rangeSeparator }}
-- 
Gitee


From 8f5774b368fb5653234adef08635fa5631306eff Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 11:14:04 +0800
Subject: [PATCH 41/45] docs: default-value

---
 .../document/zh-CN/components/datePicker.md   | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index f26d38b4..65adbfc4 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -253,16 +253,41 @@ const limitTimeRange = ref([]);
 
 :::
 
+::: title 默认日期
+:::
+
+::: demo `default-value` 可用于在 `modelValue` 为空时，面板展示的默认日期。 在 `range` 模式时，会设置 `左侧` 面板默认日期。
+
+<template>
+  <lay-space direction="vertical">
+    <lay-date-picker v-model="date1" type="date" :defaultValue="defaultValue" placeholder="defaultValue 2000-01-01"></lay-date-picker>
+    <lay-date-picker v-model="date1" type="date" :defaultValue="defaultValue" range placeholder="defaultValue 2000-01-01"></lay-date-picker>
+    <lay-date-picker v-model="date1" type="datetime" :defaultValue="defaultValue" defaultTime="12:30:00" range placeholder="defaultTime 12:30:00"></lay-date-picker>
+  </lay-space>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const date1 = ref();
+const date2 = ref([]);
+const defaultValue = '2000-01-01'
+</script>
+
+:::
+
 ::: title 格式化
 :::
 
 ::: demo `format` 用于格式化输出 `modelValue`，`inputFormat` 用于格式化输入框显示。
 
 <template>
-  endTimeFormat: {{endTimeFormat}}
-  <lay-date-picker v-model="endTimeFormat" simple type="date" :format="'DD/MM/YYYY'" placeholder="format"></lay-date-picker>
-  endTimeInputFormat: {{endTimeInputFormat}}
-  <lay-date-picker v-model="endTimeInputFormat" simple type="date" :inputFormat="'DD/MM/YYYY'" placeholder="inputFormat"></lay-date-picker>
+  <lay-space direction="vertical">
+    endTimeFormat: {{endTimeFormat}}
+    <lay-date-picker v-model="endTimeFormat" simple type="date" :format="'DD/MM/YYYY'" placeholder="format"></lay-date-picker>
+    endTimeInputFormat: {{endTimeInputFormat}}
+    <lay-date-picker v-model="endTimeInputFormat" simple type="date" :inputFormat="'DD/MM/YYYY'" placeholder="inputFormat"></lay-date-picker>
+  </lay-space>
 </template>
 
 <script setup>
-- 
Gitee


From 92d2a6d6ec8d51c02b561b663caa324c662b03a9 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 18:20:51 +0800
Subject: [PATCH 42/45] feat: add disabled-date prop

---
 .../document/zh-CN/components/datePicker.md   | 179 +++++++++++++++++-
 .../datePicker/__tests__/datePicker.test.tsx  |  76 +++++++-
 .../datePicker/__tests__/yearPanel.test.tsx   |  31 +++
 .../datePicker/__tests__/yearmonth.test.tsx   |  41 ++++
 .../component/common/DateContent.vue          |  50 ++---
 .../component/common/InputBlock.vue           |   1 -
 .../datePicker/component/common/Month.vue     |  76 ++++----
 .../datePicker/component/common/Time.vue      |  76 ++++----
 .../datePicker/component/common/Year.vue      |  46 +++--
 .../datePicker/component/interface.ts         |   8 +-
 .../datePicker/hook/useDatePicker.ts          |  14 +-
 .../component/component/datePicker/index.vue  |   5 +-
 .../component/datePicker/interface.ts         |   5 +-
 .../src/component/__tests__/form.test.tsx     |   1 +
 14 files changed, 471 insertions(+), 138 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 65adbfc4..4ef0e67f 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -207,7 +207,179 @@ const timestamp2 = ref(new Date().getTime());
 
 :::
 
-::: title 限制可选范围
+::: title 禁止任何日期
+:::
+
+::: demo 通过 `disabled-date` 可禁止任何日期，优先级大于 `max` `min`。
+
+<template>
+  <lay-space direction="vertical">
+    <lay-space>
+      年份：
+      <lay-date-picker
+        type="year"
+        :disabledDate="disabledDateYear"
+        v-model="date1"
+        placeholder="2的倍数年份禁止"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="year"
+        :disabledDate="disabledDateYear"
+        range
+        v-model="date1range"
+        placeholder="2的倍数年份禁止 range"
+      ></lay-date-picker>
+    </lay-space>
+    <lay-space>
+      月份：
+      <lay-date-picker
+        type="month"
+        :disabledDate="disabledDateMonth"
+        v-model="date2"
+        placeholder="4月或者6月不可选"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="month"
+        :disabledDate="disabledDateMonth"
+        range
+        v-model="date2range"
+        placeholder="4月或者6月不可选 range"
+      ></lay-date-picker>
+    </lay-space>
+    <lay-space>
+      年月份：
+      <lay-date-picker
+        type="yearmonth"
+        :disabledDate="disabledDateYearMonth"
+        v-model="date3"
+        defaultValue="2024-01"
+        placeholder="2024-01/2023-03不可选"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="yearmonth"
+        :disabledDate="disabledDateYearMonth"
+        range
+        v-model="date3range"
+        defaultValue="2024-01"
+        placeholder="2024-01/2023-03不可选 range"
+      ></lay-date-picker>
+    </lay-space>
+    <lay-space>
+      日期：
+      <lay-date-picker
+        type="date"
+        :disabledDate="disabledDate"
+        v-model="date4"
+        defaultValue="2024-10-16"
+        placeholder="2024-10-01/02、2024-09-02"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="date"
+        :disabledDate="disabledDate"
+        range
+        defaultValue="2024-10-16"
+        v-model="date4range"
+        placeholder="2024-10-01/02、2024-09-02 range"
+      ></lay-date-picker>
+    </lay-space>
+    <lay-space>
+      日期时分秒：
+      <lay-date-picker
+        type="datetime"
+        :disabledDate="disabledDateTime"
+        v-model="date5"
+        defaultValue="2024-10-16"
+        placeholder="2024-10-12 01:00:00"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="datetime"
+        :disabledDate="disabledDateTime"
+        range
+        defaultValue="2024-10-16"
+        v-model="date5range"
+        placeholder="2024-10-12 01:00:00"
+      ></lay-date-picker>
+    </lay-space>
+    <lay-space>
+      时分秒：
+      <lay-date-picker
+        type="time"
+        :disabledDate="disabledTime"
+        v-model="date6"
+        defaultValue="2024-10-16"
+        placeholder="当前之后时间禁止"
+      ></lay-date-picker>
+      <lay-date-picker
+        type="time"
+        :disabledDate="disabledTime"
+        range
+        defaultValue="2024-10-16"
+        v-model="date6range"
+        placeholder="当前之后时间禁止"
+      ></lay-date-picker>
+    </lay-space>
+  </lay-space>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date1 = ref();
+const date1range = ref();
+const date2 = ref();
+const date2range = ref();
+const date3 = ref();
+const date3range = ref();
+const date4 = ref();
+const date4range = ref();
+const date5 = ref();
+const date5range = ref();
+const date6 = ref();
+const date6range = ref();
+
+const disabledDateYear = (date) => {
+  return date.getFullYear() % 2;
+};
+
+const disabledDateMonth = (date) => {
+  return date.getMonth() + 1 === 4 || date.getMonth() + 1 === 6;
+};
+
+const disabledDateYearMonth = (date) => {
+  return date.getFullYear() === 2024 && [1, 3].includes(date.getMonth() + 1)
+};
+
+const isSameDay = (dateA, dateB) => {
+    return (
+      dateA.getFullYear() === dateB.getFullYear() &&
+      dateA.getMonth() === dateB.getMonth() &&
+      dateA.getDate() === dateB.getDate()
+    );
+  };
+const disabledS = [
+  new Date("2024-10-01"),
+  new Date("2024-10-03"),
+  new Date("2024-09-02"),
+];
+
+const disabledDate = (date) => {
+  return disabledS.some((itemDate) => {
+    return isSameDay(itemDate, date);
+  });
+};
+
+const disabledDateTime = (date) => {
+  return date.getTime() === new Date("2024-10-12T01:00:00").getTime();
+}
+
+const disabledTime = (date) => {
+  return date.getTime() > Date.now();
+}
+</script>
+ 
+:::
+
+::: title 最大或最小日期
 :::
 
 ::: demo 通过预设`min`、`max`属性限制组件选择的最大值与最小值。
@@ -370,8 +542,8 @@ const shortcuts2 = [
 | placeholder     | `input` 占位符                           | `string` `Array<string>`                           | --                  | —                                                   | —        |
 | allow-clear     | 允许清空                                                                 | `boolean`                                                                | `false`             | --                                                  | --       |
 | simple          | 一次性选择，无需点击确认按钮                                             | `boolean`                                                                | `false`             | --                                                  | --       |
-| max             | 最大可选日期                                            | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
-| min             | 最小可选日期                                           | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
+| max             | 最大可选日期 存在 `disabled-date` 此属性无效                                          | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
+| min             | 最小可选日期 存在 `disabled-date` 此属性无效                                         | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
 | range            | 是否范围选择                                                             | `boolean`                                                                | `false`             | --                                                  | --       |
 | range-separator | 范围分隔符                                                               | `string`                                                                 | `至`                | --                                                  | --       |
 | size            | 尺寸                                                                     | `string`                                                                 | `lg` `md` `sm` `xs` | `md`                                                | --       |
@@ -384,6 +556,7 @@ const shortcuts2 = [
 | default-time    | 范围日期 `type=datetime` 时分秒默认时间                                  | `string` `Array<string>`                                                 | --                  | 例如`12:30:00`                                      | `2.17.2` |
 | content-style   | 内容自定义样式                                                           | `StyleValue`                                                             | --                  | --                                                  | --       |
 | content-class   | 内容自定义 Class                                                         | `string` `Array<string \| object>` `object`                              | --                  | --                                                  | --       |
+| disabled-date       | 判断是否禁止日期的函数，接收一个 `Date` 对象参数，并返回一个 `boolean` 用于是否禁止。           |  `(value: Date)=> boolean`            | --             | --|              `2.19.0`                    |      
 | year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
 | shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | --             | --|              `2.19.0`                    |  
 
diff --git a/packages/component/component/datePicker/__tests__/datePicker.test.tsx b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
index dc9c4d0a..e389fa83 100644
--- a/packages/component/component/datePicker/__tests__/datePicker.test.tsx
+++ b/packages/component/component/datePicker/__tests__/datePicker.test.tsx
@@ -3,7 +3,7 @@ import { afterEach, describe, expect, test } from "vitest";
 import { sleep } from "../../../test-utils";
 
 import LayDatePicker from "../index.vue";
-import Date from "../component/common/Date.vue";
+import DateComponent from "../component/common/Date.vue";
 import Year from "../component/common/Year.vue";
 import Footer from "../component/common/Footer.vue";
 // import Month from "../component/common/Month.vue";
@@ -31,7 +31,7 @@ describe("LayDatePicker date type", () => {
     await mockInputClick(wrapper);
 
     const component = wrapper.findComponent(LayDatePicker);
-    const DateInstance = wrapper.findComponent(Date);
+    const DateInstance = wrapper.findComponent(DateComponent);
 
     const [YearSpan, MonthSpan] = DateInstance.findAll(
       ".layui-laydate-header .laydate-set-ym span"
@@ -79,7 +79,7 @@ describe("LayDatePicker date type", () => {
 
     expect((component.props() as any).modelValue).toBe("2024/10/02");
 
-    const DateInstance = wrapper.findComponent(Date);
+    const DateInstance = wrapper.findComponent(DateComponent);
     const [YearSpan, MonthSpan] = DateInstance.findAll(
       ".layui-laydate-header .laydate-set-ym span"
     );
@@ -106,7 +106,7 @@ describe("LayDatePicker date type", () => {
     const datePicker = wrapper.findComponent(LayDatePicker);
 
     await mockInputClick(wrapper);
-    const DateInstance = wrapper.findComponent(Date);
+    const DateInstance = wrapper.findComponent(DateComponent);
 
     const dateCurrent = DateInstance.findAll(
       ".layui-laydate-content td:not(.laydate-day-prev)"
@@ -137,7 +137,7 @@ describe("LayDatePicker date type", () => {
     });
 
     await mockInputClick(wrapper);
-    const DateInstance = wrapper.findComponent(Date);
+    const DateInstance = wrapper.findComponent(DateComponent);
 
     const dateCurrent = DateInstance.findAll(
       ".layui-laydate-content td:not(.laydate-day-prev)"
@@ -192,4 +192,70 @@ describe("LayDatePicker date type", () => {
       dayjsToString(time.getTime() - 86400000, "D")
     );
   });
+
+  test("disabled-date", async () => {
+    const wrapper = mount({
+      setup() {
+        const isSameDay = (dateA: Date, dateB: Date) => {
+          return (
+            dateA.getFullYear() === dateB.getFullYear() &&
+            dateA.getMonth() === dateB.getMonth() &&
+            dateA.getDate() === dateB.getDate()
+          );
+        };
+        const disabledS = [
+          new Date("2024-10-01"),
+          new Date("2024-10-03"),
+          new Date("2024-09-02"),
+        ];
+
+        const disabledDate = (date: Date): boolean => {
+          return disabledS.some((itemDate: any) => {
+            return isSameDay(itemDate, date);
+          });
+        };
+
+        return () => (
+          <LayDatePicker
+            type="date"
+            defaultValue="2024-10-16"
+            disabledDate={disabledDate}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const DateInstance = wrapper.findComponent(DateComponent);
+
+    const dateCurrent202410 = DateInstance.findAll(
+      ".layui-laydate-content td:not(.laydate-day-prev)"
+    );
+
+    dateCurrent202410.forEach((date, index) => {
+      // 2024-10 1/3 日禁止
+      if (index === 0 || index === 2) {
+        expect(date.element.classList.contains("layui-disabled")).toBeTruthy();
+      } else {
+        expect(date.element.classList.contains("layui-disabled")).toBeFalsy();
+      }
+    });
+
+    const preMonth = DateInstance.find(".layui-icon-left");
+    await preMonth.trigger("click");
+
+    const dateCurrent202409 = DateInstance.findAll(
+      ".layui-laydate-content td:not(.laydate-day-prev)"
+    );
+
+    dateCurrent202409.forEach((date, index) => {
+      // 2024-09-02 日禁止
+      if (index === 1) {
+        expect(date.element.classList.contains("layui-disabled")).toBeTruthy();
+      } else {
+        expect(date.element.classList.contains("layui-disabled")).toBeFalsy();
+      }
+    });
+  });
 });
diff --git a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
index d16b7224..504d14a8 100644
--- a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
@@ -249,4 +249,35 @@ describe("LayDatePicker year type", () => {
 
     expect(DatePicker.props("modelValue")).toBe("2026");
   });
+
+  test("year disabled-date", async () => {
+    const wrapper = mount({
+      setup() {
+        const disabledDate = (date: Date): boolean => {
+          return !!(date.getFullYear() % 2);
+        };
+
+        return () => (
+          <LayDatePicker
+            modelValue="2024"
+            type="year"
+            disabledDate={disabledDate}
+          ></LayDatePicker>
+        );
+      },
+    });
+
+    await mockInputClick(wrapper);
+
+    const YearInstance = wrapper.findComponent(Year);
+    const currentLi = YearInstance.find(
+      ".laydate-year-list .layui-laydate-current"
+    );
+
+    const preLi = currentLi.element.previousElementSibling;
+    const nextLi = currentLi.element.nextElementSibling;
+
+    expect(preLi?.className).toBe("layui-disabled");
+    expect(nextLi?.className).toBe("layui-disabled");
+  });
 });
diff --git a/packages/component/component/datePicker/__tests__/yearmonth.test.tsx b/packages/component/component/datePicker/__tests__/yearmonth.test.tsx
index f2bf2b2e..dcdcea0c 100644
--- a/packages/component/component/datePicker/__tests__/yearmonth.test.tsx
+++ b/packages/component/component/datePicker/__tests__/yearmonth.test.tsx
@@ -5,6 +5,8 @@ import { nextTick } from "vue";
 import { sleep } from "../../../test-utils";
 import { getYears } from "../util";
 
+import Month from "../component/common/Month.vue";
+
 const getInputElementValue = (el: VueWrapper) => el.get("input").element.value;
 const getInstanceModelValue = (el: VueWrapper) =>
   (el.vm.$props as any).modelValue!;
@@ -150,4 +152,43 @@ describe("LayDatePicker yearmonth type", () => {
       "2022-04"
     );
   });
+
+  it("yearmonth disabled-date", async () => {
+    const wrapper = mount(LayDatePicker, {
+      props: {
+        type: "yearmonth",
+        modelValue: "2024-01",
+        disabledDate(date: Date): boolean {
+          return (
+            date.getFullYear() === 2023 && [1, 3].includes(date.getMonth() + 1)
+          );
+        },
+      },
+    });
+
+    await clickInput(wrapper);
+
+    const MonthInstance = wrapper.findComponent(Month);
+    const Lis2024 = MonthInstance.findAll(".laydate-month-list list");
+
+    Lis2024.forEach((li) => {
+      expect(li.element.classList.contains("layui-disabled")).toBeFalsy();
+    });
+
+    // 切换至上一年
+    const preBtn = MonthInstance.find(".layui-icon-prev");
+    await preBtn.trigger("click");
+    await sleep();
+
+    const Lis2023 = MonthInstance.findAll(".laydate-month-list list");
+
+    Lis2023.forEach((li, index) => {
+      // 1/3 月禁止
+      if (index === 0 || index === 2) {
+        expect(li.element.classList.contains("layui-disabled")).toBeTruthy();
+      } else {
+        expect(li.element.classList.contains("layui-disabled")).toBeFalsy();
+      }
+    });
+  });
 });
diff --git a/packages/component/component/datePicker/component/common/DateContent.vue b/packages/component/component/datePicker/component/common/DateContent.vue
index 91f7d63c..06e012c0 100644
--- a/packages/component/component/datePicker/component/common/DateContent.vue
+++ b/packages/component/component/datePicker/component/common/DateContent.vue
@@ -79,32 +79,34 @@ const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 const emits = defineEmits(["update:modelValue", "hover-cell"]);
 
 // 判断日期是否可以点击
-const cellDisabled = computed(() => {
-  return (item: DateContentSingleDateObject) => {
-    if (item.type !== "current" && DatePickerContext.range) {
-      return true;
-    }
-
-    if (
-      DatePickerContext.min &&
-      dayjs(item.value).isBefore(dayjs(DatePickerContext.min), "day")
-    ) {
-      return true;
-    }
-
-    if (
-      DatePickerContext.max &&
-      dayjs(item.value).isAfter(dayjs(DatePickerContext.max), "day")
-    ) {
-      return true;
-    }
-    return false;
-  };
-});
+const cellDisabled = (item: DateContentSingleDateObject) => {
+  if (item.type !== "current" && DatePickerContext.range) {
+    return true;
+  }
+
+  if (DatePickerContext.disabledDate) {
+    return DatePickerContext.disabledDate(dayjs(item.value).toDate());
+  }
+
+  if (
+    DatePickerContext.min &&
+    dayjs(item.value).isBefore(dayjs(DatePickerContext.min), "day")
+  ) {
+    return true;
+  }
+
+  if (
+    DatePickerContext.max &&
+    dayjs(item.value).isAfter(dayjs(DatePickerContext.max), "day")
+  ) {
+    return true;
+  }
+  return false;
+};
 
 // 点击日期
 const handleDayClick = (item: DateContentSingleDateObject) => {
-  if (cellDisabled.value(item)) return;
+  if (cellDisabled(item)) return;
 
   if (DatePickerContext.range && item.type !== "current") return;
 
@@ -112,7 +114,7 @@ const handleDayClick = (item: DateContentSingleDateObject) => {
 };
 
 const dayItemMouseEnter = (item: DateContentSingleDateObject) => {
-  if (!DatePickerContext.range || cellDisabled.value(item)) return;
+  if (!DatePickerContext.range || cellDisabled(item)) return;
 
   emits("hover-cell", item.value);
 };
diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
index 8bae2856..356b6377 100644
--- a/packages/component/component/datePicker/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -221,7 +221,6 @@ function onPick(dates: Dayjs | Array<Dayjs>) {
 <template>
   <div :class="classes" :size="size">
     <lay-dropdown
-      v-if="!props.static"
       ref="dropdownRef"
       :disabled="disabled"
       :autoFitMinWidth="false"
diff --git a/packages/component/component/datePicker/component/common/Month.vue b/packages/component/component/datePicker/component/common/Month.vue
index c23d8967..f2fa7e07 100644
--- a/packages/component/component/datePicker/component/common/Month.vue
+++ b/packages/component/component/datePicker/component/common/Month.vue
@@ -88,45 +88,45 @@ const MONTH_NAME = computed(() => [
 ]);
 
 // 判断单元格是否可以点击(禁用)
-const cellDisabled = computed(() => {
+const cellDisabled = (month: number) => {
+  if (DatePickerContext.disabledDate) {
+    return DatePickerContext.disabledDate(fullMonthDay(month).toDate());
+  }
+
   if (props.dateType === "month") {
-    return (month: number) => {
-      if (
-        DatePickerContext.min &&
-        month < dayjs(DatePickerContext.min, DatePickerContext.format).month()
-      ) {
-        return true;
-      }
-      if (
-        DatePickerContext.max &&
-        month > dayjs(DatePickerContext.max, DatePickerContext.format).month()
-      ) {
-        return true;
-      }
-      return false;
-    };
+    if (
+      DatePickerContext.min &&
+      month < dayjs(DatePickerContext.min, DatePickerContext.format).month()
+    ) {
+      return true;
+    }
+    if (
+      DatePickerContext.max &&
+      month > dayjs(DatePickerContext.max, DatePickerContext.format).month()
+    ) {
+      return true;
+    }
+    return false;
   } else {
-    return (month: number) => {
-      const fullMonth = fullMonthDay(month);
-
-      if (
-        DatePickerContext.min &&
-        fullMonth.isBefore(DatePickerContext.min, "month")
-      ) {
-        return true;
-      }
-
-      if (
-        DatePickerContext.max &&
-        fullMonth.isAfter(DatePickerContext.max, "month")
-      ) {
-        return true;
-      }
-
-      return false;
-    };
+    const fullMonth = fullMonthDay(month);
+
+    if (
+      DatePickerContext.min &&
+      fullMonth.isBefore(DatePickerContext.min, "month")
+    ) {
+      return true;
+    }
+
+    if (
+      DatePickerContext.max &&
+      fullMonth.isAfter(DatePickerContext.max, "month")
+    ) {
+      return true;
+    }
+
+    return false;
   }
-});
+};
 
 const isActive = computed(() => {
   return (month: number, value: BasePanelProps["modelValue"]) => {
@@ -138,7 +138,7 @@ const isActive = computed(() => {
 
 // 点击月份
 const handleMonthClick = (month: number) => {
-  if (cellDisabled.value(month)) {
+  if (cellDisabled(month)) {
     return;
   }
 
@@ -151,7 +151,7 @@ const handleMonthClick = (month: number) => {
 };
 
 const handleMonthMouseenter = (month: number) => {
-  if (cellDisabled.value(month) || !DatePickerContext.range) {
+  if (cellDisabled(month) || !DatePickerContext.range) {
     return;
   }
 
diff --git a/packages/component/component/datePicker/component/common/Time.vue b/packages/component/component/datePicker/component/common/Time.vue
index 4a54cfab..a9693241 100644
--- a/packages/component/component/datePicker/component/common/Time.vue
+++ b/packages/component/component/datePicker/component/common/Time.vue
@@ -85,54 +85,56 @@ const hmsMap = {
   ss: "second",
 } as const;
 
-const cellDisabled = computed(() => {
-  return (type: keyof typeof hmsMap, value: number) => {
-    const haveValue = typeof value !== "undefined";
-    const _hms: Record<string, number | null> = {
-      hh: haveValue ? hms.value.hh : dayjs().hour(),
-      mm: haveValue ? hms.value.mm : dayjs().minute(),
-      ss: haveValue ? hms.value.ss : dayjs().second(),
-    };
-    haveValue && (_hms[type!] = value);
+const cellDisabled = (type: keyof typeof hmsMap, value: number) => {
+  const haveValue = typeof value !== "undefined";
+  const _hms: Record<string, number | null> = {
+    hh: haveValue ? hms.value.hh : dayjs().hour(),
+    mm: haveValue ? hms.value.mm : dayjs().minute(),
+    ss: haveValue ? hms.value.ss : dayjs().second(),
+  };
+  haveValue && (_hms[type!] = value);
 
-    const currentDate = (props.modelValue || props.showDate)
-      .startOf("day")
-      .hour(_hms.hh as number)
-      .minute(_hms.mm as number)
-      .second(_hms.ss as number);
+  const currentDate = (props.modelValue || props.showDate)
+    .startOf("day")
+    .hour(_hms.hh as number)
+    .minute(_hms.mm as number)
+    .second(_hms.ss as number);
 
-    const diffType = hmsMap[type] as (typeof hmsMap)[keyof typeof hmsMap];
+  const diffType = hmsMap[type] as (typeof hmsMap)[keyof typeof hmsMap];
 
-    if (
-      DatePickerContext.min &&
-      currentDate.isBefore(
-        dayjs(DatePickerContext.min, DatePickerContext.format),
-        diffType
-      )
-    ) {
-      return true;
-    }
+  if (DatePickerContext.disabledDate) {
+    return DatePickerContext.disabledDate(currentDate.toDate());
+  }
 
-    if (
-      DatePickerContext.max &&
-      currentDate.isAfter(
-        dayjs(DatePickerContext.max, DatePickerContext.format),
-        diffType
-      )
-    ) {
-      return true;
-    }
+  if (
+    DatePickerContext.min &&
+    currentDate.isBefore(
+      dayjs(DatePickerContext.min, DatePickerContext.format),
+      diffType
+    )
+  ) {
+    return true;
+  }
 
-    return false;
-  };
-});
+  if (
+    DatePickerContext.max &&
+    currentDate.isAfter(
+      dayjs(DatePickerContext.max, DatePickerContext.format),
+      diffType
+    )
+  ) {
+    return true;
+  }
+
+  return false;
+};
 
 // 点击时间 - hms
 const chooseTime = (e: any) => {
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
 
-    if (cellDisabled.value(type, parseInt(value))) {
+    if (cellDisabled(type, parseInt(value))) {
       return;
     }
 
diff --git a/packages/component/component/datePicker/component/common/Year.vue b/packages/component/component/datePicker/component/common/Year.vue
index d0588586..bd1b1abd 100644
--- a/packages/component/component/datePicker/component/common/Year.vue
+++ b/packages/component/component/datePicker/component/common/Year.vue
@@ -4,7 +4,7 @@
       <slot name="header" :yearList="yearRange">
         <lay-icon
           type="layui-icon-prev"
-          @click="currentDate -= DatePickerContext.yearPage"
+          @click="handleChangeShowYear(-DatePickerContext.yearPage)"
         ></lay-icon>
         <div class="laydate-set-ym">
           <span class="laydate-time-text">
@@ -13,7 +13,7 @@
         </div>
         <lay-icon
           type="layui-icon-next"
-          @click="currentDate += DatePickerContext.yearPage"
+          @click="handleChangeShowYear(DatePickerContext.yearPage)"
         ></lay-icon>
       </slot>
     </div>
@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import type { BasePanelProps } from "../interface";
 
-import dayjs from "dayjs";
+import dayjs, { type Dayjs } from "dayjs";
 import { computed, ref, watch, inject } from "vue";
 
 import LayIcon from "../../../icon";
@@ -63,11 +63,11 @@ const emits = defineEmits(["pick", "hover-cell"]);
 const DatePickerContext = inject(DATE_PICKER_CONTEXT)!;
 
 const currentYear = ref<number | null>();
-const currentDate = ref<number>(dayjs().year());
+const currentDate = ref<Dayjs>(dayjs());
 
 const yearList = computed<number[]>(() =>
   getYears(
-    currentDate.value,
+    currentDate.value.year(),
     DatePickerContext.yearPage
     // DatePickerContext.yearStep
   )
@@ -79,7 +79,7 @@ watch(
   ([modelValue, showDate]) => {
     currentYear.value = modelValue ? modelValue.year() : null;
 
-    currentDate.value = (modelValue || showDate)?.year();
+    currentDate.value = modelValue || showDate;
   },
   {
     immediate: true,
@@ -87,21 +87,25 @@ watch(
 );
 
 // 判断单元格是否可以点击(禁用)
-const cellDisabled = computed(() => {
-  return (item: number) => {
-    if (DatePickerContext.min && item < dayjs(DatePickerContext.min).year()) {
-      return true;
-    }
-    if (DatePickerContext.max && item > dayjs(DatePickerContext.max).year()) {
-      return true;
-    }
-    return false;
-  };
-});
+const cellDisabled = (item: number) => {
+  if (DatePickerContext.disabledDate) {
+    return DatePickerContext.disabledDate(
+      currentDate.value.year(item).toDate()
+    );
+  }
+
+  if (DatePickerContext.min && item < dayjs(DatePickerContext.min).year()) {
+    return true;
+  }
+  if (DatePickerContext.max && item > dayjs(DatePickerContext.max).year()) {
+    return true;
+  }
+  return false;
+};
 
 // 点击年份
 const handleYearClick = (item: number) => {
-  if (cellDisabled.value(item)) {
+  if (cellDisabled(item)) {
     return true;
   }
 
@@ -110,10 +114,14 @@ const handleYearClick = (item: number) => {
 };
 
 const handleYearMouseenter = (item: number) => {
-  if (cellDisabled.value(item) || !DatePickerContext.range) {
+  if (cellDisabled(item) || !DatePickerContext.range) {
     return;
   }
 
   emits("hover-cell", dayjs().year(item));
 };
+
+const handleChangeShowYear = (value: number) => {
+  currentDate.value = currentDate.value.year(currentDate.value.year() + value);
+};
 </script>
diff --git a/packages/component/component/datePicker/component/interface.ts b/packages/component/component/datePicker/component/interface.ts
index e30aefcf..ee688b85 100644
--- a/packages/component/component/datePicker/component/interface.ts
+++ b/packages/component/component/datePicker/component/interface.ts
@@ -12,13 +12,13 @@ export interface BasePanelProps {
   classes?: (val: Dayjs) => Record<string, boolean>;
 }
 
-export type UniquePickerProps = DatePickerContextType & {
+export interface UniquePickerProps extends DatePickerContextType {
   modelValue: Exclude<DatePickerValue, Array<Dayjs>>;
-};
+}
 
-export type RangePickerProps = DatePickerContextType & {
+export interface RangePickerProps extends DatePickerContextType {
   modelValue: Array<Dayjs>;
-};
+}
 
 export interface DateContentSingleDateObject {
   day: number;
diff --git a/packages/component/component/datePicker/hook/useDatePicker.ts b/packages/component/component/datePicker/hook/useDatePicker.ts
index 179561b8..a0badc10 100644
--- a/packages/component/component/datePicker/hook/useDatePicker.ts
+++ b/packages/component/component/datePicker/hook/useDatePicker.ts
@@ -7,7 +7,7 @@ import type {
 } from "../interface";
 import { type Dayjs } from "dayjs";
 
-import { computed } from "vue";
+import { computed, reactive, toRefs } from "vue";
 import DatePicker from "../component/DatePicker.vue";
 import DateRange from "../component/DateRange.vue";
 import TimeRange from "../component/TimeRange.vue";
@@ -44,6 +44,10 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
     }
   });
 
+  const typeMap = computed(() => {
+    return TYPE_MAP[props.type];
+  });
+
   const _format = computed(() => {
     return props.format || typeMap.value.format;
   });
@@ -83,8 +87,11 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
     };
   });
 
-  const typeMap = computed(() => {
-    return TYPE_MAP[props.type];
+  const datePickerContext = reactive({
+    ...toRefs(props),
+    modelValue: initDate,
+    format: _format,
+    inputFormat: _inputFormat,
   });
 
   const RenderComponent = computed(() => {
@@ -94,5 +101,6 @@ export const useDatePicker = (props: RequiredDatePickerProps) => {
   return {
     RenderComponent,
     renderComponentProps,
+    datePickerContext,
   };
 };
diff --git a/packages/component/component/datePicker/index.vue b/packages/component/component/datePicker/index.vue
index 82252ab1..a40d5f25 100644
--- a/packages/component/component/datePicker/index.vue
+++ b/packages/component/component/datePicker/index.vue
@@ -45,13 +45,14 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
 });
 
 const { size } = useProps(props);
-const { RenderComponent, renderComponentProps } = useDatePicker(props);
+const { RenderComponent, renderComponentProps, datePickerContext } =
+  useDatePicker(props);
 
 const format = computed<string>(() => {
   return props.inputFormat ?? renderComponentProps.value.inputFormat!;
 });
 
-provide(DATE_PICKER_CONTEXT, renderComponentProps.value);
+provide(DATE_PICKER_CONTEXT, datePickerContext);
 
 defineOptions({
   name: "LayDatePicker",
diff --git a/packages/component/component/datePicker/interface.ts b/packages/component/component/datePicker/interface.ts
index f0255099..5e02c6f2 100644
--- a/packages/component/component/datePicker/interface.ts
+++ b/packages/component/component/datePicker/interface.ts
@@ -48,6 +48,7 @@ export interface DatePickerProps {
     | Array<DatePickerModelValueSingleType>;
   contentStyle?: StyleValue;
   contentClass?: CommonClass;
+  disabledDate?: (date: Date) => boolean;
   /**
    * 年份分页
    * @version 2.19.0
@@ -91,9 +92,9 @@ export type DatePickerEmits = {
 
 export type DatePickerValue = Dayjs | Array<Dayjs> | null | undefined;
 
-export type DatePickerContextType = RequiredDatePickerProps & {
+export interface DatePickerContextType extends RequiredDatePickerProps {
   modelValue: DatePickerValue;
-};
+}
 
 export const DATE_PICKER_CONTEXT: InjectionKey<DatePickerContextType> =
   Symbol("LayDatePicker");
diff --git a/packages/json-schema-form/src/component/__tests__/form.test.tsx b/packages/json-schema-form/src/component/__tests__/form.test.tsx
index 6416b3be..41dbbb8a 100644
--- a/packages/json-schema-form/src/component/__tests__/form.test.tsx
+++ b/packages/json-schema-form/src/component/__tests__/form.test.tsx
@@ -190,6 +190,7 @@ describe("LayJsonSchemaForm", () => {
     inputDom.setValue("456");
     dateDom.setValue("2024-03-05");
     await nextTick();
+    await nextTick();
     expect(inputDom.element.value).toBe("456");
     expect(dateDom.element.value).toBe("2024-03-05");
 
-- 
Gitee


From bb4b282b9ecd4cbe4d640608a317ccfe428d64eb Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 19:11:15 +0800
Subject: [PATCH 43/45] fix: input value check disabledDate/max/min

---
 .../datePicker/__tests__/yearPanel.test.tsx   | 10 +++++
 .../component/common/InputBlock.vue           | 37 ++++++++++++++++---
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
index 504d14a8..8280075b 100644
--- a/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
+++ b/packages/component/component/datePicker/__tests__/yearPanel.test.tsx
@@ -279,5 +279,15 @@ describe("LayDatePicker year type", () => {
 
     expect(preLi?.className).toBe("layui-disabled");
     expect(nextLi?.className).toBe("layui-disabled");
+
+    const inputDom = wrapper.find("input");
+
+    inputDom.element.value = "2025";
+    await inputDom.trigger("input");
+    await inputDom.trigger("change");
+
+    await sleep();
+    const datePicker = wrapper.findComponent(LayDatePicker);
+    expect(datePicker.props("modelValue")).toEqual("2024");
   });
 });
diff --git a/packages/component/component/datePicker/component/common/InputBlock.vue b/packages/component/component/datePicker/component/common/InputBlock.vue
index 356b6377..3d817093 100644
--- a/packages/component/component/datePicker/component/common/InputBlock.vue
+++ b/packages/component/component/datePicker/component/common/InputBlock.vue
@@ -100,11 +100,26 @@ const handleEndInput = (value: string) => {
   }
 };
 
+const checkIsDisabled = (date: Dayjs) => {
+  if (props.disabledDate) {
+    return props.disabledDate(date.toDate());
+  }
+
+  if (props.min && date.isBefore(DatePickerContext.min)) {
+    return true;
+  }
+
+  if (props.max && date.isAfter(DatePickerContext.max)) {
+    return true;
+  }
+  return false;
+};
+
 const handleChange = () => {
   if (currentInputValue.value) {
     const checkDate = dayjs(inputValue.value as string, props.format);
 
-    if (checkDate.isValid()) {
+    if (checkDate.isValid() && !checkIsDisabled(checkDate)) {
       emits("update:modelValue", formatOutPutValue(checkDate)); //checkDate.format(props.format)
       currentInputValue.value = null;
     }
@@ -120,7 +135,10 @@ const handleStartChange = () => {
     props.format
   );
 
-  if (date.isValid()) {
+  if (
+    date.isValid() &&
+    (inputValue.value?.[1] ? date.isBefore(inputValue.value?.[1]) : true)
+  ) {
     currentInputValue.value = [
       date.format(props.format),
       inputValue.value?.[1] || null,
@@ -131,7 +149,10 @@ const handleStartChange = () => {
       dayjs(currentInputValue.value[1] || null, props.format),
     ];
 
-    if (checkRangeValue(modelValue)) {
+    if (
+      checkRangeValue(modelValue) &&
+      modelValue.every((date) => !checkIsDisabled(date))
+    ) {
       emits("update:modelValue", formatOutPutValue(modelValue));
       currentInputValue.value = null;
     }
@@ -144,7 +165,10 @@ const handleEndChange = () => {
     props.format
   );
 
-  if (date.isValid()) {
+  if (
+    date.isValid() &&
+    (inputValue.value?.[0] ? date.isAfter(inputValue.value?.[0]) : true)
+  ) {
     currentInputValue.value = [
       inputValue.value?.[0] || null,
       date.format(props.format),
@@ -155,7 +179,10 @@ const handleEndChange = () => {
       date,
     ];
 
-    if (checkRangeValue(modelValue)) {
+    if (
+      checkRangeValue(modelValue) &&
+      modelValue.every((date) => !checkIsDisabled(date))
+    ) {
       emits("update:modelValue", formatOutPutValue(modelValue));
       currentInputValue.value = null;
     }
-- 
Gitee


From d014fc0e4a49cebfb561723852acb27c8dfd3ea2 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 19:19:57 +0800
Subject: [PATCH 44/45] docs: update

---
 docs/src/document/zh-CN/components/datePicker.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 4ef0e67f..0ab10691 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -542,6 +542,7 @@ const shortcuts2 = [
 | placeholder     | `input` 占位符                           | `string` `Array<string>`                           | --                  | —                                                   | —        |
 | allow-clear     | 允许清空                                                                 | `boolean`                                                                | `false`             | --                                                  | --       |
 | simple          | 一次性选择，无需点击确认按钮                                             | `boolean`                                                                | `false`             | --                                                  | --       |
+| disabled-date       | 判断是否禁止日期的函数，接收一个 `Date` 对象参数，并返回一个 `boolean` 用于是否禁止           |  `(value: Date)=> boolean`            | --             | --|              `2.19.0`                    |      
 | max             | 最大可选日期 存在 `disabled-date` 此属性无效                                          | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
 | min             | 最小可选日期 存在 `disabled-date` 此属性无效                                         | `DatePickerModelValueSingleType `                                                                 | --                  | --                                                  | --       |
 | range            | 是否范围选择                                                             | `boolean`                                                                | `false`             | --                                                  | --       |
@@ -556,7 +557,6 @@ const shortcuts2 = [
 | default-time    | 范围日期 `type=datetime` 时分秒默认时间                                  | `string` `Array<string>`                                                 | --                  | 例如`12:30:00`                                      | `2.17.2` |
 | content-style   | 内容自定义样式                                                           | `StyleValue`                                                             | --                  | --                                                  | --       |
 | content-class   | 内容自定义 Class                                                         | `string` `Array<string \| object>` `object`                              | --                  | --                                                  | --       |
-| disabled-date       | 判断是否禁止日期的函数，接收一个 `Date` 对象参数，并返回一个 `boolean` 用于是否禁止。           |  `(value: Date)=> boolean`            | --             | --|              `2.19.0`                    |      
 | year-page       | 年份选择器每页年份的个数           |  `number`            | `15`             | --|              `2.19.0`                    |      
 | shortcuts       | 设置快捷选项，需要传入数组对象       |  `Array<Shortcuts>`            | --             | --|              `2.19.0`                    |  
 
-- 
Gitee


From 924f875006120387790169f5cc5e65388aab89c2 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Wed, 16 Oct 2024 19:22:10 +0800
Subject: [PATCH 45/45] docs: update

---
 docs/src/document/zh-CN/components/datePicker.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/document/zh-CN/components/datePicker.md b/docs/src/document/zh-CN/components/datePicker.md
index 0ab10691..de5326e7 100644
--- a/docs/src/document/zh-CN/components/datePicker.md
+++ b/docs/src/document/zh-CN/components/datePicker.md
@@ -581,9 +581,9 @@ const shortcuts2 = [
 
 ```ts
 
-import type { ConfigType } from "dayjs";
+import type { Dayjs } from "dayjs";
 
-type DatePickerModelValueSingleType = ConfigType;
+type DatePickerModelValueSingleType = string | number | Date | Dayjs | null | undefined;
 
 interface Shortcuts {
   text: string | number;
-- 
Gitee