theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
0o张不歪o0 2022-07-18 10:16:59 +08:00
parent cd7fdf4a07
commit 1c04089581
5 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package/component/src/component/datePicker/components/MonthPanel.vue
View File

@ -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();
}
}
};

9
package/component/src/component/datePicker/components/TimePanel.vue
View File

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

11
package/component/src/component/datePicker/components/YearPanel.vue
View File

@ -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();
}
}
};

63
package/component/src/component/datePicker/index.vue
View File

@ -1,37 +1,14 @@
<template>
<div>
<lay-dropdown
ref="dropdownRef"
:disabled="disabled"
: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-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
<lay-input :name="name" :readonly="readonly" v-model="(dateValue as string)" :placeholder="placeholder"
prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range" @change="onChange" :allow-clear="allowClear" @clear="dateValue='';onChange()">
</lay-input>
<div class="laydate-range-inputs" v-else>
<lay-input
readonly
:name="name"
:model-value="dateValue[0]"
:disabled="disabled"
class="start-input"
>
<lay-input :readonly="readonly" :name="name" v-model="dateValue[0]" :disabled="disabled" @change="onChange" class="start-input">
</lay-input>
<span class="range-separator">{{ rangeSeparator }}</span>
<lay-input
readonly
:name="name"
:model-value="dateValue[1]"
:disabled="disabled"
class="end-input"
>
<lay-input :readonly="readonly" :name="name" :allow-clear="allowClear" v-model="dateValue[1]" :disabled="disabled" @change="onChange" class="end-input" @clear="dateValue=[];onChange()">
</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);
currentMonth.value = getMonth(initModelValue);
currentDay.value = getDay(initModelValue);
currentYear.value = initModelValue?getYear(initModelValue):-1;
currentMonth.value = initModelValue?getMonth(initModelValue):-1;
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,

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

@ -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 | — |
:::