[修复] 日期选择组件在处理传入参数时无效的问题
This commit is contained in:
castleiMac
parent
e10e7697f7
commit
d686c7ef41
@ -40,7 +40,7 @@ export default {
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-date-picker type="datetime" v-model="endTime"></lay-date-picker>
|
<lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -49,10 +49,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const endTime = ref("2022-03-04 17:35:00");
|
const endTime2 = ref("2022-03-04 17:35:00");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
endTime
|
endTime2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -66,7 +66,7 @@ export default {
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-date-picker type="year" v-model="endTime"></lay-date-picker>
|
<lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -75,10 +75,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const endTime = ref("2022-03-04 17:35:00");
|
const endTime3 = ref("2022-03-04 17:35:00");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
endTime
|
endTime3
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -92,7 +92,7 @@ export default {
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-date-picker type="month" v-model="endTime"></lay-date-picker>
|
<lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -101,10 +101,10 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const endTime = ref("2022-03-04 17:35:00");
|
const endTime4 = ref("2022-03-04 17:35:00");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
endTime
|
endTime4
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,43 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<lay-dropdown ref="dropdownRef">
|
<lay-dropdown ref="dropdownRef">
|
||||||
<lay-input :name="name" :value="dateValue || modelValue" readonly>
|
<lay-input :name="name" :value="dateValue" readonly>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<lay-icon type="layui-icon-date"></lay-icon>
|
<lay-icon type="layui-icon-date"></lay-icon>
|
||||||
</template>
|
</template>
|
||||||
</lay-input>
|
</lay-input>
|
||||||
<template #content>
|
<template #content>
|
||||||
<!-- 日期选择 -->
|
<!-- 日期选择 -->
|
||||||
<div
|
<div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
|
||||||
class="layui-laydate"
|
|
||||||
v-show="showPane === 'date' || showPane === 'datetime'"
|
|
||||||
>
|
|
||||||
<div class="layui-laydate-main laydate-main-list-0">
|
<div class="layui-laydate-main laydate-main-list-0">
|
||||||
<div class="layui-laydate-header">
|
<div class="layui-laydate-header">
|
||||||
<i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-prev-y"
|
class="layui-icon laydate-icon laydate-prev-y"
|
||||||
@click="changeYearOrMonth('year', -1)"
|
@click="changeYearOrMonth('year', -1)"
|
||||||
></i
|
></i>
|
||||||
><i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-prev-m"
|
class="layui-icon laydate-icon laydate-prev-m"
|
||||||
@click="changeYearOrMonth('month', -1)"
|
@click="changeYearOrMonth('month', -1)"
|
||||||
></i
|
></i>
|
||||||
>
|
|
||||||
<div class="laydate-set-ym">
|
<div class="laydate-set-ym">
|
||||||
<span @click="showYearPanel">{{ currentYear }} 年</span
|
<span @click="showYearPanel">{{ currentYear }} 年</span>
|
||||||
><span @click="showPane = 'month'"
|
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||||
>{{ currentMonth + 1 }} 月</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-next-m"
|
class="layui-icon laydate-icon laydate-next-m"
|
||||||
@click="changeYearOrMonth('month', 1)"
|
@click="changeYearOrMonth('month', 1)"
|
||||||
></i
|
></i>
|
||||||
><i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-next-y"
|
class="layui-icon laydate-icon laydate-next-y"
|
||||||
@click="changeYearOrMonth('year', 1)"
|
@click="changeYearOrMonth('year', 1)"
|
||||||
></i
|
></i>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-content">
|
<div class="layui-laydate-content">
|
||||||
<table>
|
<table>
|
||||||
@ -49,8 +42,8 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<template
|
<template
|
||||||
v-for="(o, i) of dateList.length % 7 == 0
|
v-for="(o, i) of dateList.length % 7 == 0
|
||||||
? dateList.length / 7
|
? dateList.length / 7
|
||||||
: Math.floor(dateList.length / 7) + 1"
|
: Math.floor(dateList.length / 7) + 1"
|
||||||
:key="i"
|
:key="i"
|
||||||
>
|
>
|
||||||
<tr>
|
<tr>
|
||||||
@ -66,9 +59,7 @@
|
|||||||
'layui-this': item.value === currentDay,
|
'layui-this': item.value === currentDay,
|
||||||
}"
|
}"
|
||||||
@click="handleDayClick(item)"
|
@click="handleDayClick(item)"
|
||||||
>
|
>{{ item.day }}</td>
|
||||||
{{ item.day }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -80,16 +71,11 @@
|
|||||||
v-if="type === 'datetime'"
|
v-if="type === 'datetime'"
|
||||||
@click="showPane = 'time'"
|
@click="showPane = 'time'"
|
||||||
class="laydate-btns-time"
|
class="laydate-btns-time"
|
||||||
>选择时间</span
|
>选择时间</span>
|
||||||
>
|
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||||
>清空</span
|
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||||
>现在</span
|
|
||||||
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
|
||||||
>确定</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -102,19 +88,14 @@
|
|||||||
<span class="laydate-time-text">选择年份</span>
|
<span class="laydate-time-text">选择年份</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
|
||||||
class="layui-laydate-content"
|
|
||||||
style="height: 220px; overflow-y: auto"
|
|
||||||
>
|
|
||||||
<ul class="layui-laydate-list laydate-year-list">
|
<ul class="layui-laydate-list laydate-year-list">
|
||||||
<li
|
<li
|
||||||
v-for="item of yearList"
|
v-for="item of yearList"
|
||||||
:key="item"
|
:key="item"
|
||||||
:class="[{ 'layui-this': currentYear === item }]"
|
:class="[{ 'layui-this': currentYear === item }]"
|
||||||
@click="handleYearClick(item)"
|
@click="handleYearClick(item)"
|
||||||
>
|
>{{ item }}</li>
|
||||||
{{ item }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -123,16 +104,11 @@
|
|||||||
class="layui-laydate-preview"
|
class="layui-laydate-preview"
|
||||||
title="当前选中的结果"
|
title="当前选中的结果"
|
||||||
style="color: rgb(102, 102, 102)"
|
style="color: rgb(102, 102, 102)"
|
||||||
>2022</span
|
>2022</span>
|
||||||
>
|
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||||
>清空</span
|
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||||
>现在</span
|
|
||||||
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
|
||||||
>确定</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -144,23 +120,18 @@
|
|||||||
<i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-prev-y"
|
class="layui-icon laydate-icon laydate-prev-y"
|
||||||
@click="changeYearOrMonth('year', -1)"
|
@click="changeYearOrMonth('year', -1)"
|
||||||
></i
|
></i>
|
||||||
>
|
|
||||||
<div class="laydate-set-ym">
|
<div class="laydate-set-ym">
|
||||||
<span
|
<span
|
||||||
@click="showYearPanel"
|
@click="showYearPanel"
|
||||||
v-if="showPane === 'date' || showPane === 'datetime'"
|
v-if="showPane === 'date' || showPane === 'datetime'"
|
||||||
>{{ currentYear }} 年</span
|
>{{ currentYear }} 年</span>
|
||||||
>
|
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||||
<span @click="showPane = 'month'"
|
|
||||||
>{{ currentMonth + 1 }} 月</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i
|
||||||
class="layui-icon laydate-icon laydate-next-y"
|
class="layui-icon laydate-icon laydate-next-y"
|
||||||
@click="changeYearOrMonth('year', 1)"
|
@click="changeYearOrMonth('year', 1)"
|
||||||
></i
|
></i>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-content" style="height: 220px">
|
<div class="layui-laydate-content" style="height: 220px">
|
||||||
<ul class="layui-laydate-list laydate-month-list">
|
<ul class="layui-laydate-list laydate-month-list">
|
||||||
@ -171,9 +142,7 @@
|
|||||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||||
]"
|
]"
|
||||||
@click="handleMonthClick(item)"
|
@click="handleMonthClick(item)"
|
||||||
>
|
>{{ item.slice(0, 3) }}</li>
|
||||||
{{ item.slice(0, 3) }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -182,16 +151,11 @@
|
|||||||
class="layui-laydate-preview"
|
class="layui-laydate-preview"
|
||||||
title="当前选中的结果"
|
title="当前选中的结果"
|
||||||
style="color: rgb(102, 102, 102)"
|
style="color: rgb(102, 102, 102)"
|
||||||
>2022-03</span
|
>2022-03</span>
|
||||||
>
|
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||||
>清空</span
|
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||||
>现在</span
|
|
||||||
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
|
||||||
>确定</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -220,26 +184,18 @@
|
|||||||
? 'layui-this'
|
? 'layui-this'
|
||||||
: '',
|
: '',
|
||||||
]"
|
]"
|
||||||
>
|
>{{ index.toString().padStart(2, "0") }}</li>
|
||||||
{{ index.toString().padStart(2, "0") }}
|
|
||||||
</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<div class="layui-laydate-footer">
|
||||||
<span @click="showPane = 'date'" class="laydate-btns-time"
|
<span @click="showPane = 'date'" class="laydate-btns-time">返回日期</span>
|
||||||
>返回日期</span
|
|
||||||
>
|
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear"
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
||||||
>清空</span
|
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
||||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
||||||
>现在</span
|
|
||||||
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
|
|
||||||
>确定</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -309,7 +265,14 @@ watch(
|
|||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
// 格式化
|
||||||
|
const fmtMap = {
|
||||||
|
date: 'YYYY-MM-DD',
|
||||||
|
datetime: 'YYYY-MM-DD hh:mm:ss',
|
||||||
|
year: 'YYYY',
|
||||||
|
month: 'MM',
|
||||||
|
'': '',
|
||||||
|
}
|
||||||
// 计算结果日期
|
// 计算结果日期
|
||||||
const dateValue = computed<string>(() => {
|
const dateValue = computed<string>(() => {
|
||||||
if (currentDay.value === -1) {
|
if (currentDay.value === -1) {
|
||||||
@ -317,27 +280,10 @@ const dateValue = computed<string>(() => {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
let momentVal;
|
let momentVal;
|
||||||
let momentObj = moment(currentDay.value)
|
let momentObj = moment(props.modelValue || currentDay.value)
|
||||||
.hour(hms.value.hh)
|
momentVal = momentObj.format(fmtMap[props.type])
|
||||||
.minute(hms.value.mm)
|
if (momentVal != props.modelValue)
|
||||||
.second(hms.value.ss);
|
$emits("update:modelValue", momentVal);
|
||||||
switch (props.type) {
|
|
||||||
case "date":
|
|
||||||
momentVal = momentObj.format("YYYY-MM-DD");
|
|
||||||
break;
|
|
||||||
case "datetime":
|
|
||||||
momentVal = momentObj.format("YYYY-MM-DD hh:mm:ss");
|
|
||||||
break;
|
|
||||||
case "year":
|
|
||||||
momentVal = momentObj.format("YYYY");
|
|
||||||
break;
|
|
||||||
case "month":
|
|
||||||
momentVal = momentObj.format("MM");
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
momentVal = momentObj.format();
|
|
||||||
}
|
|
||||||
$emits("update:modelValue", momentVal);
|
|
||||||
return momentVal;
|
return momentVal;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user