♻️(component): datePicker再次重构,加入date与datetime的范围选择
This commit is contained in:
0o张不歪o0
parent
919b89cb7b
commit
f11412de0b
@ -31,11 +31,10 @@
|
||||
></i
|
||||
>
|
||||
</div>
|
||||
<DateContent
|
||||
:date-list="datePicker.dateList"
|
||||
v-model="datePicker.currentDay.value"
|
||||
></DateContent>
|
||||
<PanelFoot></PanelFoot>
|
||||
<DateContent :date-list="dateList" v-model="Day" @simple="footOnOk"></DateContent>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'datetime'" @click="datePicker.showPanel.value='time'" class="laydate-btns-time">选择时间</span>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,26 +44,35 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, ref, watch } from "vue";
|
||||
import { provideType } from "../interface";
|
||||
import { setDateList } from "../day";
|
||||
import PanelFoot from "./PanelFoot.vue";
|
||||
import DateContent from "./components/DateContent.vue";
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import { setDateList } from '../day';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
import DateContent from './components/DateContent.vue'
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
export interface TimePanelProps {
|
||||
modelValue: number;
|
||||
}
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const Day = ref(props.modelValue)
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const dateList = ref<any>([]);
|
||||
|
||||
// 监听年月, 刷新日期
|
||||
watch(
|
||||
[datePicker.currentYear, datePicker.currentMonth],
|
||||
() => {
|
||||
datePicker.dateList.value = setDateList(
|
||||
datePicker.currentYear.value,
|
||||
datePicker.currentMonth.value
|
||||
);
|
||||
dateList.value = setDateList(datePicker.currentYear.value, datePicker.currentMonth.value);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
Day.value = props.modelValue;
|
||||
})
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
if (type === "year") {
|
||||
@ -81,4 +89,22 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
datePicker.currentMonth.value = month;
|
||||
}
|
||||
};
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Day.value)
|
||||
datePicker.ok()
|
||||
}
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
datePicker.currentYear.value=dayjs().year();
|
||||
datePicker.currentMonth.value=dayjs().month();
|
||||
Day.value = new Date(new Date().toDateString()).getTime();
|
||||
}
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Day.value = -1
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="layui-laydate layui-laydate-range" :class="'layui-laydate-range-' + datePicker.showPanel.value">
|
||||
<div style="display:flex">
|
||||
<div class="layui-laydate-main laydate-main-list-0">
|
||||
<div class="layui-laydate-header">
|
||||
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
|
||||
<i class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
|
||||
<div class="laydate-set-ym">
|
||||
<lay-dropdown ref="dropdownYearPanelRefLeft">
|
||||
<span class="laydate-range-time">{{ startTime.year || '--' }}年</span>
|
||||
<template #content>
|
||||
<YearPanel class="time-panel" v-model="startTime.year" @ok="closeTimePanel"></YearPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownMonthPanelRefLeft">
|
||||
<span class="laydate-range-time">{{ startTime.month + 1 }}月</span>
|
||||
<template #content>
|
||||
<MonthPanel class="time-panel" v-model="startTime.month" @ok="closeTimePanel"></MonthPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownTimePanelRefLeft" v-if="datePicker.type === 'datetime'">
|
||||
<span class="laydate-range-time">
|
||||
{{ dayjs().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format('HH:mm:ss')
|
||||
}}
|
||||
</span>
|
||||
<template #content>
|
||||
<TimePanel v-model="startTime.hms" class="time-panel" @ok="closeTimePanel"></TimePanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<DateContent :date-list="prevDateList" v-model:hoverDate="hoverDate" v-model:startDate="startTime.day"
|
||||
v-model:endDate="endTime.day"></DateContent>
|
||||
</div>
|
||||
<div class="layui-laydate-main laydate-main-list-0">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
<lay-dropdown ref="dropdownYearPanelRefRight">
|
||||
<span class="laydate-range-time">{{ startTime.year }}年</span>
|
||||
<template #content>
|
||||
<YearPanel class="time-panel" v-model="endTime.year" @ok="closeRightYearPanel"></YearPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownMonthPanelRefRight">
|
||||
<span class="laydate-range-time">{{ startTime.month + 2 }}月</span>
|
||||
<template #content>
|
||||
<MonthPanel class="time-panel" v-model="endTime.month" @ok="closeRightMonthPanel"></MonthPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownTimePanelRefRight" v-if="datePicker.type === 'datetime'">
|
||||
<span class="laydate-range-time">
|
||||
{{ dayjs().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format('HH:mm:ss') }}
|
||||
</span>
|
||||
<template #content>
|
||||
<TimePanel v-model="endTime.hms" class="time-panel" @ok="closeTimePanel"></TimePanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
<i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i>
|
||||
<i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
|
||||
</div>
|
||||
<DateContent :date-list="nextDateList" v-model:hoverDate="hoverDate" v-model:startDate="startTime.day"
|
||||
v-model:endDate="endTime.day"></DateContent>
|
||||
</div>
|
||||
</div>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="startTime.day !== -1" class="layui-laydate-preview">
|
||||
{{ dayjs(startTime.day).format('YYYY-MM-DD') }}
|
||||
<template v-if="datePicker.type === 'datetime'">
|
||||
{{ dayjs().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format('HH:mm:ss') }}
|
||||
</template>
|
||||
{{ datePicker.rangeSeparator }}
|
||||
<template v-if="endTime.day !== -1">
|
||||
{{ dayjs(endTime.day).format('YYYY-MM-DD') }}
|
||||
<template v-if="datePicker.type === 'datetime'">
|
||||
{{ dayjs().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format('HH:mm:ss') }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
--
|
||||
</template>
|
||||
</span>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "DateRange",
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { inject, reactive, ref, watch } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import { setDateList } from '../day';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
import DateContent from './components/DateContent.vue'
|
||||
import TimePanel from './TimePanel.vue';
|
||||
import YearPanel from './YearPanel.vue';
|
||||
import MonthPanel from './MonthPanel.vue';
|
||||
import dayjs from 'dayjs';
|
||||
export interface DateRangeProps {
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<DateRangeProps>(), {});
|
||||
const emits = defineEmits(['update:modelValue', 'update:startTime', 'update:endTime']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
|
||||
const prevDateList = ref<any>([]);
|
||||
const nextDateList = ref<any>([]);
|
||||
const startTime = reactive({
|
||||
year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
|
||||
month: props.startTime ? dayjs(props.startTime).month() : dayjs().month(),
|
||||
day: props.startTime ? dayjs(props.startTime).startOf('day').valueOf() : -1,
|
||||
hms: {
|
||||
hh: props.startTime ? dayjs(props.startTime).hour() : 0,
|
||||
mm: props.startTime ? dayjs(props.startTime).minute() : 0,
|
||||
ss: props.startTime ? dayjs(props.startTime).second() : 0,
|
||||
}
|
||||
})
|
||||
const endTime = reactive({
|
||||
year: props.endTime ? dayjs(props.endTime).year() : dayjs().year(),
|
||||
month: props.endTime ? dayjs(props.endTime).month() : dayjs().month(),
|
||||
day: props.endTime ? dayjs(props.endTime).startOf('day').valueOf() : -1,
|
||||
hms: {
|
||||
hh: props.endTime ? dayjs(props.endTime).hour() : 0,
|
||||
mm: props.endTime ? dayjs(props.endTime).minute() : 0,
|
||||
ss: props.endTime ? dayjs(props.endTime).second() : 0,
|
||||
}
|
||||
})
|
||||
const hoverDate = ref(-1)
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
if (type === "year") {
|
||||
startTime.year += num;
|
||||
} else {
|
||||
let month = startTime.month + num;
|
||||
if (month > 11) {
|
||||
month = 0;
|
||||
startTime.year++;
|
||||
} else if (month < 0) {
|
||||
month = 11;
|
||||
startTime.year--;
|
||||
}
|
||||
startTime.month = month;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听年月, 刷新日期
|
||||
watch(
|
||||
() => [startTime.year, startTime.month],
|
||||
() => {
|
||||
prevDateList.value = setDateList(startTime.year, startTime.month);
|
||||
nextDateList.value = setDateList(startTime.year, startTime.month + 1);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
|
||||
|
||||
//关闭选择时间的面板
|
||||
const dropdownTimePanelRefLeft = ref();
|
||||
const dropdownTimePanelRefRight = ref();
|
||||
const dropdownYearPanelRefLeft = ref();
|
||||
const dropdownYearPanelRefRight = ref();
|
||||
const dropdownMonthPanelRefLeft = ref();
|
||||
const dropdownMonthPanelRefRight = ref();
|
||||
const closeTimePanel = () => {
|
||||
if (dropdownTimePanelRefLeft.value)
|
||||
dropdownTimePanelRefLeft.value.hide()
|
||||
if (dropdownTimePanelRefRight.value)
|
||||
dropdownTimePanelRefRight.value.hide()
|
||||
if (dropdownYearPanelRefLeft.value)
|
||||
dropdownYearPanelRefLeft.value.hide()
|
||||
if (dropdownMonthPanelRefLeft.value)
|
||||
dropdownMonthPanelRefLeft.value.hide()
|
||||
}
|
||||
const closeRightYearPanel = () => {
|
||||
if (dropdownYearPanelRefRight.value)
|
||||
dropdownYearPanelRefRight.value.hide()
|
||||
startTime.year = endTime.year
|
||||
}
|
||||
const closeRightMonthPanel = () => {
|
||||
dropdownMonthPanelRefRight.value.hide()
|
||||
let month = endTime.month - 1
|
||||
if (month > 11) {
|
||||
month = 0;
|
||||
startTime.year++;
|
||||
} else if (month < 0) {
|
||||
month = 11;
|
||||
startTime.year--;
|
||||
}
|
||||
startTime.month = month;
|
||||
}
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
let format = datePicker.type === 'datetime' ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
|
||||
let startTimeVal = dayjs(startTime.day).hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format(format);
|
||||
let endTimeVal = dayjs(endTime.day).hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format(format);
|
||||
emits('update:startTime', startTimeVal);
|
||||
emits('update:endTime', endTimeVal);
|
||||
datePicker.ok()
|
||||
}
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
//Month.value = dayjs().month();
|
||||
}
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
//Month.value = ''
|
||||
}
|
||||
</script>
|
||||
@ -2,39 +2,24 @@
|
||||
<div class="layui-laydate">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-prev-y"
|
||||
@click="changeYearOrMonth('year', -1)"
|
||||
></i
|
||||
>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="datePicker.showPanel.value = 'month'"
|
||||
>{{ datePicker.currentMonth.value + 1 }} 月</span
|
||||
>
|
||||
<span @click="datePicker.showPanel.value = 'month'">{{ typeof Month !== 'string' ? Month + 1 + ' 月' : '请选择月份'
|
||||
}}</span>
|
||||
</div>
|
||||
<i
|
||||
class="layui-icon laydate-icon laydate-next-y"
|
||||
@click="changeYearOrMonth('year', 1)"
|
||||
></i
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-content" style="height: 220px">
|
||||
<ul class="layui-laydate-list laydate-month-list">
|
||||
<li
|
||||
v-for="item of MONTH_NAME"
|
||||
:key="item"
|
||||
:class="{
|
||||
'layui-this':
|
||||
MONTH_NAME.indexOf(item) === datePicker.currentMonth.value,
|
||||
}"
|
||||
@click="handleMonthClick(item)"
|
||||
>
|
||||
<li v-for="item of MONTH_NAME" :key="item" :class="{ 'layui-this': MONTH_NAME.indexOf(item) === Month }"
|
||||
@click="handleMonthClick(item)">
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<PanelFoot></PanelFoot>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'year'"
|
||||
class="laydate-btns-time">选择年份</span>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -43,11 +28,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
import { inject } from "vue";
|
||||
import { provideType } from "../interface";
|
||||
import PanelFoot from "./PanelFoot.vue";
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
import dayjs from 'dayjs';
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
|
||||
export interface TimePanelProps {
|
||||
modelValue: number | string;
|
||||
max?: number;
|
||||
}
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {
|
||||
max: dayjs().year() + 100
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const Month = ref(props.modelValue)
|
||||
|
||||
const MONTH_NAME = [
|
||||
"1月",
|
||||
@ -64,36 +59,45 @@ const MONTH_NAME = [
|
||||
"12月",
|
||||
];
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
if (type === "year") {
|
||||
datePicker.currentYear.value += num;
|
||||
} else {
|
||||
let month = datePicker.currentMonth.value + num;
|
||||
if (month > 11) {
|
||||
month = 0;
|
||||
datePicker.currentYear.value++;
|
||||
} else if (month < 0) {
|
||||
month = 11;
|
||||
datePicker.currentYear.value--;
|
||||
// 点击月份
|
||||
const handleMonthClick = (item: any) => {
|
||||
Month.value = MONTH_NAME.indexOf(item);
|
||||
if (!datePicker.range) {
|
||||
if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs(datePicker.currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
|
||||
}
|
||||
datePicker.currentMonth.value = month;
|
||||
if (datePicker.type === "date" || datePicker.type === "datetime") {
|
||||
emits('update:modelValue', MONTH_NAME.indexOf(item))
|
||||
}
|
||||
}
|
||||
if (datePicker.simple) {
|
||||
footOnOk();
|
||||
}
|
||||
};
|
||||
|
||||
// 点击月份
|
||||
const handleMonthClick = (item: any) => {
|
||||
datePicker.currentMonth.value = MONTH_NAME.indexOf(item);
|
||||
if (datePicker.type === "month") {
|
||||
datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
|
||||
.month(MONTH_NAME.indexOf(item))
|
||||
.valueOf();
|
||||
} else if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
|
||||
.month(MONTH_NAME.indexOf(item))
|
||||
.valueOf();
|
||||
watch(() => props.modelValue, () => {
|
||||
Month.value = props.modelValue;
|
||||
})
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Month.value)
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
return;
|
||||
} else {
|
||||
datePicker.showPanel.value = "date";
|
||||
datePicker.ok()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
Month.value = dayjs().month();
|
||||
}
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Month.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,91 +1,10 @@
|
||||
<template>
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
v-if="
|
||||
datePicker.type === 'datetime' &&
|
||||
datePicker.showPanel.value === 'datetime'
|
||||
"
|
||||
@click="chooseTime"
|
||||
class="laydate-btns-time"
|
||||
>选择时间</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-else-if="
|
||||
datePicker.type === 'datetime' && datePicker.showPanel.value === 'time'
|
||||
"
|
||||
@click="datePicker.showPanel.value = 'datetime'"
|
||||
class="laydate-btns-time"
|
||||
>选择日期</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-else-if="
|
||||
datePicker.type === 'yearmonth' && datePicker.showPanel.value === 'year'
|
||||
"
|
||||
@click="datePicker.showPanel.value = 'month'"
|
||||
class="laydate-btns-time"
|
||||
>选择月份</span
|
||||
>
|
||||
<span
|
||||
v-else-if="
|
||||
datePicker.type === 'yearmonth' &&
|
||||
datePicker.showPanel.value === 'month'
|
||||
"
|
||||
@click="datePicker.showPanel.value = 'year'"
|
||||
class="laydate-btns-time"
|
||||
>选择年份</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-else-if="!datePicker.range"
|
||||
class="layui-laydate-preview"
|
||||
title="当前选中的结果"
|
||||
>
|
||||
<template
|
||||
v-if="
|
||||
datePicker.type === 'month' && datePicker.currentMonth.value != -1
|
||||
"
|
||||
>
|
||||
{{ datePicker.currentMonth.value + 1 }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datePicker.type === 'year' && datePicker.currentYear.value != -1
|
||||
"
|
||||
>
|
||||
{{ datePicker.currentYear.value }}
|
||||
</template>
|
||||
<template v-else-if="datePicker.type === 'time'">
|
||||
{{
|
||||
(datePicker.hms.value.hh < 10 ? "0" : "") +
|
||||
datePicker.hms.value.hh +
|
||||
":" +
|
||||
(datePicker.hms.value.mm < 10 ? "0" : "") +
|
||||
datePicker.hms.value.mm +
|
||||
":" +
|
||||
(datePicker.hms.value.ss < 10 ? "0" : "") +
|
||||
datePicker.hms.value.ss
|
||||
}}
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<slot></slot>
|
||||
<div class="laydate-footer-btns">
|
||||
<span
|
||||
lay-type="clear"
|
||||
class="laydate-btns-clear"
|
||||
@click="datePicker.clear()"
|
||||
>清空</span
|
||||
>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="datePicker.now()"
|
||||
>现在</span
|
||||
>
|
||||
<span
|
||||
lay-type="confirm"
|
||||
class="laydate-btns-confirm"
|
||||
@click="datePicker.ok()"
|
||||
>确定</span
|
||||
>
|
||||
<span lay-type="clear" class="laydate-btns-clear" @click="handelClear">清空</span>
|
||||
<span lay-type="now" class="laydate-btns-now" @click="handelNow">现在</span>
|
||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -95,20 +14,18 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { inject } from "vue";
|
||||
import { provideType } from "../interface";
|
||||
//foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
|
||||
const emits = defineEmits(['ok', 'clear', 'now']);
|
||||
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
const emits = defineEmits([
|
||||
"showYearPanel",
|
||||
"update:showPanel",
|
||||
"scrollToCurrentTime",
|
||||
"ok",
|
||||
]);
|
||||
const handelOk = () => {
|
||||
emits('ok');
|
||||
}
|
||||
|
||||
//选择时间
|
||||
const chooseTime = () => {
|
||||
datePicker.showPanel.value = "time";
|
||||
//scrollToCurrentTime()
|
||||
};
|
||||
const handelNow = () => {
|
||||
emits('now')
|
||||
}
|
||||
|
||||
const handelClear = () => {
|
||||
emits('clear')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -8,23 +8,12 @@
|
||||
</div>
|
||||
<div class="layui-laydate-content" style="height: 210px">
|
||||
<ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
|
||||
<li
|
||||
class="num-list"
|
||||
v-for="item in els"
|
||||
:key="item.type"
|
||||
:data-type="item.type"
|
||||
>
|
||||
<ol class="scroll" @click="choseTime">
|
||||
<li
|
||||
v-for="(it, index) in item.count"
|
||||
:id="item.type + index.toString()"
|
||||
:data-value="index.toString().padStart(2, '0')"
|
||||
:data-type="item.type"
|
||||
:key="it"
|
||||
:class="[
|
||||
<li class="num-list" v-for="item in els" :key="item.type" :data-type="item.type">
|
||||
<ol class="scroll" @click="chooseTime">
|
||||
<li v-for="(it, index) in item.count" :id="item.type + index.toString()"
|
||||
:data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
|
||||
'num',
|
||||
index.toString().padStart(2, '0') ==
|
||||
datePicker.hms.value[item.type]
|
||||
index.toString().padStart(2, '0') == (hms as hmsType)[item.type]
|
||||
? 'layui-this'
|
||||
: '',
|
||||
]"
|
||||
@ -36,7 +25,15 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<PanelFoot></PanelFoot>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'datetime' && !datePicker.range" @click="datePicker.showPanel.value = 'datetime'"
|
||||
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>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -45,39 +42,44 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { inject, onMounted, ref, nextTick, watch } from "vue";
|
||||
import { provideType } from "../interface";
|
||||
import PanelFoot from "./PanelFoot.vue";
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
import dayjs from 'dayjs';
|
||||
import { inject, onMounted, ref, Ref, nextTick, watch, h } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
export interface hmsType {
|
||||
hh: number; mm: number; ss: number;
|
||||
}
|
||||
export interface TimePanelProps {
|
||||
modelValue: hmsType
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {
|
||||
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const els = [
|
||||
{ count: 24, type: "hh" },
|
||||
{ count: 60, type: "mm" },
|
||||
{ count: 60, type: "ss" },
|
||||
];
|
||||
const hms = ref<{ hh: number; mm: number; ss: number; }>(props.modelValue);
|
||||
|
||||
// 点击时间 - hms
|
||||
const choseTime = (e: any) => {
|
||||
unWatch.value = true;
|
||||
const chooseTime = (e: any) => {
|
||||
if (e.target.nodeName == "LI") {
|
||||
let { value, type } = e.target.dataset;
|
||||
datePicker.hms.value[type as keyof typeof datePicker.hms.value] = value;
|
||||
hms.value[type as keyof typeof hms.value] = parseInt(value);
|
||||
}
|
||||
setTimeout(() => {
|
||||
unWatch.value = false;
|
||||
}, 0);
|
||||
};
|
||||
const unWatch = ref(false);
|
||||
const timePanelRef = ref();
|
||||
|
||||
const timePanelRef = ref()
|
||||
onMounted(() => {
|
||||
scrollTo();
|
||||
});
|
||||
watch(
|
||||
[datePicker.hms],
|
||||
() => {
|
||||
if (!unWatch.value) scrollTo();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
})
|
||||
watch(() => props.modelValue, () => {
|
||||
hms.value = props.modelValue
|
||||
}, { deep: true })
|
||||
const scrollTo = () => {
|
||||
nextTick(() => {
|
||||
timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
|
||||
@ -100,6 +102,33 @@ const scrollTo = () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
//确认关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', hms)
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
return;
|
||||
} else {
|
||||
datePicker.ok()
|
||||
}
|
||||
}
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
hms.value.hh = dayjs().hour();
|
||||
hms.value.mm = dayjs().minute();
|
||||
hms.value.ss = dayjs().second();
|
||||
scrollTo();
|
||||
}
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
hms.value.hh = 0;
|
||||
hms.value.mm = 0;
|
||||
hms.value.ss = 0;
|
||||
scrollTo();
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -13,17 +13,16 @@
|
||||
ref="ScrollRef"
|
||||
>
|
||||
<ul class="layui-laydate-list laydate-year-list">
|
||||
<li
|
||||
v-for="item of datePicker.yearList.value"
|
||||
:key="item"
|
||||
:class="{ 'layui-this': datePicker.currentYear.value === item }"
|
||||
@click="handleYearClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
<li v-for="item of yearList" :key="item" :class="{ 'layui-this': Year === item }"
|
||||
@click="handleYearClick(item)">{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<PanelFoot></PanelFoot>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'month'"
|
||||
class="laydate-btns-time">选择月份</span>
|
||||
<template v-else>{{ Year }}</template>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -32,36 +31,58 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
import { inject, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { provideType } from "../interface";
|
||||
import PanelFoot from "./PanelFoot.vue";
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
import dayjs from 'dayjs';
|
||||
import { inject, nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { getYears } from '../day';
|
||||
import { provideType } from '../interface';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
|
||||
export interface TimePanelProps {
|
||||
modelValue: number | string;
|
||||
max?: number;
|
||||
}
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {
|
||||
max: dayjs().year() + 100
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const yearList = ref<number[]>(getYears());
|
||||
const unWatch = ref(false);
|
||||
const Year = ref(props.modelValue);
|
||||
|
||||
|
||||
// 点击年份
|
||||
const handleYearClick = (item: any) => {
|
||||
unWatch.value = true;
|
||||
datePicker.currentYear.value = item;
|
||||
if (datePicker.type === "year") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
} else if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
datePicker.showPanel.value = "month";
|
||||
} else {
|
||||
datePicker.showPanel.value = "date";
|
||||
Year.value = item;
|
||||
if (!datePicker.range) {
|
||||
if (datePicker.type === "year") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
} else if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
datePicker.showPanel.value = "month";
|
||||
emits('update:modelValue', Year.value);
|
||||
} else {
|
||||
datePicker.showPanel.value = "date";
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
unWatch.value = false;
|
||||
}, 0);
|
||||
|
||||
if (datePicker.simple) {
|
||||
footOnOk();
|
||||
}
|
||||
};
|
||||
|
||||
const ScrollRef = ref();
|
||||
onMounted(() => {
|
||||
scrollTo();
|
||||
});
|
||||
watch([datePicker.currentYear], () => {
|
||||
if (!unWatch.value) scrollTo();
|
||||
});
|
||||
})
|
||||
watch(() => Year, () => {
|
||||
Year.value = props.modelValue;
|
||||
})
|
||||
const scrollTo = () => {
|
||||
nextTick(() => {
|
||||
let scrollTop = 0;
|
||||
@ -73,7 +94,33 @@ const scrollTo = () => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
ScrollRef.value.scrollTo(0, scrollTop);
|
||||
});
|
||||
};
|
||||
ScrollRef.value.scrollTo(0, scrollTop)
|
||||
})
|
||||
}
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Year.value)
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
return;
|
||||
} else {
|
||||
datePicker.ok()
|
||||
}
|
||||
}
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
Year.value = dayjs().year();
|
||||
if (datePicker.type === 'yearmonth') {
|
||||
datePicker.currentMonth.value = dayjs().month();
|
||||
}
|
||||
scrollTo();
|
||||
}
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Year.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
<template>
|
||||
<div class="layui-laydate-content">
|
||||
<table>
|
||||
<table style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template
|
||||
v-for="(o, i) of dateList.value.length % 7 == 0
|
||||
? dateList.value.length / 7
|
||||
: Math.floor(dateList.value.length / 7) + 1"
|
||||
:key="i"
|
||||
>
|
||||
<template v-for="(o, i) of dateList.length % 7 == 0
|
||||
? dateList.length / 7
|
||||
: Math.floor(dateList.length / 7) + 1" :key="i">
|
||||
<tr>
|
||||
<td
|
||||
v-for="(item, index) of dateList.value.slice(i * 7, i * 7 + 7)"
|
||||
:key="index"
|
||||
:data-unix="item.value"
|
||||
:class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this':
|
||||
item.value === modelValue ||
|
||||
(datePicker.range &&
|
||||
(item.value ==
|
||||
parseInt(datePicker.rangeValue.value.first) ||
|
||||
item.value ==
|
||||
parseInt(datePicker.rangeValue.value.last))),
|
||||
'laydate-range-hover': ifHasRangeHoverClass(item),
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
@mouseenter="dayItemMouseEnter($event, item)"
|
||||
>
|
||||
<td v-for="(item, index) of dateList.slice(
|
||||
i * 7,
|
||||
i * 7 + 7
|
||||
)" :key="index" :data-unix="item.value" :class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this': item.value === modelValue || (datePicker.range && item.type === 'current' && (item.value == startDate || item.value == endDate)),
|
||||
'laydate-range-hover': ifHasRangeHoverClass(item),
|
||||
'layui-disabled': item.type !== 'current' && datePicker.range
|
||||
}" @click="handleDayClick(item)" @mouseenter="dayItemMouseEnter($event, item)">
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
@ -49,18 +37,24 @@ export default {
|
||||
import { computed, inject, ref, Ref } from "vue";
|
||||
import { provideType } from "../../interface";
|
||||
|
||||
export interface LayDatePickerProps {
|
||||
export interface DateContentProps {
|
||||
dateList: any;
|
||||
modelValue: number;
|
||||
modelValue?: number;
|
||||
startDate?: number;
|
||||
endDate?: number;
|
||||
hoverDate?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
const props = withDefaults(defineProps<DateContentProps>(), {
|
||||
dateList: [],
|
||||
modelValue: -1,
|
||||
hoverDate: -1,
|
||||
startDate: -1,
|
||||
endDate: -1
|
||||
});
|
||||
const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const emits = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'update:hoverDate','simple']);
|
||||
|
||||
// 点击日期
|
||||
const handleDayClick = (item: any) => {
|
||||
@ -68,33 +62,30 @@ const handleDayClick = (item: any) => {
|
||||
if (item.type !== "current") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
emits("update:modelValue", item.value);
|
||||
|
||||
if (item.type !== "current") {
|
||||
datePicker.currentMonth.value =
|
||||
item.type === "prev"
|
||||
? datePicker.currentMonth.value - 1
|
||||
: datePicker.currentMonth.value + 1;
|
||||
}
|
||||
|
||||
if (datePicker.range) {
|
||||
if (
|
||||
datePicker.rangeValue.value.first === "" &&
|
||||
datePicker.rangeValue.value.last === ""
|
||||
) {
|
||||
//props.rangeValue.first = item.value
|
||||
} else if (
|
||||
datePicker.rangeValue.value.first !== "" &&
|
||||
datePicker.rangeValue.value.last !== ""
|
||||
) {
|
||||
// rangeValue.first = item.value
|
||||
// rangeValue.last = ''
|
||||
} else if (
|
||||
datePicker.rangeValue.value.first !== "" &&
|
||||
datePicker.rangeValue.value.last === ""
|
||||
) {
|
||||
//rangeValue.last = item.value
|
||||
if (props.startDate === -1 && props.endDate === -1) {
|
||||
emits('update:startDate', item.value)
|
||||
} else if (props.startDate !== -1 && props.endDate !== -1) {
|
||||
emits('update:hoverDate', item.value);
|
||||
emits('update:startDate', item.value)
|
||||
emits('update:endDate', -1)
|
||||
} else if (props.startDate !== -1 && props.endDate === -1) {
|
||||
emits('update:endDate', item.value)
|
||||
if (item.value < props.startDate) {
|
||||
//swap
|
||||
const first = props.startDate;
|
||||
const last = item.value;
|
||||
emits('update:startDate', last);
|
||||
emits('update:endDate', first);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
emits('update:modelValue', item.value);
|
||||
if (item.type !== "current") {
|
||||
datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
|
||||
}
|
||||
if (datePicker.simple) {
|
||||
emits('simple');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -103,44 +94,37 @@ const dayItemMouseEnter = (event: MouseEvent, item: any) => {
|
||||
if (!datePicker.range) {
|
||||
return;
|
||||
}
|
||||
if (!datePicker.rangeValue.value.first) {
|
||||
if (props.startDate === -1) {
|
||||
return;
|
||||
}
|
||||
if (item.type !== "current") {
|
||||
return;
|
||||
}
|
||||
//rpropsangeValue.hover = (event.target as HTMLElement).dataset.unix as string
|
||||
};
|
||||
if (props.startDate !== -1 && props.endDate !== -1) {
|
||||
emits('update:hoverDate', -1);
|
||||
return;
|
||||
}
|
||||
emits('update:hoverDate', parseInt((event.target as HTMLElement).dataset.unix as string));
|
||||
}
|
||||
const ifHasRangeHoverClass = computed(() => {
|
||||
return function (item: any) {
|
||||
if (!datePicker.range) {
|
||||
return false;
|
||||
}
|
||||
if (!datePicker.rangeValue.value.first) {
|
||||
return false;
|
||||
if (props.startDate === -1) {
|
||||
return false
|
||||
}
|
||||
if (item.type !== "current") {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
item.value == parseInt(datePicker.rangeValue.value.first) ||
|
||||
item.value == parseInt(datePicker.rangeValue.value.last)
|
||||
) {
|
||||
return true;
|
||||
if(props.hoverDate===-1&&props.endDate===-1){
|
||||
return false
|
||||
}
|
||||
let hover = datePicker.rangeValue.value.last
|
||||
? datePicker.rangeValue.value.last
|
||||
: datePicker.rangeValue.value.hover;
|
||||
let max =
|
||||
datePicker.rangeValue.value.first > hover
|
||||
? datePicker.rangeValue.value.first
|
||||
: hover;
|
||||
let min =
|
||||
datePicker.rangeValue.value.first < hover
|
||||
? datePicker.rangeValue.value.first
|
||||
: hover;
|
||||
if (item.value >= parseInt(min) && item.value <= parseInt(max)) {
|
||||
return true;
|
||||
let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
|
||||
let max = props.startDate > hover ? props.startDate : hover;
|
||||
let min = props.startDate < hover ? props.startDate : hover
|
||||
if (item.value >= min && item.value <= max) {
|
||||
return true
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
@ -105,7 +105,6 @@ html #layuicss-laydate {
|
||||
padding: 10px 70px 5px;
|
||||
}
|
||||
.layui-laydate-header * {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.layui-laydate-header i {
|
||||
@ -161,7 +160,7 @@ html #layuicss-laydate {
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
text-align: center !important;
|
||||
}
|
||||
.layui-laydate-content th {
|
||||
font-weight: 400;
|
||||
@ -300,7 +299,7 @@ html #layuicss-laydate {
|
||||
|
||||
/* 双日历 */
|
||||
.layui-laydate-range {
|
||||
width: 546px;
|
||||
min-width: 546px;
|
||||
}
|
||||
.layui-laydate-range .layui-laydate-main {
|
||||
display: inline-block;
|
||||
@ -465,4 +464,64 @@ html #layuicss-laydate {
|
||||
}
|
||||
.layui-laydate-content .layui-disabled:hover{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.laydate-range-inputs{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: inline-flex;
|
||||
border-color: var(--input-border-color);
|
||||
border-radius: var(--input-border-radius);
|
||||
.range-separator{
|
||||
margin: 0 5px;
|
||||
color: var(--global-neutral-color-8);
|
||||
background-color: transparent;
|
||||
}
|
||||
.layui-input-wrapper{
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
input{
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.layui-input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.layui-laydate-range{
|
||||
.laydate-set-ym{
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.laydate-set-ym .layui-dropdown{
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.time-panel{
|
||||
.layui-laydate-main{
|
||||
width: 272px;
|
||||
display: unset !important;
|
||||
}
|
||||
.layui-laydate-preview{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.layui-laydate-content{
|
||||
.laydate-year-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.layui-laydate-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.layui-laydate-range-datetime{
|
||||
.layui-laydate-main{
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<lay-dropdown ref="dropdownRef" :disabled="disabled">
|
||||
<lay-input
|
||||
readonly
|
||||
:name="name"
|
||||
:model-value="dateValue"
|
||||
:placeholder="placeholder"
|
||||
prefix-icon="layui-icon-date"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<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-input>
|
||||
<div class="laydate-range-inputs" v-else>
|
||||
<lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" 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>
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<DatePanel
|
||||
v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
></DatePanel>
|
||||
<DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')" v-model="currentDay"></DatePanel>
|
||||
<!-- 时间选择 -->
|
||||
<TimePanel v-if="!range && showPanel === 'time'"></TimePanel>
|
||||
<TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
|
||||
<!-- 年份选择器 -->
|
||||
<YearPanel
|
||||
v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
|
||||
></YearPanel>
|
||||
<YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
|
||||
</YearPanel>
|
||||
<!-- 月份选择器 -->
|
||||
<MonthPanel v-if="!range && showPanel === 'month'"></MonthPanel>
|
||||
<MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></MonthPanel>
|
||||
<!-- 范围选择 -->
|
||||
<DateRange v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model:startTime="rangeValue.first" v-model:endTime="rangeValue.last"></DateRange>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
@ -40,33 +42,25 @@ import dayjs from "dayjs";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import { getDayLength, getYears, getMonth, getYear, getDay } from "./day";
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
defineProps,
|
||||
defineEmits,
|
||||
onMounted,
|
||||
nextTick,
|
||||
reactive,
|
||||
provide,
|
||||
} from "vue";
|
||||
import DatePanel from "./components/DatePanel.vue";
|
||||
import TimePanel from "./components/TimePanel.vue";
|
||||
import YearPanel from "./components/YearPanel.vue";
|
||||
import MonthPanel from "./components/MonthPanel.vue";
|
||||
import { getMonth, getYear, getDay } from "./day";
|
||||
import { ref, watch, defineProps, defineEmits, onMounted, reactive, provide } from "vue";
|
||||
import DatePanel from './components/DatePanel.vue';
|
||||
import TimePanel from './components/TimePanel.vue';
|
||||
import YearPanel from './components/YearPanel.vue';
|
||||
import MonthPanel from './components/MonthPanel.vue';
|
||||
import DateRange from './components/DateRange.vue';
|
||||
|
||||
export interface LayDatePickerProps {
|
||||
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
|
||||
placeholder?: string;
|
||||
modelValue?: string;
|
||||
modelValue?: string | string[];
|
||||
disabled?: boolean;
|
||||
simple?: boolean;
|
||||
name?: string;
|
||||
max?: string;
|
||||
min?: string;
|
||||
range?: boolean;
|
||||
rangeSeparator?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
@ -75,169 +69,126 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
disabled: false,
|
||||
simple: false,
|
||||
range: false,
|
||||
rangeSeparator: '至'
|
||||
});
|
||||
|
||||
const dropdownRef = ref(null);
|
||||
const $emits = defineEmits(["update:modelValue"]);
|
||||
|
||||
const hms = ref({
|
||||
hh: dayjs(props.modelValue).hour(),
|
||||
mm: dayjs(props.modelValue).minute(),
|
||||
ss: dayjs(props.modelValue).second(),
|
||||
hh: 0,
|
||||
mm: 0,
|
||||
ss: 0,
|
||||
});
|
||||
const currentYear = ref<number>(0);
|
||||
const currentMonth = ref<number>(0);
|
||||
const currentDay = ref<number>(0);
|
||||
const showPanel = ref<string>("date");
|
||||
const rangeValue = reactive({ first: '', last: '' })
|
||||
|
||||
const currentYear = ref(getYear(props.modelValue));
|
||||
const currentMonth = ref(getMonth(props.modelValue));
|
||||
const currentDay = ref<number>(getDay(props.modelValue));
|
||||
const yearList = ref<number[]>(getYears());
|
||||
const dateList = ref<any[]>([]);
|
||||
const dateListNext = ref<any[]>([]);
|
||||
const showPanel = ref("date");
|
||||
//范围选择
|
||||
const rangeValue = reactive({
|
||||
first: "",
|
||||
last: "",
|
||||
hover: "",
|
||||
});
|
||||
let unWatch = false;
|
||||
// 计算结果日期
|
||||
const dateValue = props.range ? ref(['', '']) : ref('');
|
||||
const getDateValue = () => {
|
||||
unWatch = true;
|
||||
let dayjsVal;
|
||||
switch (props.type) {
|
||||
case "date":
|
||||
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).format("YYYY-MM-DD") : '';
|
||||
break;
|
||||
case "datetime":
|
||||
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("YYYY-MM-DD HH:mm:ss") : '';
|
||||
break;
|
||||
case "year":
|
||||
dayjsVal = currentYear.value !== -1 ? dayjs().year(currentYear.value).format('YYYY') : '';
|
||||
break;
|
||||
case "month":
|
||||
dayjsVal = currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : '';
|
||||
break;
|
||||
case "time":
|
||||
dayjsVal = dayjs().hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("HH:mm:ss");
|
||||
break;
|
||||
case "yearmonth":
|
||||
dayjsVal = dayjs().year(currentYear.value).month(currentMonth.value).format("YYYY-MM");
|
||||
break;
|
||||
default:
|
||||
dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format() : '';
|
||||
break;
|
||||
}
|
||||
dateValue.value = dayjsVal;
|
||||
$emits("update:modelValue", dayjsVal);
|
||||
setTimeout(() => { unWatch = false; }, 0);
|
||||
};
|
||||
const getDateValueByRange = () => {
|
||||
unWatch = true;
|
||||
if (rangeValue.first === '' || rangeValue.last === '') {
|
||||
dateValue.value = ['', ''];
|
||||
return;
|
||||
}
|
||||
let format = props.type === 'datetime' ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
|
||||
dateValue.value = [dayjs(rangeValue.first).format(format), dayjs(rangeValue.last).format(format)];
|
||||
$emits("update:modelValue", dateValue.value);
|
||||
setTimeout(() => { unWatch = false; }, 0);
|
||||
}
|
||||
|
||||
// 确认事件
|
||||
const ok = () => {
|
||||
if (!props.range) {
|
||||
if (props.type === 'time') {
|
||||
getDateValue()
|
||||
} else {
|
||||
getDateValue()
|
||||
}
|
||||
} else {
|
||||
getDateValueByRange()
|
||||
}
|
||||
if (dropdownRef.value)
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide();
|
||||
showPanel.value = props.type
|
||||
};
|
||||
|
||||
//面板类型判断
|
||||
watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
showPanel.value = props.type;
|
||||
if (props.type === "yearmonth") {
|
||||
showPanel.value = "year";
|
||||
if (props.type === 'yearmonth') {
|
||||
showPanel.value = 'year';
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
//初始值为空时的容错
|
||||
if (currentDay.value == -1) {
|
||||
setTimeout(() => {
|
||||
now();
|
||||
clear();
|
||||
}, 0);
|
||||
//监听modelValue改变
|
||||
watch(() => props.modelValue, () => {
|
||||
if (unWatch) {
|
||||
return;
|
||||
}
|
||||
let modelValue = props.modelValue;
|
||||
if (modelValue.length === 8) {
|
||||
//dayjs 解析时间容错
|
||||
modelValue = "1970-01-01 " + modelValue;
|
||||
}
|
||||
hms.value.hh = dayjs(modelValue).hour();
|
||||
hms.value.mm = dayjs(modelValue).minute();
|
||||
hms.value.ss = dayjs(modelValue).second();
|
||||
getDateValue();
|
||||
});
|
||||
let initModelValue = props.range && props.modelValue ? (props.modelValue as string[])[0] || '' : props.modelValue as string;
|
||||
hms.value.hh = dayjs(initModelValue).hour();
|
||||
hms.value.mm = dayjs(initModelValue).minute();
|
||||
hms.value.ss = dayjs(initModelValue).second();
|
||||
|
||||
// 计算结果日期
|
||||
const dateValue = ref("");
|
||||
const getDateValue = (checkCurrentDay = true) => {
|
||||
if (checkCurrentDay) {
|
||||
if (currentDay.value === -1) {
|
||||
dateValue.value = "";
|
||||
$emits("update:modelValue", "");
|
||||
return "";
|
||||
}
|
||||
if (initModelValue.length === 8 && props.type === 'time') { //dayjs 解析时间容错
|
||||
let modelValue = initModelValue;
|
||||
modelValue = '1970-01-01 ' + modelValue;
|
||||
hms.value.hh = dayjs(modelValue).hour();
|
||||
hms.value.mm = dayjs(modelValue).minute();
|
||||
hms.value.ss = dayjs(modelValue).second();
|
||||
}
|
||||
currentYear.value = getYear(initModelValue);
|
||||
currentMonth.value = getMonth(initModelValue);
|
||||
currentDay.value = getDay(initModelValue);
|
||||
|
||||
rangeValue.first = initModelValue;
|
||||
rangeValue.last = props.range && props.modelValue ? (props.modelValue as string[])[1] || '' : '';
|
||||
if (!props.range) {
|
||||
getDateValue();
|
||||
} else {
|
||||
if (currentDay.value === -1) {
|
||||
currentDay.value = new Date(new Date().toDateString()).getTime();
|
||||
}
|
||||
getDateValueByRange();
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
let dayjsVal;
|
||||
let dayjsObj = dayjs(currentDay.value)
|
||||
.hour(hms.value.hh)
|
||||
.minute(hms.value.mm)
|
||||
.second(hms.value.ss);
|
||||
switch (props.type) {
|
||||
case "date":
|
||||
dayjsVal = dayjsObj.format("YYYY-MM-DD");
|
||||
break;
|
||||
case "datetime":
|
||||
dayjsVal = dayjsObj.format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case "year":
|
||||
dayjsVal = dayjsObj.format("YYYY");
|
||||
break;
|
||||
case "month":
|
||||
dayjsVal = dayjsObj.format("MM");
|
||||
break;
|
||||
case "time":
|
||||
dayjsVal = dayjsObj.format("HH:mm:ss");
|
||||
break;
|
||||
case "yearmonth":
|
||||
dayjsVal = dayjsObj.format("YYYY-MM");
|
||||
break;
|
||||
default:
|
||||
dayjsVal = dayjsObj.format();
|
||||
break;
|
||||
}
|
||||
dateValue.value = dayjsVal;
|
||||
$emits("update:modelValue", dayjsVal);
|
||||
return dayjsVal;
|
||||
};
|
||||
|
||||
// 确认事件
|
||||
const ok = () => {
|
||||
if (props.type === "time") {
|
||||
getDateValue(false);
|
||||
} else {
|
||||
getDateValue();
|
||||
}
|
||||
if (dropdownRef.value)
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide();
|
||||
if (props.type === "yearmonth") {
|
||||
showPanel.value = "year";
|
||||
} else if (props.type === "datetime") {
|
||||
showPanel.value = "datetime";
|
||||
}
|
||||
};
|
||||
|
||||
// 现在时间
|
||||
const now = () => {
|
||||
currentDay.value = new Date(new Date().toDateString()).getTime();
|
||||
currentYear.value = dayjs().year();
|
||||
currentMonth.value = dayjs().month();
|
||||
hms.value.hh = dayjs().hour();
|
||||
hms.value.mm = dayjs().minute();
|
||||
hms.value.ss = dayjs().second();
|
||||
if (props.simple) getDateValue(true);
|
||||
};
|
||||
|
||||
// 清空日期
|
||||
const clear = () => {
|
||||
currentDay.value = -1;
|
||||
if (showPanel.value === "year") currentYear.value = -1;
|
||||
if (showPanel.value === "month") currentMonth.value = -1;
|
||||
if (showPanel.value === "time") {
|
||||
hms.value.hh = 0;
|
||||
hms.value.mm = 0;
|
||||
hms.value.ss = 0;
|
||||
}
|
||||
getDateValue(true);
|
||||
};
|
||||
|
||||
//simple
|
||||
watch(currentDay, () => {
|
||||
if (props.simple) {
|
||||
getDateValue();
|
||||
ok();
|
||||
}
|
||||
});
|
||||
watch(currentMonth, () => {
|
||||
if (props.simple && props.type !== "date") {
|
||||
getDateValue();
|
||||
ok();
|
||||
}
|
||||
});
|
||||
watch(currentYear, () => {
|
||||
if (props.simple && props.type !== "date") {
|
||||
getDateValue();
|
||||
ok();
|
||||
}
|
||||
});
|
||||
|
||||
provide("datePicker", {
|
||||
currentYear: currentYear,
|
||||
@ -246,14 +197,12 @@ provide("datePicker", {
|
||||
dateValue: dateValue,
|
||||
type: props.type,
|
||||
showPanel: showPanel,
|
||||
dateList: dateList,
|
||||
yearList: yearList,
|
||||
hms: hms,
|
||||
clear: () => clear(),
|
||||
now: () => now(),
|
||||
ok: () => ok(),
|
||||
getDateValue: () => getDateValue,
|
||||
range: props.range,
|
||||
rangeValue: rangeValue,
|
||||
rangeSeparator: props.rangeSeparator,
|
||||
simple: props.simple
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,18 +3,18 @@ import { Ref } from "vue";
|
||||
export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
|
||||
|
||||
export type provideType = {
|
||||
currentYear: Ref;
|
||||
currentMonth: Ref;
|
||||
currentDay: Ref;
|
||||
dateValue: Ref;
|
||||
dateList: Ref;
|
||||
yearList: Ref;
|
||||
hms: Ref;
|
||||
type: string;
|
||||
showPanel: Ref;
|
||||
clear: Function;
|
||||
now: Function;
|
||||
ok: Function;
|
||||
range: boolean;
|
||||
rangeValue: Ref;
|
||||
};
|
||||
currentYear: Ref,
|
||||
currentMonth: Ref,
|
||||
currentDay: Ref,
|
||||
dateValue: Ref,
|
||||
hms: Ref,
|
||||
type: string,
|
||||
showPanel: Ref,
|
||||
clear: Function,
|
||||
now: Function,
|
||||
ok: Function,
|
||||
range: boolean,
|
||||
rangeValue: { first: string, last: string, hover: string, firstTime: { hh: number, mm: number, ss: number }, lastTime: { hh: number, mm: number, ss: number } },
|
||||
rangeSeparator: string,
|
||||
simple: boolean,
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime3 = ref("2022-03-04 17:35:00");
|
||||
const endTime3 = ref("2022");
|
||||
|
||||
return {
|
||||
endTime3
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
|
||||
<lay-date-picker type="month" v-model="mouth"></lay-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -127,7 +127,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime4 = ref("2022-03-04 17:35:00");
|
||||
const mouth = ref("4");
|
||||
|
||||
return {
|
||||
endTime4
|
||||
@ -153,7 +153,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime5 = ref("2022-03-04 17:35:00");
|
||||
const endTime5 = ref("17:35:00");
|
||||
|
||||
return {
|
||||
endTime5
|
||||
@ -179,7 +179,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const endTime6 = ref("2022-03-04 17:35:00");
|
||||
const endTime6 = ref("2022-03");
|
||||
|
||||
return {
|
||||
endTime6
|
||||
@ -220,6 +220,31 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 范围选择
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div style="display:flex; align-items: center;margin-bottom: 5px;">
|
||||
<lay-date-picker v-model="rangeTime1" range placeholder="type : date"></lay-date-picker>
|
||||
<span style="margin-left:10px">modelValue:{{rangeTime1}}</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items: center;margin-bottom: 5px;">
|
||||
<lay-date-picker v-model="rangeTime2" range type="datetime" placeholder="type : datetime"></lay-date-picker>
|
||||
<span style="margin-left:10px">modelValue:{{rangeTime2}}</span>
|
||||
</div>
|
||||
<lay-button @click="rangeTime2=['2001-02-01','2001-03-1']">test</lay-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const rangeTime1 = ref([]);
|
||||
const rangeTime2 = ref(['2001-01-01','2001-02-1']);
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Date Picker 属性
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user