♻️(component): datePicker再次重构,加入date与datetime的范围选择

package/component/src/component/datePicker/components/DatePanel.vue

@@ -31,11 +31,10 @@
           ></i
         >
       </div>
-      <DateContent
+      <DateContent :date-list="dateList" v-model="Day" @simple="footOnOk"></DateContent>
-        :date-list="datePicker.dateList"
+      <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-        v-model="datePicker.currentDay.value"
+        <span v-if="datePicker.type === 'datetime'" @click="datePicker.showPanel.value='time'" class="laydate-btns-time">选择时间</span>
-      ></DateContent>
+      </PanelFoot>
-      <PanelFoot></PanelFoot>
     </div>
   </div>
 </template>
@@ -45,26 +44,35 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from "vue";
+import { inject, ref, watch } from 'vue';
-import { provideType } from "../interface";
+import { provideType } from '../interface';
-import { setDateList } from "../day";
+import { setDateList } from '../day';
-import PanelFoot from "./PanelFoot.vue";
+import PanelFoot from './PanelFoot.vue'
-import DateContent from "./components/DateContent.vue";
+import DateContent from './components/DateContent.vue'
+import dayjs from 'dayjs';
 
-const datePicker: provideType = inject("datePicker") as provideType;
+export interface TimePanelProps {
+  modelValue: number;
+}
+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>([]);
 
 // 监听年月, 刷新日期
 watch(
   [datePicker.currentYear, datePicker.currentMonth],
   () => {
-    datePicker.dateList.value = setDateList(
+    dateList.value = setDateList(datePicker.currentYear.value, datePicker.currentMonth.value);
-      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") {
@@ -81,4 +89,22 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
     datePicker.currentMonth.value = month;
   }
 };
+
+//关闭回调
+const footOnOk = () => {
+  emits('update:modelValue', Day.value)
+  datePicker.ok()
+}
+
+//现在回调
+const footOnNow = () => {
+  datePicker.currentYear.value=dayjs().year();
+  datePicker.currentMonth.value=dayjs().month();
+  Day.value = new Date(new Date().toDateString()).getTime();
+}
+
+//清空回调
+const footOnClear = () => {
+  Day.value = -1
+}
 </script>

package/component/src/component/datePicker/components/DateRange.vue

@@ -0,0 +1,216 @@
+<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 || '--' }}年</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">{{ startTime.month + 1 }}月</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.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">{{ startTime.month + 2 }}月</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" @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">
+export default {
+  name: "DateRange",
+};
+</script>
+<script lang="ts" setup>
+import { 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 dayjs from 'dayjs';
+export interface DateRangeProps {
+  startTime: string;
+  endTime: string;
+}
+const props = withDefaults(defineProps<DateRangeProps>(), {});
+const emits = defineEmits(['update:modelValue', 'update:startTime', 'update:endTime']);
+const datePicker: provideType = inject('datePicker') as provideType;
+
+const prevDateList = ref<any>([]);
+const nextDateList = ref<any>([]);
+const startTime = reactive({
+  year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
+  month: props.startTime ? dayjs(props.startTime).month() : dayjs().month(),
+  day: props.startTime ? dayjs(props.startTime).startOf('day').valueOf() : -1,
+  hms: {
+    hh: props.startTime ? dayjs(props.startTime).hour() : 0,
+    mm: props.startTime ? dayjs(props.startTime).minute() : 0,
+    ss: props.startTime ? dayjs(props.startTime).second() : 0,
+  }
+})
+const endTime = reactive({
+  year: props.endTime ? dayjs(props.endTime).year() : dayjs().year(),
+  month: props.endTime ? dayjs(props.endTime).month() : dayjs().month(),
+  day: props.endTime ? dayjs(props.endTime).startOf('day').valueOf() : -1,
+  hms: {
+    hh: props.endTime ? dayjs(props.endTime).hour() : 0,
+    mm: props.endTime ? dayjs(props.endTime).minute() : 0,
+    ss: props.endTime ? dayjs(props.endTime).second() : 0,
+  }
+})
+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 = dayjs(startTime.day).hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format(format);
+  let endTimeVal = 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 = () => {
+  //Month.value = dayjs().month();
+}
+
+//清空回调
+const footOnClear = () => {
+  //Month.value = ''
+}
+</script>

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -2,39 +2,24 @@
   <div class="layui-laydate">
     <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
       <div class="layui-laydate-header">
-        <i
-          class="layui-icon laydate-icon laydate-prev-y"
-          @click="changeYearOrMonth('year', -1)"
-          ></i
-        >
         <div class="laydate-set-ym">
-          <span @click="datePicker.showPanel.value = 'month'"
+          <span @click="datePicker.showPanel.value = 'month'">{{ typeof Month !== 'string' ? Month + 1 + ' 月' : '请选择月份'
-            >{{ datePicker.currentMonth.value + 1 }} 月</span
+          }}</span>
-          >
         </div>
-        <i
-          class="layui-icon laydate-icon laydate-next-y"
-          @click="changeYearOrMonth('year', 1)"
-          ></i
-        >
       </div>
     </div>
     <div class="layui-laydate-content" style="height: 220px">
       <ul class="layui-laydate-list laydate-month-list">
-        <li
+        <li v-for="item of MONTH_NAME" :key="item" :class="{ 'layui-this': MONTH_NAME.indexOf(item) === Month }"
-          v-for="item of MONTH_NAME"
+          @click="handleMonthClick(item)">
-          :key="item"
-          :class="{
-            'layui-this':
-              MONTH_NAME.indexOf(item) === datePicker.currentMonth.value,
-          }"
-          @click="handleMonthClick(item)"
-        >
           {{ item.slice(0, 3) }}
         </li>
       </ul>
     </div>
