@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/DatePicker/{DatePicker.vue → DatePicker/DatePicker.vue}

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
 	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance } from 'vue'
-	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
-	import DateTextInput from './DateTextInput.vue'
+	import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
+	import DateTextInput from '../DateTextInput/DateTextInput.vue'
+	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
 	import { VDatePicker } from 'vuetify/components'
 	import { useValidation } from '@/composables/validation/useValidation'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
+	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay } from '../composables'
+	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
+	import { mdiCalendar } from '@mdi/js'
+	import { useHolidayDay } from '@/composables/date/useHolidayDay'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -17,12 +22,20 @@
 	const { initializeSelectedDates } = useDateInitialization()
 	const { updateAccessibility } = useDatePickerAccessibility()
 
+	// Variables pour suivre le mois et l'année actuellement affichés dans le DatePicker
+	const currentMonth = ref<string | null>(null)
+	const currentYear = ref<string | null>(null)
+	const currentMonthName = ref<string | null>(null)
+	const currentYearName = ref<string | null>(null)
+
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
+		label?: string
 		placeholder?: string
 		format?: string
 		dateFormatReturn?: string
 		isBirthDate?: boolean
+		birthDate?: boolean // Alias pour isBirthDate pour compatibilité avec l'attribut kebab-case birth-date
 		showWeekNumber?: boolean
 		required?: boolean
 		displayRange?: boolean
@@ -42,12 +55,27 @@
 		disableErrorHandling?: boolean
 		showSuccessMessages?: boolean
 		bgColor?: string
+		density?: 'default' | 'comfortable' | 'compact'
+		hideDetails?: boolean | 'auto'
+		displayWeekendDays?: boolean
+		displayTodayButton?: boolean
+		displayHolidayDays?: boolean
+		useCombinedMode?: boolean
+		textFieldActivator?: boolean
+		displayAsterisk?: boolean
+		period?: {
+			min?: string
+			max?: string
+		}
+		autoClamp?: boolean
 	}>(), {
 		modelValue: undefined,
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
+		label: DATE_PICKER_MESSAGES.LABEL_DEFAULT,
+		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
+		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		dateFormatReturn: '',
 		isBirthDate: false,
+		birthDate: false,
 		showWeekNumber: false,
 		required: false,
 		displayRange: false,
@@ -64,20 +92,72 @@
 		width: '100%',
 		disableErrorHandling: false,
 		showSuccessMessages: true,
-		bgColor: undefined,
+		bgColor: 'white',
+		density: 'default',
+		hideDetails: false,
+		displayWeekendDays: true,
+		displayTodayButton: true,
+		displayHolidayDays: true,
+		useCombinedMode: false,
+		textFieldActivator: false,
+		displayAsterisk: false,
+		period: () => ({
+			min: '',
+			max: '',
+		}),
+		autoClamp: false,
 	})
 
+	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
+
+	// Utilisation des composables pour les fonctionnalités du DatePicker
+	const { displayWeekendDays } = useWeekendDays(props)
+	const { todayInString } = useTodayButton(props)
+	const { labelWithAsterisk } = useAsteriskDisplay(props)
+
+	const selectedDates = ref<Date | Date[] | null>(
+		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
+	)
+
+	// Utilisation du composable pour l'affichage formaté des dates
+	const { displayedDateString } = useDisplayedDateString({
+		selectedDates,
+		todayInString,
+	})
+
+	// Fonction pour sélectionner la date du jour
+	const handleSelectToday = () => {
+		// Créer une seule instance de la date du jour
+		const today = new Date()
+
+		// Si c'est une plage de dates, on définit le même jour pour début et fin
+		if (props.displayRange) {
+			selectedDates.value = [today, today]
+			// Formater les dates pour le modèle (format de retour)
+			const formattedToday = formatDate(today, props.dateFormatReturn || props.format)
+			updateModel([formattedToday, formattedToday])
+		}
+		else {
+			// Sinon, on sélectionne simplement aujourd'hui
+			selectedDates.value = today
+			// Formater la date pour le modèle (format de retour)
+			const formattedToday = formatDate(today, props.dateFormatReturn || props.format)
+			updateModel(formattedToday)
+		}
+
+		// Mettre à jour l'affichage formaté
+		updateDisplayFormattedDate()
+	}
+
 	const emit = defineEmits<{
 		(e: 'update:modelValue', value: DateValue): void
 		(e: 'closed'): void
 		(e: 'focus'): void
 		(e: 'blur'): void
+		(e: 'input', value: DateValue): void
+		(e: 'date-selected', value: DateValue): void
 	}>()
 
