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

fix: date-picker 的 v-model 默认 hh:mm:ss 读取不正确

Browse Source
This commit is contained in:
就眠儀式 2022-04-02 05:47:37 +08:00
parent 38f584a374
commit 4dd7f5ed95
3 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
example/docs/zh-CN/components/datePicker.md
View File

@ -118,7 +118,7 @@ export default {
::: demo
<template>
<lay-date-picker type="time" v-model="endTime4"></lay-date-picker>
<lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
</template>
<script>
@ -127,10 +127,10 @@ import { ref } from 'vue'
export default {
setup() {
const endTime4 = ref("2022-03-04 17:35:00");
const endTime5 = ref("2022-03-04 17:35:00");
return {
endTime4
endTime5
}
}
}
@ -144,7 +144,7 @@ export default {
::: demo
<template>
<lay-date-picker type="yearmonth" v-model="endTime5"></lay-date-picker>
<lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
</template>
<script>
@ -153,10 +153,10 @@ import { ref } from 'vue'
export default {
setup() {
const endTime5 = ref("2022-03-04 17:35:00");
const endTime6 = ref("2022-03-04 17:35:00");
return {
endTime5
endTime6
}
}
}

3
example/docs/zh-CN/guide/changelog.md
View File

@ -23,8 +23,9 @@
<li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
<li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
<li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
<li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
<li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
<li>[修复] date-picker 默认 12 小时制为 24 小时制。</li>
<li>[修复] upload 组件 number 属性必填警告。</li>
<li>[修复] variable 全局变量重复导入的问题。</li>
<li>[修复] menu 组件 openKeys 属性失效。</li>

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

@ -95,7 +95,10 @@
</div>
<!-- 年份选择器 -->
<div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
<div
class="layui-laydate"
v-show="showPane === 'year' || showPane === 'yearmonth'"
>
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
<div class="layui-laydate-header">
<div class="laydate-set-ym">
@ -253,10 +256,9 @@
<script lang="ts" setup>
import {
computed,
nextTick,
ref,
watch,
computed,
defineProps,
defineEmits,
onMounted,
@ -268,6 +270,17 @@ import LayInput from "../input/index.vue";
import LayDropdown from "../dropdown/index.vue";
import { getDayLength, getYears, getMonth, getYear } from "./day";
export interface LayDatePickerProps {
modelValue?: string;
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
name?: string;
}
const props = withDefaults(defineProps<LayDatePickerProps>(), {
modelValue: "",
type: "date",
});
const dropdownRef = ref(null);
const $emits = defineEmits(["update:modelValue"]);
@ -287,24 +300,13 @@ const MONTH_NAME = [
"12月",
];
const hms = ref({ hh: 0, mm: 0, ss: 0 });
const hms = ref({ hh: moment(props.modelValue).hour(), mm: moment(props.modelValue).minute(), ss: moment(props.modelValue).second() });
const els = [
{ count: 24, type: "hh" },
{ count: 60, type: "mm" },
{ count: 60, type: "ss" },
];
export interface LayDatePickerProps {
modelValue?: string;
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
name?: string;
}
const props = withDefaults(defineProps<LayDatePickerProps>(), {
modelValue: "",
type: "date",
});
const currentYear = ref(getYear());
const currentMonth = ref(getMonth());
const currentDay = ref<number>();
@ -321,6 +323,12 @@ watch(
{ immediate: true }
);
onMounted(() => {
hms.value.hh = moment(props.modelValue).hour();
hms.value.mm = moment(props.modelValue).minute();
hms.value.ss = moment(props.modelValue).second();
})
// 计算结果日期
const dateValue = computed<string>(() => {
if (currentDay.value === -1) {
@ -328,7 +336,10 @@ const dateValue = computed<string>(() => {
return "";
}
let momentVal;
let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
let momentObj = moment(currentDay.value)
.hour(hms.value.hh)
.minute(hms.value.mm)
.second(hms.value.ss);
switch (props.type) {
case "date":
@ -351,6 +362,7 @@ const dateValue = computed<string>(() => {
break;
default:
momentVal = momentObj.format();
break;
}
$emits("update:modelValue", momentVal);
return momentVal;
@ -453,7 +465,7 @@ const handleYearClick = (item: any) => {
currentYear.value = item;
if (props.type === "year") {
currentDay.value = moment().year(item).valueOf();
} else if(props.type === 'yearmonth') {
} else if (props.type === "yearmonth") {
currentDay.value = moment().year(item).valueOf();
showPane.value = "month";
} else {
@ -465,9 +477,13 @@ const handleYearClick = (item: any) => {
const handleMonthClick = (item: any) => {
currentMonth.value = MONTH_NAME.indexOf(item);
if (props.type === "month") {
currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
} else if(props.type === "yearmonth") {
currentDay.value = moment(currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
currentDay.value = moment(currentDay.value)
.month(MONTH_NAME.indexOf(item))
.valueOf();
} else if (props.type === "yearmonth") {
currentDay.value = moment(currentDay.value)
.month(MONTH_NAME.indexOf(item))
.valueOf();
} else {
showPane.value = "date";
}
@ -489,11 +505,4 @@ const choseTime = (e: any) => {
hms.value[type as keyof typeof hms.value] = value;
}
};
onMounted(() => {
hms.value.hh = moment(props.modelValue).hour();
hms.value.mm = moment(props.modelValue).minute();
hms.value.ss = moment(props.modelValue).second();
console.log(JSON.stringify(hms.value));
});
</script>