-    <PanelFoot></PanelFoot>
+    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'year'"
+        class="laydate-btns-time">选择年份</span>
+    </PanelFoot>
   </div>
 </template>
 <script lang="ts">
@@ -43,11 +28,21 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
-import { inject } from "vue";
+import { inject, ref, watch } from 'vue';
-import { provideType } from "../interface";
+import { provideType } from '../interface';
-import PanelFoot from "./PanelFoot.vue";
+import PanelFoot from './PanelFoot.vue'
-const datePicker: provideType = inject("datePicker") as provideType;
+
+export interface TimePanelProps {
+  modelValue: number | string;
+  max?: number;
+}
+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 MONTH_NAME = [
   "1月",
@@ -64,36 +59,45 @@ const MONTH_NAME = [
   "12月",
 ];
 
-// 切换年月
+// 点击月份
-const changeYearOrMonth = (type: "year" | "month", num: number) => {
+const handleMonthClick = (item: any) => {
-  if (type === "year") {
+  Month.value = MONTH_NAME.indexOf(item);
-    datePicker.currentYear.value += num;
+  if (!datePicker.range) {
-  } else {
+    if (datePicker.type === "yearmonth") {
-    let month = datePicker.currentMonth.value + num;
+      datePicker.currentDay.value = dayjs(datePicker.currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
-    if (month > 11) {
-      month = 0;
-      datePicker.currentYear.value++;
-    } else if (month < 0) {
-      month = 11;
-      datePicker.currentYear.value--;
     }
-    datePicker.currentMonth.value = month;
+    if (datePicker.type === "date" || datePicker.type === "datetime") {
+      emits('update:modelValue', MONTH_NAME.indexOf(item))
+    }
+  }
+  if (datePicker.simple) {
+    footOnOk();
   }
 };
 
-// 点击月份
+watch(() => props.modelValue, () => {
-const handleMonthClick = (item: any) => {
+  Month.value = props.modelValue;
-  datePicker.currentMonth.value = MONTH_NAME.indexOf(item);
+})
-  if (datePicker.type === "month") {
+
-    datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
+//关闭回调
-      .month(MONTH_NAME.indexOf(item))
+const footOnOk = () => {
-      .valueOf();
+  emits('update:modelValue', Month.value)
-  } else if (datePicker.type === "yearmonth") {
+  if (datePicker.range) {
-    datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
+    //关闭菜单
-      .month(MONTH_NAME.indexOf(item))
+    emits('ok');
-      .valueOf();
+    return;
   } else {
-    datePicker.showPanel.value = "date";
+    datePicker.ok()
   }
-};
+}
+
+//现在回调
+const footOnNow = () => {
+  Month.value = dayjs().month();
+}
+
+//清空回调
+const footOnClear = () => {
+  Month.value = ''
+}
 </script>

package/component/src/component/datePicker/components/PanelFoot.vue

@@ -1,91 +1,10 @@
 <template>
   <div class="layui-laydate-footer">
-    <span
+    <slot></slot>
-      v-if="
-        datePicker.type === 'datetime' &&
-        datePicker.showPanel.value === 'datetime'
-      "
-      @click="chooseTime"
-      class="laydate-btns-time"
-      >选择时间</span
-    >
-
-    <span
-      v-else-if="
-        datePicker.type === 'datetime' && datePicker.showPanel.value === 'time'
-      "
-      @click="datePicker.showPanel.value = 'datetime'"
-      class="laydate-btns-time"
-      >选择日期</span
-    >
-
-    <span
-      v-else-if="
-        datePicker.type === 'yearmonth' && datePicker.showPanel.value === 'year'
-      "
-      @click="datePicker.showPanel.value = 'month'"
-      class="laydate-btns-time"
-      >选择月份</span
-    >
-    <span
-      v-else-if="
-        datePicker.type === 'yearmonth' &&
-        datePicker.showPanel.value === 'month'
-      "
-      @click="datePicker.showPanel.value = 'year'"
-      class="laydate-btns-time"
-      >选择年份</span
-    >
-
-    <span
-      v-else-if="!datePicker.range"
-      class="layui-laydate-preview"
-      title="当前选中的结果"
-    >
-      <template
-        v-if="
-          datePicker.type === 'month' && datePicker.currentMonth.value != -1
-        "
-      >
-        {{ datePicker.currentMonth.value + 1 }}
-      </template>
-      <template
-        v-else-if="
-          datePicker.type === 'year' && datePicker.currentYear.value != -1
-        "
-      >
-        {{ datePicker.currentYear.value }}
-      </template>
-      <template v-else-if="datePicker.type === 'time'">
-        {{
-          (datePicker.hms.value.hh < 10 ? "0" : "") +
-          datePicker.hms.value.hh +
-          ":" +
-          (datePicker.hms.value.mm < 10 ? "0" : "") +
-          datePicker.hms.value.mm +
-          ":" +
-          (datePicker.hms.value.ss < 10 ? "0" : "") +
-          datePicker.hms.value.ss
-        }}
-      </template>
-    </span>
-
     <div class="laydate-footer-btns">
-      <span
+      <span lay-type="clear" class="laydate-btns-clear" @click="handelClear">清空</span>
-        lay-type="clear"
+      <span lay-type="now" class="laydate-btns-now" @click="handelNow">现在</span>
-        class="laydate-btns-clear"
+      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">确定</span>
-        @click="datePicker.clear()"
-        >清空</span
-      >
-      <span lay-type="now" class="laydate-btns-now" @click="datePicker.now()"
-        >现在</span
-      >
-      <span
-        lay-type="confirm"
-        class="laydate-btns-confirm"
-        @click="datePicker.ok()"
-        >确定</span
-      >
     </div>
   </div>
 </template>
@@ -95,20 +14,18 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject } from "vue";
+//foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
-import { provideType } from "../interface";
+const emits = defineEmits(['ok', 'clear', 'now']);
 
-const datePicker: provideType = inject("datePicker") as provideType;
+const handelOk = () => {
-const emits = defineEmits([
+  emits('ok');
-  "showYearPanel",
+}
-  "update:showPanel",
-  "scrollToCurrentTime",
-  "ok",
-]);
 
-//选择时间
+const handelNow = () => {
-const chooseTime = () => {
+  emits('now')
-  datePicker.showPanel.value = "time";
+}
-  //scrollToCurrentTime()
+
-};
+const handelClear = () => {
+  emits('clear')
+}
 </script>

package/component/src/component/datePicker/components/TimePanel.vue

@@ -8,23 +8,12 @@
       </div>
       <div class="layui-laydate-content" style="height: 210px">
         <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
-          <li
+          <li class="num-list" v-for="item in els" :key="item.type" :data-type="item.type">
-            class="num-list"
+            <ol class="scroll" @click="chooseTime">
-            v-for="item in els"
+              <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
-            :key="item.type"
+                :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
-            :data-type="item.type"
-          >
-            <ol class="scroll" @click="choseTime">
-              <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.toString().padStart(2, '0') ==
+                  index.toString().padStart(2, '0') == (hms as hmsType)[item.type]
-                  datePicker.hms.value[item.type]
                     ? 'layui-this'
                     : '',
                 ]"
@@ -36,7 +25,15 @@
         </ul>
       </div>
     </div>
-    <PanelFoot></PanelFoot>
+    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span v-if="datePicker.type === 'datetime' && !datePicker.range" @click="datePicker.showPanel.value = 'datetime'"
+        class="laydate-btns-time">选择日期</span>
+      <template v-else>
+        {{ hms.hh > 9 ? hms.hh : '0' + hms.hh }}:{{ hms.mm > 9 ? hms.mm : '0' + hms.mm }}:{{ hms.ss > 9 ? hms.ss : '0' +
+            hms.ss
+        }}
+      </template>
+    </PanelFoot>
   </div>
 </template>
 <script lang="ts">
@@ -45,39 +42,44 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject, onMounted, ref, nextTick, watch } from "vue";
+import dayjs from 'dayjs';
-import { provideType } from "../interface";
+import { inject, onMounted, ref, Ref, nextTick, watch, h } from 'vue';
-import PanelFoot from "./PanelFoot.vue";
+import { provideType } from '../interface';
-const datePicker: provideType = inject("datePicker") as provideType;
+import PanelFoot from './PanelFoot.vue'
+export interface hmsType {
+  hh: number; mm: number; ss: number;
+}
+export interface TimePanelProps {
+  modelValue: hmsType
+}
+
+const props = withDefaults(defineProps<TimePanelProps>(), {
+
+});
+const emits = defineEmits(['update:modelValue', 'ok']);
+const datePicker: provideType = inject('datePicker') as provideType;
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
   { count: 60, type: "ss" },
 ];
+const hms = ref<{ hh: number; mm: number; ss: number; }>(props.modelValue);
 
 // 点击时间 - hms
-const choseTime = (e: any) => {
+const chooseTime = (e: any) => {
-  unWatch.value = true;
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
-    datePicker.hms.value[type as keyof typeof datePicker.hms.value] = value;
+    hms.value[type as keyof typeof hms.value] = parseInt(value);
   }
-  setTimeout(() => {
-    unWatch.value = false;
-  }, 0);
 };
-const unWatch = ref(false);
+
-const timePanelRef = ref();
+const timePanelRef = ref()
 onMounted(() => {
   scrollTo();
-});
+})
-watch(
+watch(() => props.modelValue, () => {
-  [datePicker.hms],
+  hms.value = props.modelValue
-  () => {
+}, { deep: true })
-    if (!unWatch.value) scrollTo();
-  },
-  { deep: true }
-);
 const scrollTo = () => {
   nextTick(() => {
     timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
@@ -100,6 +102,33 @@ const scrollTo = () => {
         }
       }
     });
