♻️(component): datePicker 加入年月范围选择,调整部分结构

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

@@ -279,16 +279,16 @@ const closeRightMonthPanel = () => {
 const footOnOk = () => {
   let format =
     datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  let startTimeVal = dayjs(startTime.day)
+  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);
+    .format(format):'';
-  let endTimeVal = dayjs(endTime.day)
+  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);
+    .format(format):'';
   emits("update:startTime", startTimeVal);
   emits("update:endTime", endTimeVal);
   datePicker.ok();
@@ -296,11 +296,18 @@ const footOnOk = () => {
 
 //现在回调
 const footOnNow = () => {
-  //Month.value = dayjs().month();
+  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 = () => {
-  //Month.value = ''
+  startTime.day=-1;
+  endTime.day=-1;
 };
 </script>

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

@@ -0,0 +1,221 @@
+<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 || "--" }}年</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')) }"
+              @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 }}年</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')) }"
+              @click="handleMonthClick(getUnix(item, 'right'))" @mouseenter="monthItemMouseEnter($event, item)">
+              {{ item.slice(0, 3) }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span v-if="startTime.unix !== -1" class="layui-laydate-preview">
+        {{ dayjs(startTime.unix).format("YYYY-MM-DD") }}
+        {{ datePicker.rangeSeparator }}
+        <template v-if="endTime.unix !== -1">
+          {{ dayjs(endTime.unix).format("YYYY-MM-DD") }}
+        </template>
+        <template v-else> -- </template>
+      </span>
+    </PanelFoot>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "MonthRange",
+};
+</script>
+<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";
+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 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 = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+];
+
+// 切换年月
+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.indexOf(item);
+    let year = position === 'left' ? startTime.year : startTime.year + 1;
+    return dayjs(year + '-' + (month + 1)).valueOf();
+  }
+})
+</script>

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

@@ -1,68 +1,34 @@
 <template>
   <div>
-    <lay-dropdown
+    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
-      ref="dropdownRef"
+      <lay-input readonly :name="name" :model-value="(dateValue as string)" :placeholder="placeholder"
-      :disabled="disabled"
+        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range">
-      :autoFitMinWidth="false"
-    >
-      <lay-input
-        readonly
-        :name="name"
-        :model-value="(dateValue as string)"
-        :placeholder="placeholder"
-        prefix-icon="layui-icon-date"
-        :disabled="disabled"
-        v-if="!range"
-      >
       </lay-input>
       <div class="laydate-range-inputs" v-else>
-        <lay-input
+        <lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" class="start-input">
-          readonly
-          :name="name"
-          :model-value="dateValue[0]"
-          :disabled="disabled"
-          class="start-input"
-        >
         </lay-input>
         <span class="range-separator">{{ rangeSeparator }}</span>
-        <lay-input
+        <lay-input readonly :name="name" :model-value="dateValue[1]" :disabled="disabled" class="end-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')"
-          v-model="currentDay"
-        ></DatePanel>
         <!-- 时间选择 -->
-        <TimePanel
+        <TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></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')"
-          v-model="currentYear"
-        >
         </YearPanel>
         <!-- 月份选择器 -->
-        <MonthPanel
+        <MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></MonthPanel>
-          v-if="!range && showPanel === 'month'"
-          v-model="currentMonth"
-        ></MonthPanel>
         <!-- 范围选择 -->
-        <DateRange
+        <DateRange v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
-          v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model:startTime="rangeValue.first" v-model:endTime="rangeValue.last"></DateRange>
-          v-model:startTime="rangeValue.first"
+
-          v-model:endTime="rangeValue.last"
+        <MonthRange v-if="range && showPanel === 'yearmonth'" v-model:startTime="rangeValue.first"
-        ></DateRange>
+          v-model:endTime="rangeValue.last">
+        </MonthRange>
       </template>
     </lay-dropdown>
   </div>
@@ -95,6 +61,7 @@ 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";
 
 export interface LayDatePickerProps {
   type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
@@ -148,10 +115,10 @@ const getDateValue = () => {
       dayjsVal =
         currentDay.value !== -1
           ? dayjs(currentDay.value)
-              .hour(hms.value.hh)
+            .hour(hms.value.hh)
-              .minute(hms.value.mm)
+            .minute(hms.value.mm)
-              .second(hms.value.ss)
+            .second(hms.value.ss)
-              .format("YYYY-MM-DD HH:mm:ss")
+            .format("YYYY-MM-DD HH:mm:ss")
           : "";
       break;
     case "year":
@@ -181,10 +148,10 @@ const getDateValue = () => {
       dayjsVal =
         currentDay.value !== -1
           ? dayjs(currentDay.value)
-              .hour(hms.value.hh)
+            .hour(hms.value.hh)
-              .minute(hms.value.mm)
+            .minute(hms.value.mm)
-              .second(hms.value.ss)
+            .second(hms.value.ss)
-              .format()
+            .format()
           : "";
       break;
   }
@@ -198,9 +165,21 @@ const getDateValueByRange = () => {
   unWatch = true;
   if (rangeValue.first === "" || rangeValue.last === "") {
     dateValue.value = ["", ""];
+    $emits("update:modelValue", dateValue.value);
     return;
   }
-  let format = props.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  let format ="YYYY-MM-DD";
+  switch (props.type) {
+    case "date":
+      format = 'YYYY-MM-DD';
+      break;
+    case "datetime":
+      format = 'YYYY-MM-DD HH:mm:ss';
+      break;
+    case "yearmonth":
+      format = 'YYYY-MM';
+      break;
+  }
   dateValue.value = [
     dayjs(rangeValue.first).format(format),
     dayjs(rangeValue.last).format(format),
@@ -233,7 +212,7 @@ watch(
   () => props.type,
   () => {
     showPanel.value = props.type;
-    if (props.type === "yearmonth") {
+    if (props.type === "yearmonth" && !props.range) {
       showPanel.value = "year";
     }
   },

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

@@ -234,13 +234,17 @@ export default {
     <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>
+  <div style="display:flex;  align-items: center;margin-bottom: 5px;">
+    <lay-date-picker  v-model="rangeTime3" range type="yearmonth" placeholder="type : datetime"></lay-date-picker>
+    <span style="margin-left:10px">modelValue:{{rangeTime3}}</span>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 const rangeTime1 = ref([]);
 const rangeTime2 = ref(['2001-01-01','2001-02-1']);
+const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 </script>
 
 :::