onboard/resources/js/Components/ReportSelectDate.vue

<script setup>
import {NDatePicker} from 'naive-ui'
import {storeToRefs} from "pinia";
import {useReportStore} from "../Stores/report.js";
import {useAuthStore} from "../Stores/auth.js";
import {computed, ref, onMounted, onUnmounted} from "vue";

const reportStore = useReportStore()
const authStore = useAuthStore()
const {timestampCurrentRange} = storeToRefs(reportStore)

// Текущее время для обновления
const currentTime = ref(Date.now())

// Обновляем время каждую секунду
let intervalId = null
onMounted(() => {
    if (authStore.isDoctor) {
        intervalId = setInterval(() => {
            currentTime.value = Date.now()
        }, 1000)
    }
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId)
    }
})

// Проверяем, является ли дата сегодняшней
const isToday = (timestamp) => {
    const date = new Date(timestamp)
    const today = new Date()

    return date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
}

// Функция для форматирования с заглавной буквой
const formatDateWithCapital = (timestamp) => {
    const date = new Date(timestamp)
    // Форматируем дату на русском
    const formatted = date.toLocaleDateString('ru-RU', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
    // Делаем первую букву заглавной
    return formatted.charAt(0).toUpperCase() + formatted.slice(1)
}

const themeOverride = computed(() => {
    if (authStore.isDoctor) {
        return {
            peers: {
                Input: {
                    border: '',
                    borderHover: '',
                    borderFocus: '',
                    boxShadowFocus: '',
                    color: '',
                    colorFocus: '',
                    fontSizeMedium: '22px',
                    fontWeight: '500'
                }
            }
        }
    }
})

// Используем кастомную функцию форматирования
const formatComputed = computed(() => {
    const baseFormat = "dd.MM.yyyy"

    if (authStore.isDoctor) {
        // Возвращаем функцию форматирования вместо строки
        return formatDateWithCapital(modelComputed.value)
    }

    return baseFormat
})

const typeComputed = computed(() => authStore.isDoctor ? 'date' : 'daterange')

const modelComputed = computed({
    get: () => {
        const value = reportStore.timestampCurrentRange

        if (authStore.isDoctor) {
            if (Array.isArray(value)) {
                const doctorTimestamp = value[1]

                // Если выбрана сегодняшняя дата - показываем текущее время
                if (isToday(doctorTimestamp)) {
                    return currentTime.value
                }
                // Иначе показываем выбранную дату (без обновления)
                return doctorTimestamp
            }
            return value
        }

        if (Array.isArray(value)) {
            return value
        } else {
            return [value, value]
        }
    },
    set: (value) => {
        if (Array.isArray(value)) {
            reportStore.timestampCurrentRange = value
        } else {
            reportStore.timestampCurrentRange = [value, value]
        }

        const queryString = window.location.search
        const params = new URLSearchParams(queryString)
        const userId = params.get('userId')

        reportStore.reportInfo.userId = userId

        reportStore.getDataOnReportDate(reportStore.timestampCurrentRange)
    }
})

const classComputed = computed(() => {
    const baseClasses = []

    if (authStore.isDoctor) {
        baseClasses.push('w-[400px]')
        baseClasses.push('text-end')
    } else {
        baseClasses.push('max-w-[280px]')
    }

    return baseClasses
})
</script>

<template>
    <NDatePicker
        :theme-overrides="themeOverride"
        v-model:value="modelComputed"
        :class="classComputed"
        :format="formatComputed"
        :type="typeComputed"
        placement="top-end"
        input-readonly
        bind-calendar-months
        update-value-on-close
    />
</template>

<style scoped>
:deep(.n-input__suffix) {
    margin-left: 12px;
}
:deep(.n-input),
:deep(.n-input__input-el) {
    cursor: pointer !important;
}
</style>