onboard/resources/js/Components/DatePickerQuery.vue

<script setup>
import {NDatePicker, NIcon, } from 'naive-ui'
import {computed, onMounted, ref, watch} from "vue";
import {router} from "@inertiajs/vue3";
import {TbCalendar} from 'vue-icons-plus/tb'
import {formatRussianDate, formatRussianDateRange} from "../Utils/dateFormatter.js";
const props = defineProps({
    // Пользователь с ролью админ или зав
    isHeadOrAdmin: {
        type: Boolean,
        default: false
    },
    date: {
        type: [Number, Array]
    },
    isOneDay: {
        type: Boolean
    }
})

const isUseDateRange = computed(() => props.isHeadOrAdmin)
const datePicker = ref()
const showCalendar = ref(false)
const dateType = computed(() => {
    if (isUseDateRange.value) return 'daterange'
    return 'date'
})

const queryDate = ref([null, null])
const modelValue = defineModel('date')

const setQueryDate = () => {
    router.reload({
        data: {
            startAt: queryDate.value[0],
            endAt: queryDate.value[1]
        }
    })
}

// Форматированное значение для отображения
const formattedValue = computed(() => {
    const value = modelValue.value

    if (props.isHeadOrAdmin) {
        if (props.isOneDay) {
            const dateToFormat = Array.isArray(value) ? value[1] : value
            return formatRussianDate(dateToFormat)
        } else if (Array.isArray(value) && value.length >= 2 && value[0] && value[1]) { // Для админа - диапазон дат
            return formatRussianDateRange(value)
        }

        // Если что-то пошло не так, форматируем как одиночную дату
        if (value) {
            const dateToFormat = Array.isArray(value) ? value[0] : value
            return formatRussianDate(dateToFormat)
        }

        return ''
    } else {
        // Для врача - одиночная дата
        let dateToFormat

        if (Array.isArray(value)) {
            dateToFormat = value[1] || value[0]
        } else {
            dateToFormat = value
        }

        // Если выбрана сегодняшняя дата - показываем текущее время
        if (dateToFormat) {
            return formatRussianDate(dateToFormat)
        }
        return ''
    }
})

watch(() => modelValue.value, (newVal, oldVal) => {
    if (!newVal) return

    if (Array.isArray(newVal)) {
        if (newVal.length === 2 &&
            (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
            queryDate.value = newVal
            setQueryDate()
        }
    } else {
        if (newVal !== oldVal) {
            queryDate.value = newVal
            setQueryDate()
        }
    }
})
</script>

<template>
    <div class="relative inline-flex items-center">
        <div v-if="formattedValue" class="font-medium leading-3 cursor-pointer" @click="showCalendar = true">
            {{ formattedValue }}
        </div>

        <NDatePicker v-model:value="modelValue"
                     v-model:show="showCalendar"
                     ref="datePicker"
                     class="opacity-0 absolute! inset-x-0 bottom-full -translate-y-1/2"
                     placement="top-start"
                     input-readonly
                     bind-calendar-months
                     update-value-on-close
                     :type="dateType" />
        <div class="cursor-pointer p-2 flex items-center justify-center" @click="showCalendar = true">
            <NIcon size="20">
                <TbCalendar />
            </NIcon>
        </div>
    </div>
</template>

<style scoped>
:deep(.n-input) {
    position: absolute;
    pointer-events: none;
}
</style>