fix: date-picker 的 v-model 默认 hh:mm:ss 读取不正确

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

@@ -118,7 +118,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="time" v-model="endTime4"></lay-date-picker>
+  <lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
 </template>
 
 <script>
@@ -127,10 +127,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime4 = ref("2022-03-04 17:35:00");
+   const endTime5 = ref("2022-03-04 17:35:00");
 
     return {
-      endTime4
+      endTime5
     }
   }
 }
@@ -144,7 +144,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="yearmonth" v-model="endTime5"></lay-date-picker>
+  <lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
 </template>
 
 <script>
@@ -153,10 +153,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime5 = ref("2022-03-04 17:35:00");
+   const endTime6 = ref("2022-03-04 17:35:00");
 
     return {
-      endTime5
+      endTime6
     }
   }
 }

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

@@ -23,8 +23,9 @@
           <li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
           <li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
           <li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
+          <li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
+          <li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
           <li>[修复] transfer 组件 showSearch 属性类型警告。</li>              
-          <li>[修复] date-picker 默认 12 小时制为 24 小时制。</li>
           <li>[修复] upload 组件 number 属性必填警告。</li>
           <li>[修复] variable 全局变量重复导入的问题。</li>
           <li>[修复] menu 组件 openKeys 属性失效。</li>

src/component/datePicker/index.vue

@@ -95,7 +95,10 @@
         </div>
 
         <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
+        <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">
@@ -253,10 +256,9 @@
 
 <script lang="ts" setup>
 import {
-  computed,
-  nextTick,
   ref,
   watch,
+  computed,
   defineProps,
   defineEmits,
   onMounted,
@@ -268,6 +270,17 @@ import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getDayLength, getYears, getMonth, getYear } from "./day";
 
+export interface LayDatePickerProps {
+  modelValue?: string;
+  type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
+  name?: string;
+}
+
+const props = withDefaults(defineProps<LayDatePickerProps>(), {
+  modelValue: "",
+  type: "date",
+});
+
 const dropdownRef = ref(null);
 const $emits = defineEmits(["update:modelValue"]);
 
@@ -287,24 +300,13 @@ const MONTH_NAME = [
   "12月",
 ];
 
-const hms = ref({ hh: 0, mm: 0, ss: 0 });
+const hms = ref({ hh: moment(props.modelValue).hour(), mm: moment(props.modelValue).minute(), ss:  moment(props.modelValue).second() });
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
   { count: 60, type: "ss" },
 ];
 
-export interface LayDatePickerProps {
-  modelValue?: string;
-  type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
-  name?: string;
-}
-
-const props = withDefaults(defineProps<LayDatePickerProps>(), {
-  modelValue: "",
-  type: "date",
-});
-
 const currentYear = ref(getYear());
 const currentMonth = ref(getMonth());
 const currentDay = ref<number>();
@@ -321,6 +323,12 @@ watch(
   { immediate: true }
 );
 
+onMounted(() => {
+    hms.value.hh = moment(props.modelValue).hour();
+    hms.value.mm = moment(props.modelValue).minute();
+    hms.value.ss = moment(props.modelValue).second();
+})
+
 // 计算结果日期
 const dateValue = computed<string>(() => {
   if (currentDay.value === -1) {
@@ -328,7 +336,10 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
+  let momentObj = moment(currentDay.value)
+    .hour(hms.value.hh)
+    .minute(hms.value.mm)
+    .second(hms.value.ss);
 
   switch (props.type) {
     case "date":
@@ -351,6 +362,7 @@ const dateValue = computed<string>(() => {
       break;
     default:
       momentVal = momentObj.format();
+      break;
   }
   $emits("update:modelValue", momentVal);
   return momentVal;
@@ -453,7 +465,7 @@ const handleYearClick = (item: any) => {
   currentYear.value = item;
   if (props.type === "year") {
     currentDay.value = moment().year(item).valueOf();
-  } else if(props.type === 'yearmonth') {
+  } else if (props.type === "yearmonth") {
     currentDay.value = moment().year(item).valueOf();
     showPane.value = "month";
   } else {
@@ -465,9 +477,13 @@ const handleYearClick = (item: any) => {
 const handleMonthClick = (item: any) => {
   currentMonth.value = MONTH_NAME.indexOf(item);
   if (props.type === "month") {
-    currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
+    currentDay.value = moment(currentDay.value)
-  } else if(props.type === "yearmonth") {
+      .month(MONTH_NAME.indexOf(item))
-    currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
+      .valueOf();
+  } else if (props.type === "yearmonth") {
+    currentDay.value = moment(currentDay.value)
+      .month(MONTH_NAME.indexOf(item))
+      .valueOf();
   } else {
     showPane.value = "date";
   }
@@ -489,11 +505,4 @@ const choseTime = (e: any) => {
     hms.value[type as keyof typeof hms.value] = value;
   }
 };
-
-onMounted(() => {
-  hms.value.hh = moment(props.modelValue).hour();
-  hms.value.mm = moment(props.modelValue).minute();
-  hms.value.ss = moment(props.modelValue).second();
-  console.log(JSON.stringify(hms.value));
-});
 </script>