-	const selectedDates = ref<Date | Date[] | null>(
-		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
-	)
-
 	const isDatePickerVisible = ref(false)
 	const validation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
@@ -105,6 +185,7 @@
 
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
+	const isInitialValidation = ref(true)
 
 	// Fonction pour valider les dates
 	const validateDates = (forceValidation = false) => {
@@ -125,12 +206,12 @@
 			if (props.readonly) {
 				return
 			}
-			if (shouldDisplayErrors) {
-				errors.value.push('La date est requise.')
+			// Ne pas afficher d'erreur si on est dans le contexte du mounted initial
+			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
+				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
 			}
 			return
 		}
-
 		if (!selectedDates.value) return
 
 		// Préparer les dates à valider
@@ -163,6 +244,9 @@
 		try {
 			isUpdatingFromInternal.value = true
 			emit('update:modelValue', value)
+			isDatePickerVisible.value = false
+			emit('closed')
+			validateDates()
 		}
 		finally {
 			// S'assurer que le flag est toujours réinitialisé
@@ -176,6 +260,8 @@
 	watch(selectedDates, (newValue) => {
 		// Valider les dates
 		validateDates()
+		// Marquer les jours fériés après la mise à jour des dates
+		markHolidayDays()
 
 		// Mettre à jour le modèle si nécessaire
 		if (newValue !== null) {
@@ -215,9 +301,13 @@
 		'v-messages__message--warning': warningMessages.value.length > 0 && errorMessages.value.length < 1,
 	})
 
-	const inputStyle = computed(() => ({
-		'min-width': '100%',
-	}))
+	// Utilisation du composable pour gérer la sélection de dates
+	const { updateSelectedDates, rangeBoundaryDates } = useDateSelection(
+		parseDate,
+		selectedDates,
+		props.format,
+		props.displayRange,
+	)
 
 	// Date(s) formatée(s) en chaîne de caractères pour la valeur de retour
 	const formattedDate = computed<DateValue>(() => {
@@ -225,11 +315,18 @@
 
 		const returnFormat = props.dateFormatReturn || props.format
 
-		if (Array.isArray(selectedDates.value)) {
+		// Pour les plages de dates, utiliser rangeBoundaryDates s'il est disponible
+		if (props.displayRange && rangeBoundaryDates.value) {
+			return [
+				formatDate(rangeBoundaryDates.value[0], returnFormat),
+				formatDate(rangeBoundaryDates.value[1], returnFormat),
+			] as [string, string]
+		}
+		else if (Array.isArray(selectedDates.value)) {
 			if (selectedDates.value.length >= 2) {
 				return [
 					formatDate(selectedDates.value[0], returnFormat),
-					formatDate(selectedDates.value[1], returnFormat),
+					formatDate(selectedDates.value[selectedDates.value.length - 1], returnFormat),
 				] as [string, string]
 			}
 			return ''
@@ -256,9 +353,59 @@
 		}
 	}, { immediate: true })
 
+	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
+	const handleDateTextInputUpdate = (value: DateValue) => {
+		if (isUpdatingFromInternal.value) return
+
+		try {
+			isUpdatingFromInternal.value = true
+
+			// Mettre à jour le modèle avec la valeur reçue du DateTextInput
+			updateModel(value)
+
+			// Mettre à jour selectedDates en fonction de la valeur reçue
+			if (!value) {
+				selectedDates.value = null
+				displayFormattedDate.value = ''
+			}
+			else if (Array.isArray(value) && props.displayRange) {
+				// Pour les plages de dates
+				const [startDateStr, endDateStr] = value
+				const startDate = parseDate(startDateStr, props.dateFormatReturn || props.format)
+				const endDate = parseDate(endDateStr, props.dateFormatReturn || props.format)
+
+				if (startDate && endDate) {
+					selectedDates.value = [startDate, endDate]
+					displayFormattedDate.value = `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
+				}
+			}
+			else if (typeof value === 'string') {
+				// Pour une date unique
+				const date = parseDate(value, props.dateFormatReturn || props.format)
+				if (date) {
+					selectedDates.value = date
+					displayFormattedDate.value = formatDate(date, props.format)
+				}
+			}
+		}
+		finally {
+			setTimeout(() => {
+				isUpdatingFromInternal.value = false
+			}, 0)
+		}
+	}
+
+	// Gestionnaire pour les événements date-selected du DateTextInput
+	const handleDateTextInputSelection = (value: DateValue) => {
+		if (isUpdatingFromInternal.value) return
+
+		// Mettre à jour le modèle avec la valeur sélectionnée
+		updateModel(value)
+	}
+
 	watch(textInputValue, (newValue) => {
 		// Éviter les mises à jour récursives
-		if (isUpdatingFromInternal.value) return
+		if (isUpdatingFromInternal.value || props.noCalendar) return
 
 		// Parse la date avec le format d'affichage
 		const date = parseDate(newValue, props.format)
@@ -343,26 +490,7 @@
 		}
 	}
 
-	const updateSelectedDates = (input: DateValue) => {
-		if (Array.isArray(input)) {
-			const dates = input
-				.map(date => (date ? parseDate(date, props.format) : null))
-				.filter((date): date is Date => date !== null)
-
-			if (dates.length === 0) {
-				selectedDates.value = null
-				return
-			}
-
-			selectedDates.value = dates
-			return
-		}
-
-		if (!props.displayRange) {
-			const date = input ? parseDate(input, props.format) : null
-			selectedDates.value = date === null ? null : date
-		}
-	}
+	// Le composable useDateSelection est déjà initialisé plus haut dans le code
 
 	// Gestionnaire de clic en dehors
 	const handleClickOutside = (event: MouseEvent) => {
@@ -378,20 +506,33 @@
 		validateDates()
 	}
 
-	const todayInString = computed(() => {
-		return dayjs().locale('fr').format('dddd D MMMM').replace(/\b\w/g, l => l.toUpperCase())
-	})
+	// todayInString est maintenant fourni par le composable useTodayButton
+
+	// Utilisation du composable pour personnaliser les boutons du mois et de l'année
+	const { customizeMonthButton, setupMonthButtonObserver } = useMonthButtonCustomization(
+		() => isDatePickerVisible.value,
+		currentMonthName,
+		currentYearName,
+	)
 
 	onMounted(() => {
 		document.addEventListener('click', handleClickOutside)
 
+		// Configurer l'observateur pour le bouton du mois
+		setupMonthButtonObserver()
+
 		// Initialiser l'affichage formaté
 		if (displayFormattedDateComputed.value) {
 			displayFormattedDate.value = displayFormattedDateComputed.value
 		}
 
-		// Valider les dates au montage
+		// Valider les dates au montage, mais sans afficher d'erreur pour le required
 		validateDates()
+
+		// Après la validation initiale, désactiver le flag
+		nextTick(() => {
+			isInitialValidation.value = false
+		})
 	})
 
 	onBeforeUnmount(() => {
@@ -418,35 +559,95 @@
 		}
 	}
 
-	type ViewMode = 'month' | 'year' | 'months' | undefined
+	// Fonction pour mettre à jour le mois
+	const onUpdateMonth = (month: string) => {
+		// Éviter les mises à jour inutiles si le mois n'a pas changé
+		if (currentMonth.value === month) return
+		currentMonth.value = month
+		currentMonthName.value = dayjs().month(parseInt(month, 10)).format('MMMM')
+		handleMonthUpdate()
+		nextTick(() => {
+			if (isDatePickerVisible.value) {
+				customizeMonthButton()
+				markHolidayDays()
+			}
+		})
+	}
+
+	// Fonction pour mettre à jour l'année
+	const onUpdateYear = (year: string) => {
+		currentYear.value = year
+		currentYearName.value = year
+		markHolidayDays()
+
+		handleYearUpdate()
+		handleMonthUpdate()
+		nextTick(() => {
+			if (isDatePickerVisible.value) {
+				customizeMonthButton()
+				markHolidayDays()
+			}
+		})
+	}
+
+	// Propriété calculée pour récupérer les jours fériés de l'année courante
+	const holidays = computed(() => {
+		// Utiliser le composable useHolidayDay pour récupérer les jours fériés
+		const { getJoursFeries } = useHolidayDay()
 
-	// Variable pour suivre le mode d'affichage actuel du DatePicker
-	const currentViewMode = ref<ViewMode>(props.isBirthDate ? 'year' : 'month')
+		// Convertir l'année en nombre, utiliser l'année courante comme valeur par défaut
+		const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
 
-	watch(() => props.isBirthDate, (newValue) => {
-		currentViewMode.value = newValue ? 'year' : 'month'
+		// Récupérer les jours fériés au format DD/MM/YYYY
+		const joursFeries = getJoursFeries(year)
+
+		// Tableau pour stocker les jours fériés
+		const holidayDates: Date[] = []
+
+		// Convertir les dates du format string en objets Date
+		joursFeries.forEach((dateStr) => {
+			const [day, month, yearStr] = dateStr.split('/')
+			// Mois -1 car les mois dans Date sont indexés à partir de 0
+			holidayDates.push(new Date(parseInt(yearStr), parseInt(month) - 1, parseInt(day)))
+		})
+
+		// Retourner le tableau des jours fériés
+		return holidayDates
 	})
 
-	// Fonction pour gérer le changement de mode d'affichage
-	const handleViewModeUpdate = (newMode: ViewMode) => {
-		currentViewMode.value = newMode
-	}
+	// Fonction pour marquer les jours fériés dans le calendrier
+	const markHolidayDays = () => {
+		if (!props.displayHolidayDays) return
+		// Attendre que le DOM soit mis à jour
+		nextTick(() => {
+			// Récupérer l'année et le mois courants
+			const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
+			// Utiliser currentMonth.value !== null pour vérifier si la valeur est définie, même si c'est 0
+			const month = parseInt(currentMonth.value !== null ? currentMonth.value : new Date().getMonth().toString(), 10)
+
+			// Récupérer les jours fériés pour ce mois
+			const monthHolidays = holidays.value.filter((holiday) => {
+				// La comparaison doit tenir compte du fait que getMonth() retourne 0-11
+				return holiday.getMonth() === month
+			})
 
-	// Fonction pour gérer la sélection de l'année quand isBirthDate est true
-	const handleYearUpdate = () => {
-		if (props.isBirthDate) {
-			// Après la sélection de l'année, passer automatiquement à la sélection du mois
-			currentViewMode.value = 'months'
-		}
+			// Pour chaque jour férié, trouver l'élément DOM correspondant et ajouter la classe
+			monthHolidays.forEach((holiday) => {
+				const day = holiday.getDate()
+				const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+				const dayElements = document.querySelectorAll(`[data-v-date="${dateStr}"]`)
+				dayElements.forEach((element) => {
+					element.classList.add('holiday-day')
+				})
+			})
+		})
 	}
 
-	// Fonction pour gérer la sélection du mois quand isBirthDate est true
-	const handleMonthUpdate = () => {
-		if (props.isBirthDate) {
-			// Après la sélection du mois, passer automatiquement à la sélection du jour
-			currentViewMode.value = undefined
-		}
-	}
+	// Utilisation du composable pour gérer le mode d'affichage du DatePicker
+	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
+		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
+		() => props.isBirthDate || props.birthDate,
+	)
 
 	const handleInputBlur = () => {
 		emit('blur')
@@ -454,9 +655,13 @@
 	}
 
 	watch(isDatePickerVisible, async (isVisible) => {
+		if (isVisible) {
+			// Marquer les jours fériés lorsque le calendrier devient visible
+			markHolidayDays()
+		}
 		if (!isVisible && props.isBirthDate) {
 			// Réinitialiser le mode d'affichage au type birthdate
-			currentViewMode.value = 'year'
+			resetViewMode()
 		}
 
 		if (isVisible) {
@@ -525,25 +730,44 @@
 		if (isUpdatingFromInternal.value) {
 			if (props.displayRange) {
 				if (Array.isArray(newValue) && newValue.length >= 2) {
-					isDatePickerVisible.value = false
-					emit('closed')
+					// Synchroniser les dates de plage avec le modèle
+					syncFromModelValue(newValue)
 				}
 			}
-			else {
-				isDatePickerVisible.value = false
-				emit('closed')
-			}
 			return
 		}
 
-		try {
-			isUpdatingFromInternal.value = true
-			syncFromModelValue(newValue)
-		}
-		finally {
-			setTimeout(() => {
-				isUpdatingFromInternal.value = false
-			}, 0)
+		// Synchroniser les dates sélectionnées avec le modèle
+		syncFromModelValue(newValue)
+
+		// Mettre à jour textInputValue pour le DateTextInput en mode no-calendar
+		if (props.noCalendar) {
+			try {
+				isUpdatingFromInternal.value = true
+
+				if (!newValue) {
+					textInputValue.value = ''
+				}
+				else if (Array.isArray(newValue) && props.displayRange) {
+					// Pour les plages de dates, on ne modifie pas directement textInputValue
+					// car le DateTextInput gère son propre formatage
+				}
+				else if (typeof newValue === 'string') {
+					// Pour une date unique
+					const date = parseDate(newValue, props.dateFormatReturn || props.format)
+					if (date) {
+						textInputValue.value = formatDate(date, props.format)
+					}
+					else {
+						textInputValue.value = newValue
+					}
+				}
+			}
+			finally {
+				setTimeout(() => {
+					isUpdatingFromInternal.value = false
+				}, 0)
+			}
 		}
 	}, { immediate: true })
 
@@ -553,7 +777,6 @@
 		isDatePickerVisible.value = !isDatePickerVisible.value
 
 		if (isDatePickerVisible.value) {
-			// Mettre à jour l'accessibilité après l'ouverture du DatePicker
 			nextTick(() => {
 				updateAccessibility()
 			})
@@ -566,6 +789,7 @@
 
 	const openDatePickerOnClick = () => {
 		openDatePicker()
+		customizeMonthButton()
 	}
 
 	const openDatePickerOnFocus = () => {
@@ -592,17 +816,47 @@
 <template>
 	<div
 		class="date-picker-container"
-		:style="inputStyle"
 	>
 		<template v-if="props.noCalendar">
 			<DateTextInput
 				ref="dateTextInputRef"
 				v-model="textInputValue"
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
+				:label="labelWithAsterisk || ''"
+				:placeholder="props.placeholder"
+				:format="props.format"
 				:date-format-return="props.dateFormatReturn"
+				:required="props.required"
+				:display-range="props.displayRange"
+				:display-icon="props.displayIcon"
+				:display-append-icon="props.displayAppendIcon"
+				:display-prepend-icon="props.displayPrependIcon"
+				:custom-rules="props.customRules"
+				:custom-warning-rules="props.customWarningRules"
+				:disabled="props.disabled"
+				:no-icon="props.noIcon"
+				:is-outlined="props.isOutlined"
+				:readonly="props.readonly"
+				:width="props.width"
+				:disable-error-handling="props.disableErrorHandling"
+				:show-success-messages="props.showSuccessMessages"
+				:bg-color="props.bgColor"
+				:density="props.density"
+				:hide-details="props.hideDetails"
+				:period="props.period"
+				:auto-clamp="props.autoClamp"
+				:display-asterisk="props.displayAsterisk"
+				@update:model-value="handleDateTextInputUpdate"
+				@date-selected="handleDateTextInputSelection"
+				@blur="handleInputBlur"
+				@focus="emit('focus')"
+			/>
+		</template>
+		<template v-else-if="props.useCombinedMode">
+			<ComplexDatePicker
+				:model-value="props.modelValue"
 				:format="props.format"
-				:label="props.placeholder"
-				:placeholder="props.placeholder"
+				:date-format-return="props.dateFormatReturn"
 				:required="props.required"
 				:custom-rules="props.customRules"
 				:custom-warning-rules="props.customWarningRules"
@@ -616,9 +870,25 @@
 				:disable-error-handling="props.disableErrorHandling"
 				:show-success-messages="props.showSuccessMessages"
 				:bg-color="props.bgColor"
-				title="Date text input"
+				:density="props.density"
+				:hide-details="props.hideDetails"
+				:display-range="props.displayRange"
+				:display-weekend-days="props.displayWeekendDays"
+				:display-today-button="props.displayTodayButton"
+				:display-holiday-days="props.displayHolidayDays"
+				:display-asterisk="props.displayAsterisk"
+				:show-week-number="props.showWeekNumber"
+				:is-birth-date="props.isBirthDate || props.birthDate"
+				:text-field-activator="props.textFieldActivator"
+				:title="'Date text input'"
+				:period="period"
+				:auto-clamp="props.autoClamp"
+				:label="props.label"
+				:placeholder="props.placeholder"
+				@update:model-value="emit('update:modelValue', $event)"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
+				@date-selected="emit('date-selected', $event)"
 			/>
 		</template>
 		<template v-else>
@@ -649,14 +919,20 @@
 						:disabled="props.disabled"
 						:disable-click-button="false"
 						:readonly="true"
-						:label="props.placeholder"
+						:label="labelWithAsterisk || ''"
+						:placeholder="props.placeholder"
+						:display-persistent-placeholder="true"
 						:no-icon="props.noIcon"
 						:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 						:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 						color="primary"
 						:show-success-messages="props.showSuccessMessages"
 						:bg-color="props.bgColor"
+						:density="props.density"
+						:hide-details="props.hideDetails"
+						:display-asterisk="props.displayAsterisk"
 						is-clearable
+						:auto-clamp="props.autoClamp"
 						title="Date Picker"
 						@click="openDatePickerOnClick"
 						@focus="openDatePickerOnFocus"
@@ -676,19 +952,49 @@
 					:show-adjacent-months="true"
 					:show-week="props.showWeekNumber"
 					:view-mode="currentViewMode"
+					:class="displayWeekendDays ? 'weekend' : ''"
+					:max="props.period?.max"
+					:min="props.period?.min"
+					:display-holiday-days="props.displayHolidayDays"
 					@update:view-mode="handleViewModeUpdate"
-					@update:year="handleYearUpdate"
-					@update:month="handleMonthUpdate"
+					@update:month="onUpdateMonth"
+					@update:year="onUpdateYear"
+					@click:date="updateSelectedDates"
 					@update:model-value="updateDisplayFormattedDate"
+					@focus="markHolidayDays"
+					@update:month-year="markHolidayDays"
 				>
 					<template #title>
 						Sélectionnez une date
 					</template>
 					<template #header>
 						<h3 class="mx-auto my-auto ml-5 mb-4">
-							{{ todayInString }}
+							{{ displayedDateString }}
 						</h3>
 					</template>
+					<template
+						v-if="props.displayTodayButton"
+						#actions
+					>
+						<div class="d-flex justify-center align-center w-100">
+							<v-btn
+								v-if="props.displayTodayButton"
+								size="x-small"
+								color="primary"
+								:title="DATE_PICKER_MESSAGES.BUTTON_TODAY"
+								class="my-2 pa-2 mt-2"
+								:ripple="false"
+								@click="handleSelectToday"
+							>
+								<VIcon
+									class="mr-1"
+								>
+									{{ mdiCalendar }}
+								</VIcon>
+								{{ DATE_PICKER_MESSAGES.BUTTON_TODAY }}
+							</v-btn>
+						</div>
+					</template>
 				</VDatePicker>
 			</VMenu>
 		</template>
@@ -698,6 +1004,29 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+/* Style pour les jours fériés */
+:deep(.holiday-day) {
+	background-color: rgb(255 193 7 / 10%);
+	border: 2px dotted tokens.$neutral-black;
+	border-radius: 50%;
+}
+
+/* Disable ripple effect on month and year buttons */
+:deep(.v-date-picker-controls__month-btn),
+:deep(.v-date-picker-controls__mode-btn) {
+	.v-ripple__container,
+	.v-ripple__animation {
+		display: none !important;
+		opacity: 0 !important;
+		background-color: transparent !important;
+		pointer-events: none !important;
+	}
+}
+
+:deep(.v-date-picker-controls .v-btn:last-child) {
+	margin-inline-start: 0;
+}
+
 .label-hidden-on-focus:focus + label {
 	display: none;
 }
@@ -768,7 +1097,7 @@
 }
 
 .date-picker-container {
-	max-width: 100%;
+	width: 100%;
 	position: relative;
 
 	:deep(.v-date-picker) {
@@ -797,4 +1126,21 @@
 .fade-leave-to {
 	opacity: 0;
 }
+
+:deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
+	background-color: #afb1b1;
+}
+
+/* div avant la class .v-date-picker-month__day--week-end */
+:deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
+	background-color: #afb1b1;
+}
+
+:deep(.v-date-picker-controls__mode-btn) {
+	transform: none !important;
+}
+
+:deep(.v-btn--variant-text .v-btn__overlay) {
+	padding: 13px;
+}
 </style>