✨(component): 优化datePicker 新增readonly与allClear两个属性

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

@@ -79,6 +79,7 @@ const handleMonthClick = (item: any) => {
     }
     if (datePicker.type === "date" || datePicker.type === "datetime") {
       emits("update:modelValue", MONTH_NAME.indexOf(item));
+      datePicker.showPanel.value = datePicker.type;
     }
   }
   if (datePicker.simple) {
@@ -101,7 +102,11 @@ const footOnOk = () => {
     emits("ok");
     return;
   } else {
-    datePicker.ok();
+    if(datePicker.type==='datetime'||datePicker.type==='date'){
+      datePicker.showPanel.value = datePicker.type;
+    }else{
+      datePicker.ok();
+    }
   }
 };
 

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

@@ -42,10 +42,8 @@
         class="laydate-btns-time"
         >选择日期</span
       >
-      <template v-else>
+      <template v-else-if="!isNaN(hms.hh)&&!isNaN(hms.mm)&&!isNaN(hms.ss)">
-        {{ hms.hh > 9 ? hms.hh : "0" + hms.hh }}:{{
+        {{dayjs().hour(hms.hh).minute(hms.mm).second(hms.ss).format('HH:mm:ss')}}
-          hms.mm > 9 ? hms.mm : "0" + hms.mm
-        }}:{{ hms.ss > 9 ? hms.ss : "0" + hms.ss }}
       </template>
     </PanelFoot>
   </div>
@@ -132,6 +130,9 @@ const footOnOk = () => {
     return;
   } else {
     datePicker.ok();
+    if(datePicker.type==='datetime'){
+      datePicker.showPanel.value='date';
+    }
   }
 };
 //现在回调

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

@@ -30,7 +30,7 @@
         class="laydate-btns-time"
         >选择月份</span
       >
-      <template v-else>{{ Year }}</template>
+      <template v-else-if="Year>0">{{ Year }}</template>
     </PanelFoot>
   </div>
 </template>
@@ -71,7 +71,8 @@ const handleYearClick = (item: any) => {
       datePicker.showPanel.value = "month";
       emits("update:modelValue", Year.value);
     } else {
-      datePicker.showPanel.value = "date";
+      emits("update:modelValue", Year.value);
+      datePicker.showPanel.value = datePicker.type;
     }
   }
 
@@ -117,7 +118,11 @@ const footOnOk = () => {
     emits("ok");
     return;
   } else {
-    datePicker.ok();
+    if(datePicker.type==='datetime'||datePicker.type==='date'){
+      datePicker.showPanel.value = datePicker.type;
+    }else{
+      datePicker.ok();
+    }
   }
 };
 

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

@@ -1,37 +1,14 @@
 <template>
   <div>
-    <lay-dropdown
+    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
-      ref="dropdownRef"
+      <lay-input :name="name" :readonly="readonly" v-model="(dateValue as string)" :placeholder="placeholder"
-      :disabled="disabled"
+        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range" @change="onChange" :allow-clear="allowClear" @clear="dateValue='';onChange()">
-      :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="readonly" :name="name" v-model="dateValue[0]" :disabled="disabled" @change="onChange" 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="readonly" :name="name" :allow-clear="allowClear" v-model="dateValue[1]" :disabled="disabled" @change="onChange" class="end-input" @clear="dateValue=[];onChange()">
-          readonly
-          :name="name"
-          :model-value="dateValue[1]"
-          :disabled="disabled"
-          class="end-input"
-        >
         </lay-input>
       </div>
 
@@ -115,6 +92,8 @@ export interface LayDatePickerProps {
   min?: string;
   range?: boolean;
   rangeSeparator?: string;
+  readonly?:boolean;
+  allowClear?:boolean;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -124,6 +103,8 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   simple: false,
   range: false,
   rangeSeparator: "至",
+  readonly:false,
+  allowClear:true,
 });
 
 const dropdownRef = ref(null);
@@ -180,10 +161,10 @@ const getDateValue = () => {
         .format("HH:mm:ss");
       break;
     case "yearmonth":
-      dayjsVal = dayjs()
+      dayjsVal = currentYear.value !== -1&&currentMonth.value !== -1?dayjs()
         .year(currentYear.value)
         .month(currentMonth.value)
-        .format("YYYY-MM");
+        .format("YYYY-MM"):'';
       break;
     default:
       dayjsVal =
@@ -196,7 +177,12 @@ const getDateValue = () => {
           : "";
       break;
   }
-  dateValue.value = dayjsVal;
+  dateValue.value = dayjsVal!=='Invalid Date'?dayjsVal:'';
+  if (dayjsVal === 'Invalid Date') {
+    unWatch = false;
+    $emits("update:modelValue", '');
+    return;
+  }
   $emits("update:modelValue", dayjsVal);
   setTimeout(() => {
     unWatch = false;
@@ -274,7 +260,6 @@ watch(
     hms.value.hh = dayjs(initModelValue).hour();
     hms.value.mm = dayjs(initModelValue).minute();
     hms.value.ss = dayjs(initModelValue).second();
-
     if (initModelValue.length === 8 && props.type === "time") {
       //dayjs 解析时间容错
       let modelValue = initModelValue;
@@ -283,10 +268,9 @@ watch(
       hms.value.mm = dayjs(modelValue).minute();
       hms.value.ss = dayjs(modelValue).second();
     }
-    currentYear.value = getYear(initModelValue);
+    currentYear.value = initModelValue?getYear(initModelValue):-1;
-    currentMonth.value = getMonth(initModelValue);
+    currentMonth.value = initModelValue?getMonth(initModelValue):-1;
-    currentDay.value = getDay(initModelValue);
+    currentDay.value = initModelValue?getDay(initModelValue):-1;
-
     rangeValue.first = initModelValue;
     rangeValue.last =
       props.range && props.modelValue
@@ -301,6 +285,13 @@ watch(
   { immediate: true }
 );
 
+const onChange=()=>{
+  if (dropdownRef.value)
+    // @ts-ignore
+    dropdownRef.value.hide();
+  $emits('update:modelValue',dateValue.value)
+}
+
 provide("datePicker", {
   currentYear: currentYear,
   currentMonth: currentMonth,

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

@@ -259,7 +259,10 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 | v-model      | 当前时间                                                     | `string`         | --    | —             |
 | type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time` `yearmonth`             |
 | disabled      | 是否禁止修改                                                     | `boolean`         | false    | —             |
-| simple      | 一次性选择，无需点击确认按钮                                         | `boolean`         | false    | —             |
+| simple      | 一次性选择，无需点击确认按钮             | `boolean`         | false    | —             |
+| readonly      | 只读             | `boolean`         | false    | —             |
+| allowClear    | 允许清空             | `boolean`         | true    | —             |
+
 
 :::