-  });
+  })
-};
+}
+
+//确认关闭回调
+const footOnOk = () => {
+  emits('update:modelValue', hms)
+  if (datePicker.range) {
+    //关闭菜单
+    emits('ok');
+    return;
+  } else {
+    datePicker.ok()
+  }
+}
+//现在回调
+const footOnNow = () => {
+  hms.value.hh = dayjs().hour();
+  hms.value.mm = dayjs().minute();
+  hms.value.ss = dayjs().second();
+  scrollTo();
+}
+
+//清空回调
+const footOnClear = () => {
+  hms.value.hh = 0;
+  hms.value.mm = 0;
+  hms.value.ss = 0;
+  scrollTo();
+}
 </script>

package/component/src/component/datePicker/components/YearPanel.vue

@@ -13,17 +13,16 @@
       ref="ScrollRef"
     >
       <ul class="layui-laydate-list laydate-year-list">
-        <li
+        <li v-for="item of yearList" :key="item" :class="{ 'layui-this': Year === item }"
-          v-for="item of datePicker.yearList.value"
+          @click="handleYearClick(item)">{{ item }}
-          :key="item"
-          :class="{ 'layui-this': datePicker.currentYear.value === item }"
-          @click="handleYearClick(item)"
-        >
-          {{ item }}
         </li>
       </ul>
     </div>
