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

✨(component): 修复月份范围选择与日期范围选择月份单位未翻译的问题

Browse Source
This commit is contained in:
就眠儀式 2022-10-25 17:41:14 +08:00
parent 6d1552f83b
commit ae2cdb8bf4
2 changed files with 38 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
package/component/src/component/datePicker/components/DateRange.vue
View File

@ -31,7 +31,7 @@
</lay-dropdown> </lay-dropdown>
<lay-dropdown ref="dropdownMonthPanelRefLeft"> <lay-dropdown ref="dropdownMonthPanelRefLeft">
<span class="laydate-range-time" <span class="laydate-range-time"
>{{ startTime.month + 1 }} {{ t("datePicker.month") }}</span > {{ MONTH_NAME[startTime.month] }}</span
> >
<template #content> <template #content>
<MonthPanel <MonthPanel
@ -88,12 +88,9 @@
</lay-dropdown> </lay-dropdown>
<lay-dropdown ref="dropdownMonthPanelRefRight"> <lay-dropdown ref="dropdownMonthPanelRefRight">
<span class="laydate-range-time" <span class="laydate-range-time"
>{{ > {{ MONTH_NAME[startTime.month + 1 > 11
startTime.month + 2 > 12 ? startTime.month + 1 - 12
? startTime.month - 10 : startTime.month + 1] }} </span
: startTime.month + 2
}}
{{ t("datePicker.month") }}</span
> >
<template #content> <template #content>
<MonthPanel <MonthPanel
@ -180,7 +177,7 @@ export default {
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { inject, reactive, ref, watch } from "vue"; import { computed, inject, reactive, ref, watch } from "vue";
import { provideType } from "../interface"; import { provideType } from "../interface";
import { setDateList } from "../day"; import { setDateList } from "../day";
import PanelFoot from "./PanelFoot.vue"; import PanelFoot from "./PanelFoot.vue";
@ -200,10 +197,26 @@ const emits = defineEmits([
"update:startTime", "update:startTime",
"update:endTime", "update:endTime",
]); ]);
const datePicker: provideType = inject("datePicker") as provideType; const datePicker: provideType = inject("datePicker") as provideType;
const { t } = useI18n(); const { t } = useI18n();
const MONTH_NAME = computed(() => [
t("datePicker.january"),
t("datePicker.february"),
t("datePicker.march"),
t("datePicker.april"),
t("datePicker.may"),
t("datePicker.june"),
t("datePicker.july"),
t("datePicker.august"),
t("datePicker.september"),
t("datePicker.october"),
t("datePicker.november"),
t("datePicker.december"),
]);
const prevDateList = ref<any>([]); const prevDateList = ref<any>([]);
const nextDateList = ref<any>([]); const nextDateList = ref<any>([]);
const startTime = reactive({ const startTime = reactive({

32
package/component/src/component/datePicker/components/MonthRange.vue
View File

@ -144,21 +144,23 @@ const endTime = reactive({
? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
: -1, : -1,
}); });
let hoverMonth = ref(-1); let hoverMonth = ref(-1);
const MONTH_NAME = [
"1月", const MONTH_NAME = computed(() => [
"2月", t("datePicker.january"),
"3月", t("datePicker.february"),
"4月", t("datePicker.march"),
"5月", t("datePicker.april"),
"6月", t("datePicker.may"),
"7月", t("datePicker.june"),
"8月", t("datePicker.july"),
"9月", t("datePicker.august"),
"10月", t("datePicker.september"),
"11月", t("datePicker.october"),
"12月", t("datePicker.november"),
]; t("datePicker.december"),
]);
// 切换年月 // 切换年月
const changeYear = (num: number) => { const changeYear = (num: number) => {
@ -284,7 +286,7 @@ const ifHasRangeHoverClass = computed(() => {
const getUnix = computed(() => { const getUnix = computed(() => {
return function (item: any, position: "left" | "right") { return function (item: any, position: "left" | "right") {
let month = MONTH_NAME.indexOf(item); let month = MONTH_NAME.value.indexOf(item);
let year = position === "left" ? startTime.year : startTime.year + 1; let year = position === "left" ? startTime.year : startTime.year + 1;
return dayjs(year + "-" + (month + 1)).valueOf(); return dayjs(year + "-" + (month + 1)).valueOf();
}; };