feat: 新增 date-picker 组件 type 属性 yearmonth 值

example/docs/zh-CN/components/datePicker.md

@@ -138,6 +138,32 @@ export default {
 
 :::
 
+::: title 年月选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="yearmonth" v-model="endTime5"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime5 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime5
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::
 
@@ -146,7 +172,7 @@ export default {
 | 属性          | 描述                                                         | 类型           | 默认值 | 可选值         |
 | ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
 | v-model      | 当前时间                                                     | `string`         | --    | —             |
-| type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time`             |
+| type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time` `yearmonth`             |
 
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -16,9 +16,11 @@
       <li> 
         <h3>1.0.0 <span class="layui-badge-rim">2022-04-01</span></h3> 
         <ul>
+          <li>[重要] 修订 version 为 1.0.0。</li>
           <li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
           <li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
           <li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
+          <li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
           <li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
           <li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
           <li>[修复] transfer 组件 showSearch 属性类型警告。</li>              

example/src/layouts/Layout.vue

@@ -216,7 +216,6 @@ import menu from "../view/utils/menus";
 import { useI18n } from "vue-i18n";
 import zh_CN from "../locales/zh_CN.ts";
 import en_US from "../locales/en_US.ts";
-import { getLayuiVueVersion }  from "../../../src/utils/getLayuiVueVersion.ts"
 
 export default {
   setup() {
@@ -265,10 +264,8 @@ export default {
       });
     });
 
-    const latestVer = getLayuiVueVersion();
     const layuiVueVersion = computed(() => 
-      latestVer.value 
+       import.meta.env.LAYUI_VUE_VERSION
-      ?? import.meta.env.LAYUI_VUE_VERSION
     )
 
     watch(isDark, () => {

src/component/datePicker/index.vue

@@ -95,7 +95,7 @@
         </div>
 
         <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'year'">
+        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
@@ -296,7 +296,7 @@ const els = [
 
 export interface LayDatePickerProps {
   modelValue?: string;
-  type?: "date" | "datetime" | "year" | "time" | "month";
+  type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
   name?: string;
 }
 
@@ -328,10 +328,8 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(currentDay.value)
+  let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
-    .hour(hms.value.hh)
+
-    .minute(hms.value.mm)
-    .second(hms.value.ss);
   switch (props.type) {
     case "date":
       momentVal = momentObj.format("YYYY-MM-DD");
@@ -348,6 +346,9 @@ const dateValue = computed<string>(() => {
     case "time":
       momentVal = momentObj.format("HH:mm:ss");
       break;
+    case "yearmonth":
+      momentVal = momentObj.format("YYYY-MM");
+      break;
     default:
       momentVal = momentObj.format();
   }
@@ -452,6 +453,9 @@ const handleYearClick = (item: any) => {
   currentYear.value = item;
   if (props.type === "year") {
     currentDay.value = moment().year(item).valueOf();
+  } else if(props.type === 'yearmonth') {
+    currentDay.value = moment().year(item).valueOf();
+    showPane.value = "month";
   } else {
     showPane.value = "date";
   }
@@ -461,7 +465,9 @@ const handleYearClick = (item: any) => {
 const handleMonthClick = (item: any) => {
   currentMonth.value = MONTH_NAME.indexOf(item);
   if (props.type === "month") {
-    currentDay.value = moment().month(MONTH_NAME.indexOf(item)).valueOf();
+    currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
+  } else if(props.type === "yearmonth") {
+    currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
   } else {
     showPane.value = "date";
   }
@@ -481,13 +487,13 @@ const choseTime = (e: any) => {
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
     hms.value[type as keyof typeof hms.value] = value;
-    e.target.scrollIntoView({ behavior: "smooth" });
   }
 };
 
 onMounted(() => {
-  hms.value.hh = moment(currentDay.value).hour();
+  hms.value.hh = moment(props.modelValue).hour();
-  hms.value.mm = moment(currentDay.value).minute();
+  hms.value.mm = moment(props.modelValue).minute();
-  hms.value.ss = moment(currentDay.value).second();
+  hms.value.ss = moment(props.modelValue).second();
+  console.log(JSON.stringify(hms.value));
 });
 </script>

src/utils/getLayuiVueVersion.ts

@@ -1,13 +0,0 @@
-import { useFetch } from "@vueuse/core";
-
-export function getLayuiVueVersion() {
-  const { data } = useFetch(
-    `https://data.jsdelivr.com/v1/package/npm/@layui/layui-vue`,
-    {
-      timeout: 1000 * 2,
-      initialData: "",
-      afterFetch: (ctx) => ((ctx.data = ctx.data.tags.latest), ctx),
-    }
-  ).json();
-  return data;
-}