✨(component): datePicker新增时间戳模式
This commit is contained in:
0o张不歪o0
parent
cb361d7dff
commit
5785a4405d
@ -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>
|
||||
|
||||
@ -23,4 +23,5 @@ export type provideType = {
|
||||
};
|
||||
rangeSeparator: string;
|
||||
simple: boolean;
|
||||
timestamp:boolean;
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 | — | — |
|
||||
| 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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user