📝(component): 更新文档
This commit is contained in:
就眠儀式
parent
0e8edc23c0
commit
aa549e6e80
@ -31,9 +31,18 @@
|
||||
></i
|
||||
>
|
||||
</div>
|
||||
<DateContent :date-list="dateList" v-model="Day" @simple="footOnOk"></DateContent>
|
||||
<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>
|
||||
<span
|
||||
v-if="datePicker.type === 'datetime'"
|
||||
@click="datePicker.showPanel.value = 'time'"
|
||||
class="laydate-btns-time"
|
||||
>选择时间</span
|
||||
>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,34 +53,40 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
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';
|
||||
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";
|
||||
|
||||
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 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],
|
||||
() => {
|
||||
dateList.value = setDateList(datePicker.currentYear.value, datePicker.currentMonth.value);
|
||||
dateList.value = setDateList(
|
||||
datePicker.currentYear.value,
|
||||
datePicker.currentMonth.value
|
||||
);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
Day.value = props.modelValue;
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
@ -92,19 +107,19 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Day.value)
|
||||
datePicker.ok()
|
||||
}
|
||||
emits("update:modelValue", Day.value);
|
||||
datePicker.ok();
|
||||
};
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
datePicker.currentYear.value=dayjs().year();
|
||||
datePicker.currentMonth.value=dayjs().month();
|
||||
datePicker.currentYear.value = dayjs().year();
|
||||
datePicker.currentMonth.value = dayjs().month();
|
||||
Day.value = new Date(new Date().toDateString()).getTime();
|
||||
}
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Day.value = -1
|
||||
}
|
||||
Day.value = -1;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,36 +1,75 @@
|
||||
<template>
|
||||
<div class="layui-laydate layui-laydate-range" :class="'layui-laydate-range-' + datePicker.showPanel.value">
|
||||
<div style="display:flex">
|
||||
<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>
|
||||
<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>
|
||||
<span class="laydate-range-time"
|
||||
>{{ startTime.year || "--" }}年</span
|
||||
>
|
||||
<template #content>
|
||||
<YearPanel class="time-panel" v-model="startTime.year" @ok="closeTimePanel"></YearPanel>
|
||||
<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>
|
||||
<span class="laydate-range-time"
|
||||
>{{ startTime.month + 1 }}月</span
|
||||
>
|
||||
<template #content>
|
||||
<MonthPanel class="time-panel" v-model="startTime.month" @ok="closeTimePanel"></MonthPanel>
|
||||
<MonthPanel
|
||||
class="time-panel"
|
||||
v-model="startTime.month"
|
||||
@ok="closeTimePanel"
|
||||
></MonthPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownTimePanelRefLeft" v-if="datePicker.type === 'datetime'">
|
||||
<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')
|
||||
{{
|
||||
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>
|
||||
<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>
|
||||
<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">
|
||||
@ -38,47 +77,92 @@
|
||||
<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>
|
||||
<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>
|
||||
<span class="laydate-range-time"
|
||||
>{{ startTime.month + 2 }}月</span
|
||||
>
|
||||
<template #content>
|
||||
<MonthPanel class="time-panel" v-model="endTime.month" @ok="closeRightMonthPanel"></MonthPanel>
|
||||
<MonthPanel
|
||||
class="time-panel"
|
||||
v-model="endTime.month"
|
||||
@ok="closeRightMonthPanel"
|
||||
></MonthPanel>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<lay-dropdown ref="dropdownTimePanelRefRight" v-if="datePicker.type === 'datetime'">
|
||||
<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') }}
|
||||
{{
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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') }}
|
||||
{{ 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') }}
|
||||
{{
|
||||
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') }}
|
||||
{{ 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') }}
|
||||
{{
|
||||
dayjs()
|
||||
.hour(endTime.hms.hh)
|
||||
.minute(endTime.hms.mm)
|
||||
.second(endTime.hms.ss)
|
||||
.format("HH:mm:ss")
|
||||
}}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
--
|
||||
</template>
|
||||
<template v-else> -- </template>
|
||||
</span>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
@ -89,46 +173,50 @@ export default {
|
||||
};
|
||||
</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';
|
||||
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 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,
|
||||
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,
|
||||
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 hoverDate = ref(-1);
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
@ -157,8 +245,6 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
|
||||
|
||||
//关闭选择时间的面板
|
||||
const dropdownTimePanelRefLeft = ref();
|
||||
const dropdownTimePanelRefRight = ref();
|
||||
@ -167,23 +253,18 @@ 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()
|
||||
}
|
||||
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
|
||||
}
|
||||
if (dropdownYearPanelRefRight.value) dropdownYearPanelRefRight.value.hide();
|
||||
startTime.year = endTime.year;
|
||||
};
|
||||
const closeRightMonthPanel = () => {
|
||||
dropdownMonthPanelRefRight.value.hide()
|
||||
let month = endTime.month - 1
|
||||
dropdownMonthPanelRefRight.value.hide();
|
||||
let month = endTime.month - 1;
|
||||
if (month > 11) {
|
||||
month = 0;
|
||||
startTime.year++;
|
||||
@ -192,25 +273,34 @@ const closeRightMonthPanel = () => {
|
||||
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()
|
||||
}
|
||||
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>
|
||||
@ -3,22 +3,31 @@
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="datePicker.showPanel.value = 'month'">{{ typeof Month !== 'string' ? Month + 1 + ' 月' : '请选择月份'
|
||||
<span @click="datePicker.showPanel.value = 'month'">{{
|
||||
typeof Month !== "string" ? Month + 1 + " 月" : "请选择月份"
|
||||
}}</span>
|
||||
</div>
|
||||
</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) === Month }"
|
||||
@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 @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'year'"
|
||||
class="laydate-btns-time">选择年份</span>
|
||||
<span
|
||||
v-if="datePicker.type === 'yearmonth'"
|
||||
@click="datePicker.showPanel.value = 'year'"
|
||||
class="laydate-btns-time"
|
||||
>选择年份</span
|
||||
>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
@ -28,21 +37,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
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
|
||||
max: dayjs().year() + 100,
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const Month = ref(props.modelValue)
|
||||
const emits = defineEmits(["update:modelValue", "ok"]);
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
const Month = ref(props.modelValue);
|
||||
|
||||
const MONTH_NAME = [
|
||||
"1月",
|
||||
@ -64,10 +73,12 @@ 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.currentDay.value = dayjs(datePicker.currentDay.value)
|
||||
.month(MONTH_NAME.indexOf(item))
|
||||
.valueOf();
|
||||
}
|
||||
if (datePicker.type === "date" || datePicker.type === "datetime") {
|
||||
emits('update:modelValue', MONTH_NAME.indexOf(item))
|
||||
emits("update:modelValue", MONTH_NAME.indexOf(item));
|
||||
}
|
||||
}
|
||||
if (datePicker.simple) {
|
||||
@ -75,29 +86,32 @@ const handleMonthClick = (item: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
Month.value = props.modelValue;
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Month.value)
|
||||
emits("update:modelValue", Month.value);
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
emits("ok");
|
||||
return;
|
||||
} else {
|
||||
datePicker.ok()
|
||||
datePicker.ok();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
Month.value = dayjs().month();
|
||||
}
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Month.value = ''
|
||||
}
|
||||
Month.value = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,9 +2,15 @@
|
||||
<div class="layui-laydate-footer">
|
||||
<slot></slot>
|
||||
<div class="laydate-footer-btns">
|
||||
<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>
|
||||
<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>
|
||||
@ -15,17 +21,17 @@ export default {
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
//foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
|
||||
const emits = defineEmits(['ok', 'clear', 'now']);
|
||||
const emits = defineEmits(["ok", "clear", "now"]);
|
||||
|
||||
const handelOk = () => {
|
||||
emits('ok');
|
||||
}
|
||||
emits("ok");
|
||||
};
|
||||
|
||||
const handelNow = () => {
|
||||
emits('now')
|
||||
}
|
||||
emits("now");
|
||||
};
|
||||
|
||||
const handelClear = () => {
|
||||
emits('clear')
|
||||
}
|
||||
emits("clear");
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -8,10 +8,20 @@
|
||||
</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">
|
||||
<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="[
|
||||
<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') == (hms as hmsType)[item.type]
|
||||
? 'layui-this'
|
||||
@ -26,12 +36,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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
|
||||
}}
|
||||
{{ 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>
|
||||
@ -42,28 +56,28 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { inject, onMounted, ref, Ref, nextTick, watch, h } from 'vue';
|
||||
import { provideType } from '../interface';
|
||||
import PanelFoot from './PanelFoot.vue'
|
||||
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;
|
||||
hh: number;
|
||||
mm: number;
|
||||
ss: number;
|
||||
}
|
||||
export interface TimePanelProps {
|
||||
modelValue: hmsType
|
||||
modelValue: hmsType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {
|
||||
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
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);
|
||||
const hms = ref<{ hh: number; mm: number; ss: number }>(props.modelValue);
|
||||
|
||||
// 点击时间 - hms
|
||||
const chooseTime = (e: any) => {
|
||||
@ -73,13 +87,17 @@ const chooseTime = (e: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
const timePanelRef = ref()
|
||||
const timePanelRef = ref();
|
||||
onMounted(() => {
|
||||
scrollTo();
|
||||
})
|
||||
watch(() => props.modelValue, () => {
|
||||
hms.value = props.modelValue
|
||||
}, { deep: true })
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
hms.value = props.modelValue;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const scrollTo = () => {
|
||||
nextTick(() => {
|
||||
timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
|
||||
@ -102,27 +120,27 @@ const scrollTo = () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//确认关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', hms)
|
||||
emits("update:modelValue", hms);
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
emits("ok");
|
||||
return;
|
||||
} else {
|
||||
datePicker.ok()
|
||||
datePicker.ok();
|
||||
}
|
||||
}
|
||||
};
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
hms.value.hh = dayjs().hour();
|
||||
hms.value.mm = dayjs().minute();
|
||||
hms.value.ss = dayjs().second();
|
||||
scrollTo();
|
||||
}
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
@ -130,5 +148,5 @@ const footOnClear = () => {
|
||||
hms.value.mm = 0;
|
||||
hms.value.ss = 0;
|
||||
scrollTo();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -13,14 +13,23 @@
|
||||
ref="ScrollRef"
|
||||
>
|
||||
<ul class="layui-laydate-list laydate-year-list">
|
||||
<li v-for="item of yearList" :key="item" :class="{ 'layui-this': Year === 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 @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'month'"
|
||||
class="laydate-btns-time">选择月份</span>
|
||||
<span
|
||||
v-if="datePicker.type === 'yearmonth'"
|
||||
@click="datePicker.showPanel.value = 'month'"
|
||||
class="laydate-btns-time"
|
||||
>选择月份</span
|
||||
>
|
||||
<template v-else>{{ Year }}</template>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
@ -31,26 +40,25 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
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'
|
||||
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
|
||||
max: dayjs().year() + 100,
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'ok']);
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
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;
|
||||
@ -61,7 +69,7 @@ const handleYearClick = (item: any) => {
|
||||
} else if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
datePicker.showPanel.value = "month";
|
||||
emits('update:modelValue', Year.value);
|
||||
emits("update:modelValue", Year.value);
|
||||
} else {
|
||||
datePicker.showPanel.value = "date";
|
||||
}
|
||||
@ -79,10 +87,13 @@ const handleYearClick = (item: any) => {
|
||||
const ScrollRef = ref();
|
||||
onMounted(() => {
|
||||
scrollTo();
|
||||
})
|
||||
watch(() => Year, () => {
|
||||
});
|
||||
watch(
|
||||
() => Year,
|
||||
() => {
|
||||
Year.value = props.modelValue;
|
||||
})
|
||||
}
|
||||
);
|
||||
const scrollTo = () => {
|
||||
nextTick(() => {
|
||||
let scrollTop = 0;
|
||||
@ -94,33 +105,33 @@ const scrollTo = () => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
ScrollRef.value.scrollTo(0, scrollTop)
|
||||
})
|
||||
}
|
||||
ScrollRef.value.scrollTo(0, scrollTop);
|
||||
});
|
||||
};
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits('update:modelValue', Year.value)
|
||||
emits("update:modelValue", Year.value);
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits('ok');
|
||||
emits("ok");
|
||||
return;
|
||||
} else {
|
||||
datePicker.ok()
|
||||
datePicker.ok();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
Year.value = dayjs().year();
|
||||
if (datePicker.type === 'yearmonth') {
|
||||
if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentMonth.value = dayjs().month();
|
||||
}
|
||||
scrollTo();
|
||||
}
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Year.value = ''
|
||||
}
|
||||
Year.value = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,36 @@
|
||||
<template>
|
||||
<div class="layui-laydate-content">
|
||||
<table style="width:100%">
|
||||
<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.length % 7 == 0
|
||||
<template
|
||||
v-for="(o, i) of dateList.length % 7 == 0
|
||||
? dateList.length / 7
|
||||
: Math.floor(dateList.length / 7) + 1" :key="i">
|
||||
: Math.floor(dateList.length / 7) + 1"
|
||||
:key="i"
|
||||
>
|
||||
<tr>
|
||||
<td v-for="(item, index) of dateList.slice(
|
||||
i * 7,
|
||||
i * 7 + 7
|
||||
)" :key="index" :data-unix="item.value" :class="{
|
||||
<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)),
|
||||
'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)">
|
||||
'layui-disabled': item.type !== 'current' && datePicker.range,
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
@mouseenter="dayItemMouseEnter($event, item)"
|
||||
>
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
@ -50,11 +61,17 @@ const props = withDefaults(defineProps<DateContentProps>(), {
|
||||
modelValue: -1,
|
||||
hoverDate: -1,
|
||||
startDate: -1,
|
||||
endDate: -1
|
||||
endDate: -1,
|
||||
});
|
||||
const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
const datePicker: provideType = inject('datePicker') as provideType;
|
||||
const emits = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'update:hoverDate','simple']);
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
const emits = defineEmits([
|
||||
"update:modelValue",
|
||||
"update:startDate",
|
||||
"update:endDate",
|
||||
"update:hoverDate",
|
||||
"simple",
|
||||
]);
|
||||
|
||||
// 点击日期
|
||||
const handleDayClick = (item: any) => {
|
||||
@ -64,28 +81,31 @@ const handleDayClick = (item: any) => {
|
||||
}
|
||||
|
||||
if (props.startDate === -1 && props.endDate === -1) {
|
||||
emits('update:startDate', item.value)
|
||||
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)
|
||||
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)
|
||||
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);
|
||||
emits("update:startDate", last);
|
||||
emits("update:endDate", first);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
emits('update:modelValue', item.value);
|
||||
emits("update:modelValue", item.value);
|
||||
if (item.type !== "current") {
|
||||
datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
|
||||
datePicker.currentMonth.value =
|
||||
item.type === "prev"
|
||||
? datePicker.currentMonth.value - 1
|
||||
: datePicker.currentMonth.value + 1;
|
||||
}
|
||||
if (datePicker.simple) {
|
||||
emits('simple');
|
||||
emits("simple");
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -101,30 +121,33 @@ const dayItemMouseEnter = (event: MouseEvent, item: any) => {
|
||||
return;
|
||||
}
|
||||
if (props.startDate !== -1 && props.endDate !== -1) {
|
||||
emits('update:hoverDate', -1);
|
||||
emits("update:hoverDate", -1);
|
||||
return;
|
||||
}
|
||||
emits('update:hoverDate', parseInt((event.target as HTMLElement).dataset.unix as string));
|
||||
}
|
||||
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 (props.startDate === -1) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
if (item.type !== "current") {
|
||||
return false;
|
||||
}
|
||||
if(props.hoverDate===-1&&props.endDate===-1){
|
||||
return false
|
||||
if (props.hoverDate === -1 && props.endDate === -1) {
|
||||
return false;
|
||||
}
|
||||
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
|
||||
let min = props.startDate < hover ? props.startDate : hover;
|
||||
if (item.value >= min && item.value <= max) {
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
@ -1,30 +1,68 @@
|
||||
<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
|
||||
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
|
||||
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
|
||||
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')" v-model="currentDay"></DatePanel>
|
||||
<DatePanel
|
||||
v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model="currentDay"
|
||||
></DatePanel>
|
||||
<!-- 时间选择 -->
|
||||
<TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
|
||||
<TimePanel
|
||||
v-if="!range && showPanel === 'time'"
|
||||
v-model="hms"
|
||||
></TimePanel>
|
||||
<!-- 年份选择器 -->
|
||||
<YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
|
||||
<YearPanel
|
||||
v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
|
||||
v-model="currentYear"
|
||||
>
|
||||
</YearPanel>
|
||||
<!-- 月份选择器 -->
|
||||
<MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></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>
|
||||
<DateRange
|
||||
v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
|
||||
v-model:startTime="rangeValue.first"
|
||||
v-model:endTime="rangeValue.last"
|
||||
></DateRange>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
@ -43,12 +81,20 @@ import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayDropdown from "../dropdown/index.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';
|
||||
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";
|
||||
@ -69,7 +115,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
disabled: false,
|
||||
simple: false,
|
||||
range: false,
|
||||
rangeSeparator: '至'
|
||||
rangeSeparator: "至",
|
||||
});
|
||||
|
||||
const dropdownRef = ref(null);
|
||||
@ -83,68 +129,103 @@ 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 rangeValue = reactive({ first: "", last: "" });
|
||||
|
||||
let unWatch = false;
|
||||
// 计算结果日期
|
||||
const dateValue = props.range ? ref(['', '']) : ref('');
|
||||
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") : '';
|
||||
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") : '';
|
||||
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') : '';
|
||||
dayjsVal =
|
||||
currentYear.value !== -1
|
||||
? dayjs().year(currentYear.value).format("YYYY")
|
||||
: "";
|
||||
break;
|
||||
case "month":
|
||||
dayjsVal = currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : '';
|
||||
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");
|
||||
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");
|
||||
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() : '';
|
||||
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);
|
||||
setTimeout(() => {
|
||||
unWatch = false;
|
||||
}, 0);
|
||||
};
|
||||
const getDateValueByRange = () => {
|
||||
unWatch = true;
|
||||
if (rangeValue.first === '' || rangeValue.last === '') {
|
||||
dateValue.value = ['', ''];
|
||||
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)];
|
||||
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);
|
||||
}
|
||||
setTimeout(() => {
|
||||
unWatch = false;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
// 确认事件
|
||||
const ok = () => {
|
||||
if (!props.range) {
|
||||
if (props.type === 'time') {
|
||||
getDateValue()
|
||||
if (props.type === "time") {
|
||||
getDateValue();
|
||||
} else {
|
||||
getDateValue()
|
||||
getDateValue();
|
||||
}
|
||||
} else {
|
||||
getDateValueByRange()
|
||||
getDateValueByRange();
|
||||
}
|
||||
if (dropdownRef.value)
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide();
|
||||
showPanel.value = props.type
|
||||
showPanel.value = props.type;
|
||||
};
|
||||
|
||||
//面板类型判断
|
||||
@ -152,26 +233,32 @@ watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
showPanel.value = props.type;
|
||||
if (props.type === 'yearmonth') {
|
||||
showPanel.value = 'year';
|
||||
if (props.type === "yearmonth") {
|
||||
showPanel.value = "year";
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
//监听modelValue改变
|
||||
watch(() => props.modelValue, () => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
if (unWatch) {
|
||||
return;
|
||||
}
|
||||
let initModelValue = props.range && props.modelValue ? (props.modelValue as string[])[0] || '' : props.modelValue as string;
|
||||
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();
|
||||
|
||||
if (initModelValue.length === 8 && props.type === 'time') { //dayjs 解析时间容错
|
||||
if (initModelValue.length === 8 && props.type === "time") {
|
||||
//dayjs 解析时间容错
|
||||
let modelValue = initModelValue;
|
||||
modelValue = '1970-01-01 ' + modelValue;
|
||||
modelValue = "1970-01-01 " + modelValue;
|
||||
hms.value.hh = dayjs(modelValue).hour();
|
||||
hms.value.mm = dayjs(modelValue).minute();
|
||||
hms.value.ss = dayjs(modelValue).second();
|
||||
@ -181,14 +268,18 @@ watch(() => props.modelValue, () => {
|
||||
currentDay.value = getDay(initModelValue);
|
||||
|
||||
rangeValue.first = initModelValue;
|
||||
rangeValue.last = props.range && props.modelValue ? (props.modelValue as string[])[1] || '' : '';
|
||||
rangeValue.last =
|
||||
props.range && props.modelValue
|
||||
? (props.modelValue as string[])[1] || ""
|
||||
: "";
|
||||
if (!props.range) {
|
||||
getDateValue();
|
||||
} else {
|
||||
getDateValueByRange();
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
provide("datePicker", {
|
||||
currentYear: currentYear,
|
||||
@ -203,6 +294,6 @@ provide("datePicker", {
|
||||
range: props.range,
|
||||
rangeValue: rangeValue,
|
||||
rangeSeparator: props.rangeSeparator,
|
||||
simple: props.simple
|
||||
simple: props.simple,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,18 +3,24 @@ import { Ref } from "vue";
|
||||
export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
|
||||
|
||||
export type provideType = {
|
||||
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,
|
||||
}
|
||||
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;
|
||||
};
|
||||
|
||||
@ -48,13 +48,18 @@ const emit = defineEmits<InputEmits>();
|
||||
const { t } = useI18n();
|
||||
const slots = useSlots();
|
||||
const type = ref(props.type);
|
||||
const currentValue = ref<string>(String(props.modelValue == null ? "" : props.modelValue));
|
||||
const currentValue = ref<string>(
|
||||
String(props.modelValue == null ? "" : props.modelValue)
|
||||
);
|
||||
const hasContent = computed(() => (props.modelValue as string)?.length > 0);
|
||||
const isPassword = computed(() => type.value == "password")
|
||||
const isPassword = computed(() => type.value == "password");
|
||||
|
||||
watch(() => props.type, () => {
|
||||
watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
type.value = props.type;
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
@ -101,12 +106,12 @@ const classes = computed(() => {
|
||||
});
|
||||
|
||||
const showPassword = () => {
|
||||
if(isPassword.value) {
|
||||
if (isPassword.value) {
|
||||
type.value = "text";
|
||||
} else {
|
||||
type.value = "password";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -147,7 +152,10 @@ const showPassword = () => {
|
||||
></lay-icon>
|
||||
</span>
|
||||
<span class="layui-input-password" v-if="password">
|
||||
<lay-icon :type="isPassword ? 'layui-icon-face-smile' : 'layui-icon-face-cry'" @click="showPassword"></lay-icon>
|
||||
<lay-icon
|
||||
:type="isPassword ? 'layui-icon-face-smile' : 'layui-icon-face-cry'"
|
||||
@click="showPassword"
|
||||
></lay-icon>
|
||||
</span>
|
||||
<span class="layui-input-clear" v-if="allowClear && hasContent">
|
||||
<lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
|
||||
|
||||
@ -261,6 +261,7 @@ export default {
|
||||
| allow-clear | 允许清空 allow-clear | `true` `false` |
|
||||
| prefix-icon | 前置图标 | -- |
|
||||
| suffix-icon | 后置图标 | -- |
|
||||
| password | 开启密码显示隐藏 | `true` `false`|
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user