<script lang="ts" setup>
|
import { computed, ref, unref, watch } from 'vue';
|
|
import { useAttrs } from '@jnpf/hooks';
|
|
import { TimePicker } from 'ant-design-vue';
|
|
import { timeRangeProps } from './props';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfTimeRange' });
|
|
const props = defineProps(timeRangeProps);
|
|
const emit = defineEmits(['update:value', 'change']);
|
|
const TimeRangePicker = TimePicker.TimeRangePicker;
|
|
const attrs = useAttrs({ excludeDefaultKeys: false });
|
const innerValue = ref<[string, string] | undefined>(undefined);
|
|
const getStartTimeArr = computed<any[]>(() => {
|
if (!props.startTime) return [];
|
return props.startTime.split(':');
|
});
|
const getEndTimeArr = computed<any[]>(() => {
|
if (!props.endTime) return [];
|
return props.endTime.split(':');
|
});
|
const getBindValue: any = computed(() => ({
|
...unref(attrs),
|
disabledTime: () => ({
|
disabledHours: () => {
|
const { endTime, startTime } = props;
|
if (!startTime && !endTime) return [];
|
const hours: number[] = [];
|
if (startTime) {
|
const startHour = Number(unref(getStartTimeArr)[0]);
|
for (let i = 0; i < startHour; i++) {
|
hours.push(i);
|
}
|
}
|
if (endTime) {
|
const endHour = Number(unref(getEndTimeArr)[0]);
|
for (let i = 0; i < 24; i++) {
|
if (i > endHour) hours.push(i);
|
}
|
}
|
return hours;
|
},
|
disabledMinutes: (selectedHour) => {
|
const { endTime, startTime } = props;
|
if (!startTime && !endTime) return [];
|
const minutes: number[] = [];
|
if (startTime) {
|
const startHour = Number(unref(getStartTimeArr)[0]);
|
const startMinute = Number(unref(getStartTimeArr)[1]);
|
if (selectedHour < startHour) {
|
for (let i = 0; i < 60; i++) {
|
minutes.push(i);
|
}
|
return minutes;
|
}
|
if (selectedHour === startHour) {
|
for (let i = 0; i < startMinute; i++) {
|
minutes.push(i);
|
}
|
}
|
}
|
if (endTime) {
|
const endHour = Number(unref(getEndTimeArr)[0]);
|
const endMinute = Number(unref(getEndTimeArr)[1]);
|
if (selectedHour === endHour) {
|
for (let i = 0; i < 60; i++) {
|
if (i > endMinute) minutes.push(i);
|
}
|
return minutes;
|
}
|
if (selectedHour > endHour) {
|
for (let i = 0; i < 60; i++) {
|
minutes.push(i);
|
}
|
return minutes;
|
}
|
}
|
return minutes;
|
},
|
disabledSeconds: (selectedHour, selectedMinute) => {
|
const { endTime, startTime } = props;
|
if ((!startTime && !endTime) || props.format === 'HH:mm') return [];
|
const seconds: number[] = [];
|
const selectedHourMinute = padZero(selectedHour) + padZero(selectedMinute);
|
if (startTime) {
|
const startHourMinute = unref(getStartTimeArr)[0] + unref(getStartTimeArr)[1];
|
const startSecond = unref(getStartTimeArr)[2] ? Number(unref(getStartTimeArr)[2]) : 0;
|
if (selectedHourMinute < startHourMinute) {
|
for (let i = 0; i < 60; i++) {
|
seconds.push(i);
|
}
|
return seconds;
|
}
|
if (selectedHourMinute === startHourMinute) {
|
for (let i = 0; i < startSecond; i++) {
|
seconds.push(i);
|
}
|
}
|
}
|
if (endTime) {
|
const endHourMinute = unref(getEndTimeArr)[0] + unref(getEndTimeArr)[1];
|
const endSecond = unref(getEndTimeArr)[2] ? Number(unref(getEndTimeArr)[2]) : 0;
|
if (selectedHourMinute === endHourMinute) {
|
for (let i = 0; i < 60; i++) {
|
if (i > endSecond) seconds.push(i);
|
}
|
return seconds;
|
}
|
if (selectedHourMinute > endHourMinute) {
|
for (let i = 0; i < 60; i++) {
|
seconds.push(i);
|
}
|
return seconds;
|
}
|
}
|
return seconds;
|
},
|
}),
|
format: props.format,
|
placeholder: props.placeholder,
|
showNow: !props.startTime && !props.endTime,
|
valueFormat: props.format,
|
}));
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function setValue(value) {
|
innerValue.value = value;
|
}
|
function onChange(date) {
|
emit('update:value', date);
|
emit('change', date);
|
}
|
function padZero(str) {
|
return /^\d$/.test(str) ? `0${str}` : str.toString();
|
}
|
</script>
|
|
<template>
|
<TimeRangePicker v-bind="getBindValue" v-model:value="innerValue" @change="onChange" />
|
</template>
|