-    <PanelFoot></PanelFoot>
+    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'month'"
+        class="laydate-btns-time">选择月份</span>
+      <template v-else>{{ Year }}</template>
+    </PanelFoot>
   </div>
 </template>
 <script lang="ts">
@@ -32,36 +31,58 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
-import { inject, nextTick, onMounted, ref, watch } from "vue";
+import { inject, nextTick, onMounted, ref, watch } from 'vue';
-import { provideType } from "../interface";
+import { getYears } from '../day';
-import PanelFoot from "./PanelFoot.vue";
+import { provideType } from '../interface';
-const datePicker: provideType = inject("datePicker") as provideType;
+import PanelFoot from './PanelFoot.vue'
+
+export interface TimePanelProps {
+  modelValue: number | string;
+  max?: number;
+}
+const props = withDefaults(defineProps<TimePanelProps>(), {
+  max: dayjs().year() + 100
+});
+const emits = defineEmits(['update:modelValue', 'ok']);
+const datePicker: provideType = inject('datePicker') as provideType;
+const yearList = ref<number[]>(getYears());
 const unWatch = ref(false);
+const Year = ref(props.modelValue);
+
+
 // 点击年份
 const handleYearClick = (item: any) => {
   unWatch.value = true;
-  datePicker.currentYear.value = item;
+  Year.value = item;
-  if (datePicker.type === "year") {
+  if (!datePicker.range) {
-    datePicker.currentDay.value = dayjs().year(item).valueOf();
+    if (datePicker.type === "year") {
-  } else if (datePicker.type === "yearmonth") {
+      datePicker.currentDay.value = dayjs().year(item).valueOf();
-    datePicker.currentDay.value = dayjs().year(item).valueOf();
+    } else if (datePicker.type === "yearmonth") {
-    datePicker.showPanel.value = "month";
+      datePicker.currentDay.value = dayjs().year(item).valueOf();
-  } else {
+      datePicker.showPanel.value = "month";
-    datePicker.showPanel.value = "date";
+      emits('update:modelValue', Year.value);
+    } else {
+      datePicker.showPanel.value = "date";
+    }
   }
+
   setTimeout(() => {
     unWatch.value = false;
   }, 0);
+
+  if (datePicker.simple) {
+    footOnOk();
+  }
 };
 
 const ScrollRef = ref();
 onMounted(() => {
   scrollTo();
-});
+})
-watch([datePicker.currentYear], () => {
+watch(() => Year, () => {
-  if (!unWatch.value) scrollTo();
+  Year.value = props.modelValue;
-});
+})
 const scrollTo = () => {
   nextTick(() => {
     let scrollTop = 0;
@@ -73,7 +94,33 @@ const scrollTo = () => {
         break;
       }
     }
-    ScrollRef.value.scrollTo(0, scrollTop);
+    ScrollRef.value.scrollTo(0, scrollTop)
-  });
+  })
-};
+}
+
+//关闭回调
+const footOnOk = () => {
+  emits('update:modelValue', Year.value)
+  if (datePicker.range) {
+    //关闭菜单
+    emits('ok');
+    return;
+  } else {
+    datePicker.ok()
+  }
+}
+
+//现在回调
+const footOnNow = () => {
+  Year.value = dayjs().year();
+  if (datePicker.type === 'yearmonth') {
+    datePicker.currentMonth.value = dayjs().month();
+  }
+  scrollTo();
+}
+
+//清空回调
+const footOnClear = () => {
+  Year.value = ''
+}
 </script>

package/component/src/component/datePicker/components/components/DateContent.vue

@@ -1,37 +1,25 @@
 <template>
   <div class="layui-laydate-content">
-    <table>
+    <table style="width:100%">
       <thead>
         <tr>
           <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
         </tr>
       </thead>
       <tbody>
