From 5785a4405daf5550d3aeb54010a4cde1341eafed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= Date: Mon, 10 Oct 2022 10:47:04 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20datePicker=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=97=B6=E9=97=B4=E6=88=B3=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/datePicker/index.vue | 21 +++++++-- .../src/component/datePicker/interface.ts | 1 + .../src/components/LayTableBox.vue | 1 + .../document/zh-CN/components/datePicker.md | 45 ++++++++++++++++--- 4 files changed, 58 insertions(+), 10 deletions(-) diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue index 2abcb87d..fcfd06fa 100644 --- a/package/component/src/component/datePicker/index.vue +++ b/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(), { @@ -147,6 +148,7 @@ const props = withDefaults(defineProps(), { 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 }); diff --git a/package/component/src/component/datePicker/interface.ts b/package/component/src/component/datePicker/interface.ts index 78b57d8c..b5ef7e1e 100644 --- a/package/component/src/component/datePicker/interface.ts +++ b/package/component/src/component/datePicker/interface.ts @@ -23,4 +23,5 @@ export type provideType = { }; rangeSeparator: string; simple: boolean; + timestamp:boolean; }; diff --git a/package/document-component/src/components/LayTableBox.vue b/package/document-component/src/components/LayTableBox.vue index 95d31b6c..adbde162 100644 --- a/package/document-component/src/components/LayTableBox.vue +++ b/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; diff --git a/package/document-component/src/document/zh-CN/components/datePicker.md b/package/document-component/src/document/zh-CN/components/datePicker.md index ae2eb0c2..b9fd9f0f 100644 --- a/package/document-component/src/document/zh-CN/components/datePicker.md +++ b/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 午夜开始所经过的毫秒数) + + + + + +::: + ::: 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 | — | — | -| simple | 一次性选择，无需点击确认按钮 | `boolean` | false | -- | -- | -| readonly | 只读 | `boolean` | false | -- | -- | -| allowClear | 允许清空 | `boolean` | true | -- | -- | +| disabled | 是否禁止修改 | `boolean` | `false` | — | — | +| simple | 一次性选择，无需点击确认按钮 | `boolean` | `false` | -- | -- | +| readonly | 只读 | `boolean` | `false` | -- | -- | +| 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