<script lang="ts" setup>
|
import { computed, ref, unref, watch } from 'vue';
|
|
import { useAttrs } from '@jnpf/hooks';
|
import { getDateFormat, getDateTimeUnit } from '@jnpf/utils';
|
|
import { DatePicker } from 'ant-design-vue';
|
import dayjs, { Dayjs } from 'dayjs';
|
|
import { datePickerProps } from './props';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfDatePicker' });
|
const props = defineProps(datePickerProps);
|
const emit = defineEmits(['update:value', 'change']);
|
const attrs: any = useAttrs({ excludeDefaultKeys: false });
|
const innerValue = ref('');
|
const innerFormat = ref('');
|
|
const getFormat = computed(() => getDateFormat(props.format || 'YYYY-MM-DD'));
|
const getActiveFormat = computed(() => innerFormat.value || unref(getFormat));
|
const getShowTime = computed(() => unref(getActiveFormat) === 'YYYY-MM-DD HH:mm' || unref(getActiveFormat) === 'YYYY-MM-DD HH:mm:ss');
|
const getPicker = computed(() => {
|
if (unref(getActiveFormat) === 'YYYY') return 'year';
|
if (unref(getActiveFormat) === 'YYYY-MM') return 'month';
|
return 'date';
|
});
|
const getRealStartTime = computed(() => {
|
const format = unref(getActiveFormat);
|
if (!props.startTime || format === 'YYYY-MM-DD HH:mm:ss') return props.startTime;
|
const startTime = dayjs(props.startTime).startOf(getDateTimeUnit(format)).valueOf();
|
return startTime;
|
});
|
const getRealEndTime = computed(() => {
|
const format = unref(getActiveFormat);
|
if (!props.endTime || format === 'YYYY-MM-DD HH:mm:ss') return props.endTime;
|
const endTime = dayjs(props.endTime).endOf(getDateTimeUnit(format)).valueOf();
|
return endTime;
|
});
|
const getBindValue = computed(() => {
|
const bindValue = {
|
...unref(attrs),
|
disabledDate: (current: Dayjs) => {
|
const startTime = unref(getRealStartTime);
|
const endTime = unref(getRealEndTime);
|
if ((!startTime && !endTime) || !current) return false;
|
const currentDate = current.startOf(getDateTimeUnit(unref(getActiveFormat))).valueOf();
|
if (startTime && endTime) return startTime > currentDate || endTime < currentDate;
|
if (startTime) return startTime > currentDate;
|
if (endTime) return endTime < currentDate;
|
return false;
|
},
|
disabledTime: (current: Dayjs) => ({
|
disabledHours: () => {
|
const startTime = unref(getRealStartTime);
|
const endTime = unref(getRealEndTime);
|
if ((!startTime && !endTime) || !current) return [];
|
const hours: number[] = [];
|
if (startTime && current.format('YYYY-MM-DD') === dayjs(startTime).format('YYYY-MM-DD')) {
|
const startHour = dayjs(startTime).hour();
|
for (let i = 0; i < startHour; i++) {
|
hours.push(i);
|
}
|
}
|
if (endTime && current.format('YYYY-MM-DD') === dayjs(endTime).format('YYYY-MM-DD')) {
|
const endHour = dayjs(endTime).hour();
|
for (let i = 0; i < 24; i++) {
|
if (i > endHour) hours.push(i);
|
}
|
}
|
return hours;
|
},
|
disabledMinutes: (selectedHour) => {
|
const startTime = unref(getRealStartTime);
|
const endTime = unref(getRealEndTime);
|
if ((!startTime && !endTime) || !current) return [];
|
const minutes: number[] = [];
|
if (startTime && current.format('YYYY-MM-DD') === dayjs(startTime).format('YYYY-MM-DD')) {
|
const startHour = dayjs(startTime).hour();
|
const startMinute = dayjs(startTime).minute();
|
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 && current.format('YYYY-MM-DD') === dayjs(endTime).format('YYYY-MM-DD')) {
|
const endHour = dayjs(endTime).hour();
|
const endMinute = dayjs(endTime).minute();
|
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 startTime = unref(getRealStartTime);
|
const endTime = unref(getRealEndTime);
|
if ((!startTime && !endTime) || !current || unref(getActiveFormat) === 'YYYY-MM-DD HH:mm') return [];
|
const seconds: number[] = [];
|
const selectedHourMinute = padZero(selectedHour) + padZero(selectedMinute);
|
if (startTime && current.format('YYYY-MM-DD') === dayjs(startTime).format('YYYY-MM-DD')) {
|
const startHourMinute = padZero(dayjs(startTime).hour()) + padZero(dayjs(startTime).minute());
|
const startSecond = dayjs(startTime).second();
|
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 && current.format('YYYY-MM-DD') === dayjs(endTime).format('YYYY-MM-DD')) {
|
const endHourMinute = padZero(dayjs(endTime).hour()) + padZero(dayjs(endTime).minute());
|
const endSecond = dayjs(endTime).second();
|
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: unref(getActiveFormat),
|
showNow: !props.startTime && !props.endTime,
|
showTime: unref(getShowTime),
|
showToday: !props.startTime && !props.endTime,
|
valueFormat: unref(getActiveFormat),
|
};
|
if (Reflect.has(unref(attrs), 'disabledDate')) bindValue.disabledDate = unref(attrs).disabledDate;
|
if (Reflect.has(unref(attrs), 'disabledTime')) bindValue.disabledTime = unref(attrs).disabledTime;
|
return bindValue;
|
});
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
watch(
|
() => unref(getFormat),
|
() => {
|
setValue(props.value);
|
},
|
);
|
|
function setValue(value) {
|
try {
|
if (!hasValue(value)) {
|
innerFormat.value = '';
|
innerValue.value = '';
|
return;
|
}
|
innerFormat.value = getInputFormat(value);
|
const date = parseDateValue(value);
|
innerValue.value = date?.isValid() ? date.format(unref(getActiveFormat)) : '';
|
} catch (error) {
|
console.warn('[JnpfDatePicker] parse value failed:', error);
|
innerFormat.value = '';
|
innerValue.value = '';
|
}
|
}
|
function onChange(date, dateString) {
|
const value = getShouldKeepStringValue() ? dateString || null : date ? dayjs(date).valueOf() : null;
|
emit('update:value', value);
|
emit('change', value);
|
}
|
function padZero(str) {
|
return /^\d$/.test(str) ? `0${str}` : str.toString();
|
}
|
function hasValue(value) {
|
return value !== null && value !== undefined && value !== '';
|
}
|
function getInputFormat(value) {
|
if (typeof value !== 'string') return '';
|
const text = value.trim().replaceAll('/', '-');
|
if (/^\d{4}-\d{1,2}$/.test(text)) return 'YYYY-MM';
|
return '';
|
}
|
function getShouldKeepStringValue() {
|
return !!innerFormat.value && innerFormat.value !== unref(getFormat);
|
}
|
function parseDateValue(value) {
|
if (!hasValue(value)) return null;
|
if (typeof value === 'number') return Number.isNaN(value) ? null : dayjs(value);
|
if (value instanceof Date) return dayjs(value);
|
if (typeof value !== 'string') {
|
const date = dayjs(value);
|
return date.isValid() ? date : null;
|
}
|
const text = value.trim().replaceAll('/', '-');
|
if (!text) return null;
|
if (/^\d+$/.test(text)) {
|
const timestamp = Number(text);
|
return Number.isNaN(timestamp) ? null : dayjs(text.length === 10 ? timestamp * 1000 : timestamp);
|
}
|
const match = text.match(/^(\d{4})(?:-(\d{1,2}))?(?:-(\d{1,2}))?(?:[ T](\d{1,2})(?::(\d{1,2})(?::(\d{1,2}))?)?)?/);
|
if (match) {
|
const [, year, month = '1', day = '1', hour = '0', minute = '0', second = '0'] = match;
|
return dayjs(new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second)));
|
}
|
const date = dayjs(value);
|
return date.isValid() ? date : null;
|
}
|
</script>
|
|
<template>
|
<DatePicker v-bind="getBindValue" v-model:value="innerValue" :picker="getPicker" @change="onChange" />
|
</template>
|