-        <template
+        <template v-for="(o, i) of dateList.length % 7 == 0
-          v-for="(o, i) of dateList.value.length % 7 == 0
+        ? dateList.length / 7
-            ? dateList.value.length / 7
+        : Math.floor(dateList.length / 7) + 1" :key="i">
-            : Math.floor(dateList.value.length / 7) + 1"
-          :key="i"
-        >
           <tr>
-            <td
+            <td v-for="(item, index) of dateList.slice(
-              v-for="(item, index) of dateList.value.slice(i * 7, i * 7 + 7)"
+              i * 7,
-              :key="index"
+              i * 7 + 7
-              :data-unix="item.value"
+            )" :key="index" :data-unix="item.value" :class="{
-              :class="{
+  'laydate-day-prev': item.type !== 'current',
-                'laydate-day-prev': item.type !== 'current',
+  'layui-this': item.value === modelValue || (datePicker.range && item.type === 'current' && (item.value == startDate || item.value == endDate)),
-                'layui-this':
+  'laydate-range-hover': ifHasRangeHoverClass(item),
-                  item.value === modelValue ||
+  'layui-disabled': item.type !== 'current' && datePicker.range
-                  (datePicker.range &&
+}" @click="handleDayClick(item)" @mouseenter="dayItemMouseEnter($event, item)">
-                    (item.value ==
-                      parseInt(datePicker.rangeValue.value.first) ||
-                      item.value ==
-                        parseInt(datePicker.rangeValue.value.last))),
-                'laydate-range-hover': ifHasRangeHoverClass(item),
-              }"
-              @click="handleDayClick(item)"
-              @mouseenter="dayItemMouseEnter($event, item)"
-            >
               {{ item.day }}
             </td>
           </tr>
