From 5344cc2564834fcd108645c720e5711efebfc975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 29 Mar 2022 17:28:14 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=8F=91=E5=B8=83=200.4.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/datePicker.md |  52 ++++++++++
 example/docs/zh-CN/guide/changelog.md       |   7 +-
 package.json                                |   2 +-
 src/component/datePicker/index.vue          | 109 +++++++++++++-------
 4 files changed, 129 insertions(+), 41 deletions(-)

diff --git a/example/docs/zh-CN/components/datePicker.md b/example/docs/zh-CN/components/datePicker.md
index c7046b3f..caf08ba1 100644
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@@ -60,6 +60,58 @@ export default {
 
 :::
 
+::: title 年份选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="year" v-model="endTime"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 月份选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="month" v-model="endTime"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime
+    }
+  }
+}
+</script>
+
+:::
+
 ::: comment
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index b2203a88..6cb47741 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -18,10 +18,15 @@
         <ul>
           <li>[新增] button 组件 prefix-icon 属性。</li>
           <li>[新增] button 组件 suffix-icon 属性。</li>
+          <li>[新增] date-picker 组件 清空 操作, 清空选择日期。</li>
+          <li>[新增] date-picker 组件 确认 操作, 关闭选择面板。</li>
+          <li>[新增] date-picker 组件 type 属性 year 值, 支持 年份 选择。</li>
+          <li>[新增] date-picker 组件 type 属性 month 值, 支持 月份 选择。</li>
+          <li>[修复] date-picker 组件 type 属性为 datetime 时候面板不显示。</li>
           <li>[新增] card 组件 shadow 属性, 可选值 hover, always, never。</li>
           <li>[新增] table 组件 row 和 row-double 时间的 event 参数。</li>
           <li>[新增] table 组件 contextmenu 行右键事件。</li>
-          <li>[支持] Cdn 直接导入。</li>
+          <li>[支持] cdn 直接导入使用。</li>
         </ul> 
       </li>
     </ul>
diff --git a/package.json b/package.json
index 463f7941..5a6141ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/src/component/datePicker/index.vue b/src/component/datePicker/index.vue
index 176a8f2c..7d10d840 100644
--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <lay-dropdown>
+    <lay-dropdown ref="dropdownRef">
       <lay-input :name="name" :value="dateValue || modelValue" readonly>
         <template #prefix>
           <lay-icon type="layui-icon-date"></lay-icon>
@@ -8,7 +8,10 @@
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <div class="layui-laydate" v-show="showPane === 'date'">
+        <div
+          class="layui-laydate"
+          v-show="showPane === 'date' || showPane === 'datetime'"
+        >
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
               <i
@@ -80,10 +83,10 @@
               >选择时间</span
             >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span
               ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
@@ -105,10 +108,7 @@
                   v-for="item of yearList"
                   :key="item"
                   :class="[{ 'layui-this': currentYear === item }]"
-                  @click="
-                    currentYear = item;
-                    showPane = 'date';
-                  "
+                  @click="handleYearClick(item)"
                 >
                   {{ item }}
                 </li>
@@ -123,10 +123,10 @@
               >2022</span
             >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span
               ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
@@ -141,8 +141,9 @@
                 ></i
               >
               <div class="laydate-set-ym">
-                <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPane = 'month'"
+
+                <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }} 年</span>
+                <span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -160,10 +161,7 @@
                   :class="[
                     { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
                   ]"
-                  @click="
-                    currentMonth = MONTH_NAME.indexOf(item);
-                    showPane = 'date';
-                  "
+                  @click="handleMonthClick(item)"
                 >
                   {{ item.slice(0, 3) }}
                 </li>
@@ -178,10 +176,10 @@
               >2022-03</span
             >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span
               ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
@@ -223,10 +221,10 @@
               >返回日期</span
             >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear">清空</span
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span
               ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
@@ -242,8 +240,9 @@ import moment from "moment";
 import LayIcon from "../icon/index";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import { getDayLength, getYears, getDate, getMonth, getYear } from "./day";
+import { getDayLength, getYears, getMonth, getYear } from "./day";
 
+const dropdownRef = ref(null);
 const $emits = defineEmits(["update:modelValue"]);
 
 const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
@@ -271,8 +270,8 @@ const els = [
 
 export interface LayDatePickerProps {
   modelValue?: string;
-  type: "date" | "datetime" | "year" | "time" | "month";
-  name: string;
+  type?: "date" | "datetime" | "year" | "time" | "month";
+  name?: string;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -288,8 +287,20 @@ const yearList = ref<number[]>(getYears());
 const dateList = ref<any[]>([]);
 const showPane = ref("date");
 
+watch(
+  () => props.type,
+  () => {
+    showPane.value = props.type;
+  },
+  { immediate: true }
+);
+
 // 计算结果日期
 const dateValue = computed<string>(() => {
+  if(currentDay.value === -1) {
+    $emits("update:modelValue", "");
+    return "";
+  }
   let momentVal;
   let momentObj = moment(currentDay.value)
     .hour(hms.value.hh)
@@ -366,17 +377,11 @@ watch(
   { immediate: true }
 );
 
-// 点击日期
-const handleDayClick = (item: any) => {
-  currentDay.value = item.value;
-  if (item.type !== "current") {
-    currentMonth.value =
-      item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
-  }
-};
-
 // 确认事件
-const ok = () => {};
+const ok = () => {
+  // @ts-ignore
+  dropdownRef.value.hide();
+};
 
 // 现在时间
 const now = () => {
@@ -384,7 +389,9 @@ const now = () => {
 };
 
 // 清空日期
-const clear = () => {};
+const clear = () => {
+  currentDay.value = -1;
+};
 
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
@@ -406,11 +413,35 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
 // 显示年列表面板
 const showYearPanel = () => {
   showPane.value = "year";
-  nextTick(() => {
-    (
-      document.querySelector(".year-panel-item.active") as HTMLElement
-    ).scrollIntoView({ block: "center" });
-  });
+};
+
+// 点击年份
+const handleYearClick = (item: any) => {
+  currentYear.value = item;
+  if (props.type === "year") {
+    currentDay.value = moment().year(item).valueOf();
+  } else {
+    showPane.value = "date";
+  }
+};
+
+// 点击月份
+const handleMonthClick = (item: any) => {
+  currentMonth.value = MONTH_NAME.indexOf(item);
+  if (props.type === "month") {
+      currentDay.value = moment().month(MONTH_NAME.indexOf(item)).valueOf();
+  } else {
+      showPane.value = "date";
+  }
+};
+
+// 点击日期
+const handleDayClick = (item: any) => {
+  currentDay.value = item.value;
+  if (item.type !== "current") {
+    currentMonth.value =
+      item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
+  }
 };
 
 // 点击时间 - hms