✨(component): datePicker新增时间戳模式

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

@@ -16,7 +16,7 @@
         :prefix-icon="prefixIcon"
         :suffix-icon="suffixIcon"
         :disabled="disabled"
-        v-model="dateValue"
+        v-model="(dateValue as string)"
         v-if="!range"
         @change="onChange"
         :allow-clear="!disabled && allowClear"
@@ -120,7 +120,7 @@ import MonthRange from "./components/MonthRange.vue";
 export interface LayDatePickerProps {
   type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
   placeholder?: string;
-  modelValue?: string | string[];
+  modelValue?: string | number | string[];
   disabled?: boolean;
   simple?: boolean;
   name?: string;
@@ -133,6 +133,7 @@ export interface LayDatePickerProps {
   size?: "lg" | "md" | "sm" | "xs";
   prefixIcon?: string;
   suffixIcon?: string;
+  timestamp?:boolean
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -147,6 +148,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   size: "md",
   prefixIcon: "layui-icon-date",
   suffixIcon: "",
+  timestamp:false
 });
 
 const dropdownRef = ref(null);
@@ -228,7 +230,11 @@ const getDateValue = () => {
     $emits("update:modelValue", "");
     return;
   }
-  $emits("update:modelValue", dayjsVal);
+  if(props.timestamp){
+    $emits("update:modelValue", dayjs(dayjsVal).unix()*1000);
+  }else{
+    $emits("update:modelValue", dayjsVal);
+  }
   setTimeout(() => {
     unWatch = false;
   }, 0);
@@ -294,10 +300,13 @@ watch(
     if (unWatch) {
       return;
     }
-    let initModelValue =
+    let initModelValue:string =
       props.range && props.modelValue
         ? (props.modelValue as string[])[0] || ""
         : (props.modelValue as string);
+    if(props.type==='month'||props.type==='year'){
+      initModelValue+='';
+    }
 
     hms.value.hh = isNaN(dayjs(initModelValue).hour())
       ? 0
@@ -323,6 +332,9 @@ watch(
     if (props.type === "date" || props.type === "datetime") {
       if (currentYear.value === -1) currentYear.value = dayjs().year();
       if (currentMonth.value === -1) currentMonth.value = dayjs().month();
+      if(props.timestamp){
+        currentDay.value = initModelValue ? dayjs(parseInt(initModelValue)).startOf('date').unix()*1000 : -1;
+      }
     }
     rangeValue.first = initModelValue;
     rangeValue.last =
@@ -359,5 +371,6 @@ provide("datePicker", {
   rangeValue: rangeValue,
   rangeSeparator: props.rangeSeparator,
   simple: props.simple,
+  timestamp:props.timestamp
 });
 </script>

package/component/src/component/datePicker/interface.ts

@@ -23,4 +23,5 @@ export type provideType = {
   };
   rangeSeparator: string;
   simple: boolean;
+  timestamp:boolean;
 };

package/document-component/src/components/LayTableBox.vue

@@ -29,6 +29,7 @@
 .lay-table-box table th code,
 .lay-table-box table td code {
   line-height: 26px;
+  white-space: nowrap;
 }
 .lay-table-box table th {
   color: #666;

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

@@ -130,7 +130,7 @@ export default {
    const mouth = ref("4");
 
     return {
-      endTime4
+      mouth
     }
   }
 }
@@ -249,6 +249,39 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 
 :::
 
+::: title 时间戳模式
+:::
+
+::: demo 仅在type等于`date`、`datetime`时有效 传入的一个 Unix 时间戳 (13 位数字，从1970年1月1日 UTC 午夜开始所经过的毫秒数) 
+
+<template>
+  <div style="display:flex;  align-items: center;margin-bottom: 5px;">
+    <lay-date-picker v-model="timestamp1" timestamp></lay-date-picker> 
+    <span style="margin-left:10px">modelValue:{{timestamp1}}</span>
+  </div>
+    <div style="display:flex;  align-items: center;margin-bottom: 5px;">
+    <lay-date-picker v-model="timestamp2" type='datetime' timestamp></lay-date-picker> 
+    <span style="margin-left:10px">modelValue:{{timestamp2}}</span>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const timestamp1 = ref(new Date().getTime());
+   const timestamp2 = ref(new Date().getTime());
+    return {
+      timestamp1,timestamp2
+    }
+  }
+
+</script>
+
+:::
+
 ::: title Date Picker 属性
 :::
 
@@ -258,14 +291,14 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']);
 | ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |-------------- |
 | v-model      | 当前时间                                                     | `string`         | --    | --             | --             |
 | type        | 选择类型                                                   | `string`         | `date`    | `date` `datetime` `year` `month` `time` `yearmonth`             | --             |
-| disabled      | 是否禁止修改                                                     | `boolean`         | false    | —             | —             |
+| disabled      | 是否禁止修改                                                     | `boolean`         | `false`    | —             | —             |
-| simple      | 一次性选择，无需点击确认按钮             | `boolean`         | false    | --             | --             |
+| simple      | 一次性选择，无需点击确认按钮             | `boolean`         | `false`    | --             | --             |
-| readonly      | 只读             | `boolean`         | false    | --             | --             |
+| readonly      | 只读             | `boolean`         | `false`    | --             | --             |
-| allowClear    | 允许清空             | `boolean`         | true    | --             | --             |
+| allowClear    | 允许清空             | `boolean`         | `true`    | --             | --             |
 | size    | 尺寸            | `string`         | `lg` `md` `sm` `xs`    | `md`            | --             |
 | prefix-icon    | 前置图标            | `string`         | `layui-icon-date`    |  内置图标集            | `1.4.0`             |
 | suffix-icon    | 后置图标            | `string`         | --    | 内置图标集            | `1.4.0`             |
-
+| timestamp    | 时间戳模式(13位),仅对date和datetime有效| `boolean`        | `false`    | `true` `false`         | `1.6.5`             |
 :::
 
 ::: contributor datePicker