@@ -49,18 +37,24 @@ export default {
 import { computed, inject, ref, Ref } from "vue";
 import { provideType } from "../../interface";
 
-export interface LayDatePickerProps {
+export interface DateContentProps {
   dateList: any;
-  modelValue: number;
+  modelValue?: number;
+  startDate?: number;
+  endDate?: number;
+  hoverDate?: number;
 }
 
-const props = withDefaults(defineProps<LayDatePickerProps>(), {
+const props = withDefaults(defineProps<DateContentProps>(), {
   dateList: [],
   modelValue: -1,
+  hoverDate: -1,
+  startDate: -1,
+  endDate: -1
 });
 const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
-const datePicker: provideType = inject("datePicker") as provideType;
+const datePicker: provideType = inject('datePicker') as provideType;
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'update:hoverDate','simple']);
 
 // 点击日期
 const handleDayClick = (item: any) => {
@@ -68,33 +62,30 @@ const handleDayClick = (item: any) => {
     if (item.type !== "current") {
       return;
     }
-  }
-  emits("update:modelValue", item.value);
 
-  if (item.type !== "current") {
+    if (props.startDate === -1 && props.endDate === -1) {
-    datePicker.currentMonth.value =
+      emits('update:startDate', item.value)
-      item.type === "prev"
+    } else if (props.startDate !== -1 && props.endDate !== -1) {
-        ? datePicker.currentMonth.value - 1
+      emits('update:hoverDate', item.value);
-        : datePicker.currentMonth.value + 1;
+      emits('update:startDate', item.value)
-  }
+      emits('update:endDate', -1)
-
+    } else if (props.startDate !== -1 && props.endDate === -1) {
-  if (datePicker.range) {
+      emits('update:endDate', item.value)
-    if (
+      if (item.value < props.startDate) {
-      datePicker.rangeValue.value.first === "" &&
+        //swap
-      datePicker.rangeValue.value.last === ""
+        const first = props.startDate;
-    ) {
+        const last = item.value;
-      //props.rangeValue.first = item.value
+        emits('update:startDate', last);
-    } else if (
+        emits('update:endDate', first);
-      datePicker.rangeValue.value.first !== "" &&
+      }
-      datePicker.rangeValue.value.last !== ""
+    }
-    ) {
+  } else {
-      // rangeValue.first = item.value
+    emits('update:modelValue', item.value);
-      // rangeValue.last = ''
+    if (item.type !== "current") {
-    } else if (
+      datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
-      datePicker.rangeValue.value.first !== "" &&
+    }
-      datePicker.rangeValue.value.last === ""
+    if (datePicker.simple) {
-    ) {
+     emits('simple');
-      //rangeValue.last = item.value
     }
   }
 };
@@ -103,44 +94,37 @@ const dayItemMouseEnter = (event: MouseEvent, item: any) => {
   if (!datePicker.range) {
     return;
   }
-  if (!datePicker.rangeValue.value.first) {
+  if (props.startDate === -1) {
     return;
   }
   if (item.type !== "current") {
     return;
   }
-  //rpropsangeValue.hover = (event.target as HTMLElement).dataset.unix as string
+  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 (!datePicker.rangeValue.value.first) {
+    if (props.startDate === -1) {
-      return false;
+      return false
     }
     if (item.type !== "current") {
       return false;
     }
-    if (
+    if(props.hoverDate===-1&&props.endDate===-1){
-      item.value == parseInt(datePicker.rangeValue.value.first) ||
+      return false
-      item.value == parseInt(datePicker.rangeValue.value.last)
-    ) {
-      return true;
     }
-    let hover = datePicker.rangeValue.value.last
+    let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
-      ? datePicker.rangeValue.value.last
+    let max = props.startDate > hover ? props.startDate : hover;
-      : datePicker.rangeValue.value.hover;
+    let min = props.startDate < hover ? props.startDate : hover
-    let max =
+    if (item.value >= min && item.value <= max) {
-      datePicker.rangeValue.value.first > hover
+      return true
-        ? datePicker.rangeValue.value.first
-        : hover;
-    let min =
-      datePicker.rangeValue.value.first < hover
-        ? datePicker.rangeValue.value.first
-        : hover;
-    if (item.value >= parseInt(min) && item.value <= parseInt(max)) {
-      return true;
     }
     return false;
   };

package/component/src/component/datePicker/index.less

@@ -105,7 +105,6 @@ html #layuicss-laydate {
   padding: 10px 70px 5px;
 }
 .layui-laydate-header * {
-  display: inline-block;
   vertical-align: bottom;
 }
 .layui-laydate-header i {
@@ -161,7 +160,7 @@ html #layuicss-laydate {
   width: 36px;
   height: 30px;
   padding: 5px;
-  text-align: center;
+  text-align: center !important;
 }
 .layui-laydate-content th {
   font-weight: 400;
@@ -300,7 +299,7 @@ html #layuicss-laydate {
 
 /* 双日历 */
 .layui-laydate-range {
-  width: 546px;
+  min-width: 546px;
 }
 .layui-laydate-range .layui-laydate-main {
   display: inline-block;
@@ -466,3 +465,63 @@ html #layuicss-laydate {
 .layui-laydate-content .layui-disabled:hover{
   background-color: transparent !important;
 }
+
+.laydate-range-inputs{
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-flex;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  .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;
+  }
+}

package/component/src/component/datePicker/index.vue

@@ -1,28 +1,30 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef" :disabled="disabled">
+    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
-      <lay-input
+      <lay-input readonly :name="name" :model-value="(dateValue as string)" :placeholder="placeholder"
-        readonly
+        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range">
-        :name="name"
-        :model-value="dateValue"
-        :placeholder="placeholder"
-        prefix-icon="layui-icon-date"
-        :disabled="disabled"
-      >
       </lay-input>
+      <div class="laydate-range-inputs" v-else>
+        <lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" class="start-input">
+        </lay-input>
+        <span class="range-separator">{{ rangeSeparator }}</span>
+        <lay-input readonly :name="name" :model-value="dateValue[1]" :disabled="disabled" class="end-input">
+        </lay-input>
+      </div>
+
       <template #content>
         <!-- 日期选择 -->
-        <DatePanel
+        <DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')" v-model="currentDay"></DatePanel>
-          v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
-        ></DatePanel>
         <!-- 时间选择 -->
-        <TimePanel v-if="!range && showPanel === 'time'"></TimePanel>
+        <TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
         <!-- 年份选择器 -->
-        <YearPanel
+        <YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
-          v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
+        </YearPanel>
-        ></YearPanel>
         <!-- 月份选择器 -->
-        <MonthPanel v-if="!range && showPanel === 'month'"></MonthPanel>
+        <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>
       </template>
     </lay-dropdown>
   </div>
@@ -40,33 +42,25 @@ import dayjs from "dayjs";
 import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import { getDayLength, getYears, getMonth, getYear, getDay } from "./day";
+import { getMonth, getYear, getDay } from "./day";
-import {
+import { ref, watch, defineProps, defineEmits, onMounted, reactive, provide } from "vue";
-  ref,
+import DatePanel from './components/DatePanel.vue';
-  watch,
+import TimePanel from './components/TimePanel.vue';
-  computed,
+import YearPanel from './components/YearPanel.vue';
-  defineProps,
+import MonthPanel from './components/MonthPanel.vue';
-  defineEmits,
+import DateRange from './components/DateRange.vue';
-  onMounted,
-  nextTick,
-  reactive,
-  provide,
-} 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";
 
 export interface LayDatePickerProps {
   type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
   placeholder?: string;
-  modelValue?: string;
+  modelValue?: string | string[];
   disabled?: boolean;
   simple?: boolean;
   name?: string;
   max?: string;
   min?: string;
   range?: boolean;
+  rangeSeparator?: string;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -75,169 +69,126 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   disabled: false,
   simple: false,
   range: false,
+  rangeSeparator: '至'
 });
 
 const dropdownRef = ref(null);
 const $emits = defineEmits(["update:modelValue"]);
-
 const hms = ref({
-  hh: dayjs(props.modelValue).hour(),
+  hh: 0,
-  mm: dayjs(props.modelValue).minute(),
+  mm: 0,
-  ss: dayjs(props.modelValue).second(),
+  ss: 0,
 });
+const currentYear = ref<number>(0);
+const currentMonth = ref<number>(0);
+const currentDay = ref<number>(0);
+const showPanel = ref<string>("date");
+const rangeValue = reactive({ first: '', last: '' })
 
-const currentYear = ref(getYear(props.modelValue));
+let unWatch = false;
-const currentMonth = ref(getMonth(props.modelValue));
+// 计算结果日期
-const currentDay = ref<number>(getDay(props.modelValue));
+const dateValue = props.range ? ref(['', '']) : ref('');
-const yearList = ref<number[]>(getYears());
+const getDateValue = () => {
-const dateList = ref<any[]>([]);
+  unWatch = true;
-const dateListNext = ref<any[]>([]);
+  let dayjsVal;
-const showPanel = ref("date");
+  switch (props.type) {
-//范围选择
+    case "date":
-const rangeValue = reactive({
+      dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).format("YYYY-MM-DD") : '';
-  first: "",
+      break;
-  last: "",
+    case "datetime":
-  hover: "",
+      dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).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("HH:mm:ss");
+      break;
+    case "yearmonth":
+      dayjsVal = dayjs().year(currentYear.value).month(currentMonth.value).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;
+  $emits("update:modelValue", dayjsVal);
+  setTimeout(() => { unWatch = false; }, 0);
+};
+const getDateValueByRange = () => {
+  unWatch = true;
+  if (rangeValue.first === '' || rangeValue.last === '') {
+    dateValue.value = ['', ''];
+    return;
+  }
+  let format = props.type === 'datetime' ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  dateValue.value = [dayjs(rangeValue.first).format(format), dayjs(rangeValue.last).format(format)];
+  $emits("update:modelValue", dateValue.value);
+  setTimeout(() => { unWatch = false; }, 0);
+}
 
+// 确认事件
+const ok = () => {
+  if (!props.range) {
+    if (props.type === 'time') {
+      getDateValue()
+    } else {
+      getDateValue()
+    }
+  } else {
+    getDateValueByRange()
+  }
+  if (dropdownRef.value)
+    // @ts-ignore
+    dropdownRef.value.hide();
+  showPanel.value = props.type
+};
+
+//面板类型判断
 watch(
   () => props.type,
   () => {
     showPanel.value = props.type;
-    if (props.type === "yearmonth") {
+    if (props.type === 'yearmonth') {
-      showPanel.value = "year";
+      showPanel.value = 'year';
     }
   },
   { immediate: true }
 );
 
-onMounted(() => {
+//监听modelValue改变
-  //初始值为空时的容错
+watch(() => props.modelValue, () => {
-  if (currentDay.value == -1) {
+  if (unWatch) {
-    setTimeout(() => {
+    return;
-      now();
-      clear();
-    }, 0);
   }
-  let modelValue = props.modelValue;
+  let initModelValue = props.range && props.modelValue ? (props.modelValue as string[])[0] || '' : props.modelValue as string;
-  if (modelValue.length === 8) {
+  hms.value.hh = dayjs(initModelValue).hour();
-    //dayjs 解析时间容错
+  hms.value.mm = dayjs(initModelValue).minute();
-    modelValue = "1970-01-01 " + modelValue;
+  hms.value.ss = dayjs(initModelValue).second();
-  }
-  hms.value.hh = dayjs(modelValue).hour();
-  hms.value.mm = dayjs(modelValue).minute();
-  hms.value.ss = dayjs(modelValue).second();
-  getDateValue();
-});
 
-// 计算结果日期
+  if (initModelValue.length === 8 && props.type === 'time') { //dayjs 解析时间容错
-const dateValue = ref("");
+    let modelValue = initModelValue;
-const getDateValue = (checkCurrentDay = true) => {
+    modelValue = '1970-01-01 ' + modelValue;
-  if (checkCurrentDay) {
+    hms.value.hh = dayjs(modelValue).hour();
-    if (currentDay.value === -1) {
+    hms.value.mm = dayjs(modelValue).minute();
-      dateValue.value = "";
+    hms.value.ss = dayjs(modelValue).second();
-      $emits("update:modelValue", "");
+  }
-      return "";
+  currentYear.value = getYear(initModelValue);
-    }
+  currentMonth.value = getMonth(initModelValue);
+  currentDay.value = getDay(initModelValue);
+
+  rangeValue.first = initModelValue;
+  rangeValue.last = props.range && props.modelValue ? (props.modelValue as string[])[1] || '' : '';
+  if (!props.range) {
+    getDateValue();
   } else {
-    if (currentDay.value === -1) {
+    getDateValueByRange();
-      currentDay.value = new Date(new Date().toDateString()).getTime();
-    }
   }
+}, { immediate: true })
 
-  let dayjsVal;
-  let dayjsObj = dayjs(currentDay.value)
-    .hour(hms.value.hh)
-    .minute(hms.value.mm)
-    .second(hms.value.ss);
-  switch (props.type) {
-    case "date":
-      dayjsVal = dayjsObj.format("YYYY-MM-DD");
-      break;
-    case "datetime":
-      dayjsVal = dayjsObj.format("YYYY-MM-DD HH:mm:ss");
-      break;
-    case "year":
-      dayjsVal = dayjsObj.format("YYYY");
-      break;
-    case "month":
-      dayjsVal = dayjsObj.format("MM");
-      break;
-    case "time":
-      dayjsVal = dayjsObj.format("HH:mm:ss");
-      break;
-    case "yearmonth":
-      dayjsVal = dayjsObj.format("YYYY-MM");
-      break;
-    default:
-      dayjsVal = dayjsObj.format();
-      break;
-  }
-  dateValue.value = dayjsVal;
-  $emits("update:modelValue", dayjsVal);
-  return dayjsVal;
-};
-
-// 确认事件
-const ok = () => {
-  if (props.type === "time") {
-    getDateValue(false);
-  } else {
-    getDateValue();
-  }
-  if (dropdownRef.value)
-    // @ts-ignore
-    dropdownRef.value.hide();
-  if (props.type === "yearmonth") {
-    showPanel.value = "year";
-  } else if (props.type === "datetime") {
-    showPanel.value = "datetime";
-  }
-};
-
-// 现在时间
-const now = () => {
-  currentDay.value = new Date(new Date().toDateString()).getTime();
-  currentYear.value = dayjs().year();
-  currentMonth.value = dayjs().month();
-  hms.value.hh = dayjs().hour();
-  hms.value.mm = dayjs().minute();
-  hms.value.ss = dayjs().second();
-  if (props.simple) getDateValue(true);
-};
-
-// 清空日期
-const clear = () => {
-  currentDay.value = -1;
-  if (showPanel.value === "year") currentYear.value = -1;
-  if (showPanel.value === "month") currentMonth.value = -1;
-  if (showPanel.value === "time") {
-    hms.value.hh = 0;
-    hms.value.mm = 0;
-    hms.value.ss = 0;
-  }
-  getDateValue(true);
-};
-
-//simple
-watch(currentDay, () => {
-  if (props.simple) {
-    getDateValue();
-    ok();
-  }
-});
-watch(currentMonth, () => {
-  if (props.simple && props.type !== "date") {
-    getDateValue();
-    ok();
-  }
-});
-watch(currentYear, () => {
-  if (props.simple && props.type !== "date") {
-    getDateValue();
-    ok();
-  }
-});
 
 provide("datePicker", {
   currentYear: currentYear,
@@ -246,14 +197,12 @@ provide("datePicker", {
   dateValue: dateValue,
   type: props.type,
   showPanel: showPanel,
-  dateList: dateList,
-  yearList: yearList,
   hms: hms,
-  clear: () => clear(),
-  now: () => now(),
   ok: () => ok(),
   getDateValue: () => getDateValue,
   range: props.range,
   rangeValue: rangeValue,
+  rangeSeparator: props.rangeSeparator,
+  simple: props.simple
 });
 </script>

package/component/src/component/datePicker/interface.ts

@@ -3,18 +3,18 @@ import { Ref } from "vue";
 export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
 
 export type provideType = {
-  currentYear: Ref;
+  currentYear: Ref,
-  currentMonth: Ref;
+  currentMonth: Ref,
-  currentDay: Ref;
+  currentDay: Ref,
-  dateValue: Ref;
+  dateValue: Ref,
-  dateList: Ref;
+  hms: Ref,
-  yearList: Ref;
+  type: string,
-  hms: Ref;
+  showPanel: Ref,
-  type: string;
+  clear: Function,
-  showPanel: Ref;
+  now: Function,
-  clear: Function;
+  ok: Function,
-  now: Function;
+  range: boolean,
-  ok: Function;
+  rangeValue: { first: string, last: string, hover: string, firstTime: { hh: number, mm: number, ss: number }, lastTime: { hh: number, mm: number, ss: number } },
-  range: boolean;
+  rangeSeparator: string,
-  rangeValue: Ref;
+  simple: boolean,
-};
+}

package/document-component/src/document/zh-CN/components/datePicker.md

@@ -101,7 +101,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime3 = ref("2022-03-04 17:35:00");
+   const endTime3 = ref("2022");
 
     return {
       endTime3
@@ -118,7 +118,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
+  <lay-date-picker type="month" v-model="mouth"></lay-date-picker>
 </template>
 
 <script>
@@ -127,7 +127,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime4 = ref("2022-03-04 17:35:00");
+   const mouth = ref("4");
 
     return {
       endTime4
@@ -153,7 +153,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime5 = ref("2022-03-04 17:35:00");
+   const endTime5 = ref("17:35:00");
 
     return {
       endTime5
@@ -179,7 +179,7 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime6 = ref("2022-03-04 17:35:00");
+   const endTime6 = ref("2022-03");
 
     return {
       endTime6
@@ -220,6 +220,31 @@ export default {
 
 :::
 
+::: title 范围选择
+:::
+
+::: demo
+
+<template>
+  <div style="display:flex;  align-items: center;margin-bottom: 5px;">
+    <lay-date-picker  v-model="rangeTime1" range placeholder="type : date"></lay-date-picker>
+    <span style="margin-left:10px">modelValue:{{rangeTime1}}</span>
+  </div>
+  <div style="display:flex;  align-items: center;margin-bottom: 5px;">
+    <lay-date-picker  v-model="rangeTime2" range type="datetime" placeholder="type : datetime"></lay-date-picker>
+    <span style="margin-left:10px">modelValue:{{rangeTime2}}</span>
+  </div>
+  <lay-button @click="rangeTime2=['2001-02-01','2001-03-1']">test</lay-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const rangeTime1 = ref([]);
+const rangeTime2 = ref(['2001-01-01','2001-02-1']);
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::