@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/components/DatePicker/DatePicker.vue

@@ -3,11 +3,14 @@
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from './DateTextInput.vue'
 	import { VDatePicker } from 'vuetify/components'
-	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
-	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
+	import { useValidation } from '@/composables/validation/useValidation'
+	import { useDateFormat } from '@/composables/date/useDateFormat'
+	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitialization'
+	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
 
-	type DateValue = string | [string, string] | null
-	type DateInput = string | string[] | null | object
+	const { parseDate, formatDate } = useDateFormat()
+	const { initializeSelectedDates } = useDateInitialization()
+	const { updateAccessibility } = useDatePickerAccessibility()
 
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
@@ -21,14 +24,19 @@
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
 		displayPrependIcon?: boolean
-		customRules?: { type: string, options: RuleOptions }[]
-		customWarningRules?: { type: string, options: RuleOptions }[]
-		isDisabled?: boolean
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		customRules?: { type: string, options: any }[]
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		customWarningRules?: { type: string, options: any }[]
+		disabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
-		isReadOnly?: boolean
+		readOnly?: boolean
 		width?: string
+		disableErrorHandling?: boolean
+		showSuccessMessages?: boolean
+		bgColor?: string
 	}>(), {
 		modelValue: undefined,
 		placeholder: 'Sélectionner une date',
@@ -43,12 +51,15 @@
 		displayPrependIcon: true,
 		customRules: () => [],
 		customWarningRules: () => [],
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		isOutlined: true,
-		isReadOnly: false,
+		readOnly: false,
 		width: '100%',
+		disableErrorHandling: false,
+		showSuccessMessages: true,
+		bgColor: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -58,120 +69,23 @@
 		(e: 'blur'): void
 	}>()
 
-	// Fonction pour parser les dates selon le format spécifié
-	const parseDate = (dateString: string, format: string = props.format): Date | null => {
-		if (!dateString) return null
-
-		// Créer un mapping des positions des éléments de date selon le format
-		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
-		const parts = format.split(separator)
-		const dateParts = dateString.split(separator)
-
-		if (parts.length !== dateParts.length) return null
-
-		let day = 0, month = 0, year = 0
-
-		// Extraire les valeurs selon leur position dans le format
-		parts.forEach((part, index) => {
-			const value = parseInt(dateParts[index], 10)
-			if (isNaN(value)) return
-
-			if (part.includes('DD') || part.includes('D')) day = value
-			else if (part.includes('MM') || part.includes('M')) month = value - 1 // Les mois en JS sont 0-indexés
-			else if (part.includes('YYYY')) year = value
-			else if (part.includes('YY')) {
-				// Gestion intelligente des années à 2 chiffres
-				// Si l'année est < 50, on considère qu'elle est dans le 21ème siècle
-				// Sinon, elle est dans le 20ème siècle
-				year = value < 50 ? 2000 + value : 1900 + value
-			}
-		})
-
-		// Vérifier que nous avons toutes les parties nécessaires et qu'elles sont dans des plages valides
-		if (day < 1 || day > 31 || month < 0 || month > 11 || year < 1000 || year > 9999) return null
-
-		// Créer la date à midi (12:00) pour éviter les problèmes de décalage de fuseau horaire
-		// Cela garantit que la date reste la même lors de la conversion en UTC
-		const date = new Date(year, month, day, 12, 0, 0)
-
-		// Vérifier que la date est valide (par exemple, 31 février n'existe pas)
-		if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null
-
-		return date
-	}
-
-	function initializeSelectedDates(
-		modelValue: DateInput | null,
-	): Date | Date[] | null {
-		if (!modelValue) return null
-
-		// Déterminer le format à utiliser pour l'analyse
-		const parseFormat = props.dateFormatReturn || props.format
-
-		if (Array.isArray(modelValue)) {
-			if (modelValue.length >= 2) {
-				// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-				let dates = [parseDate(modelValue[0], parseFormat), parseDate(modelValue[1], parseFormat)]
-
-				// Si l'une des dates est invalide avec le format de retour, essayer avec le format d'affichage
-				if (dates.some(date => date === null) && props.dateFormatReturn) {
-					dates = [parseDate(modelValue[0], props.format), parseDate(modelValue[1], props.format)]
-				}
-
-				// Vérifie si l'une des dates est toujours invalide
-				if (dates.some(date => date === null)) {
-					return []
-				}
-
-				// Vérifie si la première date est après la seconde
-				if (dates[0] && dates[1] && dates[0] > dates[1]) {
-					return []
-				}
-
-				// Filtrer les dates nulles et convertir en tableau de Date
-				return dates.filter((date): date is Date => date !== null)
-			}
-
-			if (modelValue.length === 1) {
-				// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-				let date = parseDate(modelValue[0], parseFormat)
-
-				// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
-				if (date === null && props.dateFormatReturn) {
-					date = parseDate(modelValue[0], props.format)
-				}
-
-				return date === null ? [] : [date]
-			}
-
-			return []
-		}
-
-		// Si modelValue est un objet, on le convertit en chaîne
-		if (typeof modelValue === 'object') {
-			return null
-		}
-
-		// Essayer d'abord avec le format de retour, puis avec le format d'affichage
-		let date = parseDate(modelValue, parseFormat)
-
-		// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
-		if (date === null && props.dateFormatReturn) {
-			date = parseDate(modelValue, props.format)
-		}
-
-		return date === null ? null : date
-	}
-
-	// Utilisation de la fonction pour initialiser `selectedDates`
 	const selectedDates = ref<Date | Date[] | null>(
-		initializeSelectedDates(props.modelValue as DateInput | null),
+		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
 	)
 
 	const isDatePickerVisible = ref(false)
-	const errorMessages = ref<string[]>([])
-	const successMessages = ref<string[]>([])
-	const warningMessages = ref<string[]>([])
+	const validation = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: 'Date',
+		customRules: props.customRules,
+		warningRules: props.customWarningRules,
+		disableErrorHandling: props.disableErrorHandling,
+	})
+	const { errors, warnings, successes, validateField, clearValidation } = validation
+
+	const errorMessages = errors
+	const warningMessages = warnings
+	const successMessages = successes
 	const displayFormattedDate = ref('')
 
 	const textInputValue = ref<string>('')
@@ -179,31 +93,25 @@
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
 
-	// Déclaration des règles de validation
-	type Rule = { type: string, options: RuleOptions }
-	const customRules = ref<Rule[]>(props.customRules || [])
-	const customWarningRules = ref<Rule[]>(props.customWarningRules || [])
-
-	const { generateRules } = useFieldValidation()
-	const validationRules = generateRules(customRules.value)
-	const warningValidationRules = generateRules(customWarningRules.value)
-
 	// Déclaration de la fonction validateDates avant son utilisation
 	const validateDates = (forceValidation = false) => {
-		// Réinitialiser tous les messages
-		errorMessages.value = []
-		successMessages.value = []
-		warningMessages.value = []
-
 		if (props.noCalendar) {
 			// En mode no-calendar, on délègue la validation au DateTextInput
 			return
 		}
 
+		// Réinitialiser la validation
+		clearValidation()
+
+		// Si la gestion des erreurs est désactivée, on effectue la validation interne
+		// mais on n'ajoute pas les messages d'erreur
+		const shouldDisplayErrors = !props.disableErrorHandling
+
 		// Vérifier si le champ est requis et vide
-		// Si forceValidation est true, on ignore les conditions de validation interactive
 		if ((forceValidation || !isUpdatingFromInternal.value) && props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
-			errorMessages.value.push('La date est requise.')
+			if (shouldDisplayErrors) {
+				errors.value.push('La date est requise.')
+			}
 			return
 		}
 
@@ -214,32 +122,21 @@
 			? selectedDates.value
 			: [selectedDates.value]
 
-		// Collecter tous les messages
-		const allErrors: string[] = []
-		const allWarnings: string[] = []
-		const allSuccess: string[] = []
-
-		// Appliquer les règles de validation
-		datesToValidate.forEach((date) => {
-			// Appliquer d'abord les règles de validation standard
-			validationRules.forEach((rule) => {
-				const result = rule(date)
-				if (result?.error) allErrors.push(result.error)
-				else if (result?.success) allSuccess.push(result.success)
+		// Valider chaque date
+		if (shouldDisplayErrors) {
+			datesToValidate.forEach((date) => {
+				validateField(
+					date,
+					props.customRules,
+					props.customWarningRules,
+				)
 			})
 
-			// Ensuite appliquer les règles d'avertissement
-			warningValidationRules.forEach((rule) => {
-				const result = rule(date)
-				if (result?.warning) allWarnings.push(result.warning)
-				else if (result?.success && !allErrors.length) allSuccess.push(result.success)
-			})
-		})
-
-		// Dédoublonner et assigner les messages
-		errorMessages.value = [...new Set(allErrors)]
-		warningMessages.value = [...new Set(allWarnings)]
-		successMessages.value = [...new Set(allSuccess)]
+			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
+			errors.value = [...new Set(errors.value)]
+			warnings.value = [...new Set(warnings.value)]
+			successes.value = [...new Set(successes.value)]
+		}
 	}
 
 	// Fonction centralisée pour mettre à jour le modèle
@@ -293,18 +190,6 @@
 			// Réinitialiser textInputValue
 			textInputValue.value = ''
 		}
-
-		// Gérer la visibilité du date picker
-		if (props.displayRange) {
-			if (Array.isArray(newValue) && newValue.length >= 2) {
-				isDatePickerVisible.value = false
-				emit('closed')
-			}
-		}
-		else {
-			isDatePickerVisible.value = false
-			emit('closed')
-		}
 	})
 
 	const getMessageClasses = () => ({
@@ -318,32 +203,6 @@
 		'min-width': '100%',
 	}))
 
-	// Formate une date unique au format spécifié
-	const formatDate = (date: Date, format: string): string => {
-		if (!date) return ''
-
-		// Formats de base
-		const day = date.getDate().toString().padStart(2, '0')
-		const month = (date.getMonth() + 1).toString().padStart(2, '0')
-		const year = date.getFullYear().toString()
-		const shortYear = year.slice(-2)
-
-		// Formats sans padding
-		const dayNoPad = date.getDate().toString()
-		const monthNoPad = (date.getMonth() + 1).toString()
-
-		// Remplacer les tokens dans l'ordre correct (du plus spécifique au moins spécifique)
-		let result = format
-			.replace(/YYYY/g, year)
-			.replace(/YY/g, shortYear)
-			.replace(/MM/g, month)
-			.replace(/M/g, monthNoPad)
-			.replace(/DD/g, day)
-			.replace(/D/g, dayNoPad)
-
-		return result
-	}
-
 	// Date(s) formatée(s) en chaîne de caractères pour la valeur de retour
 	const formattedDate = computed<DateValue>(() => {
 		if (!selectedDates.value) return ''
@@ -455,16 +314,6 @@
 		return formatDate(selectedDates.value, props.format)
 	})
 
-	// const validateDateValue = (value: DateValue): DateValue => {
-	// 	if (Array.isArray(value)) {
-	// 		if (value.length >= 2) {
-	// 			return [value[0], value[1]] as [string, string]
-	// 		}
-	// 		return value[0] || ''
-	// 	}
-	// 	return value
-	// }
-
 	watch(displayFormattedDateComputed, (newValue) => {
 		if (!props.noCalendar && newValue) {
 			displayFormattedDate.value = newValue
@@ -474,7 +323,7 @@
 	const updateSelectedDates = (input: DateValue) => {
 		if (Array.isArray(input)) {
 			const dates = input
-				.map(date => (date ? parseDate(date) : null))
+				.map(date => (date ? parseDate(date, props.format) : null))
 				.filter((date): date is Date => date !== null)
 
 			if (dates.length === 0) {
@@ -486,7 +335,7 @@
 			return
 		}
 
-		const date = input ? parseDate(input) : null
+		const date = input ? parseDate(input, props.format) : null
 		selectedDates.value = date === null ? null : date
 	}
 
@@ -512,40 +361,6 @@
 		})).replace(/\b\w/g, l => l.toUpperCase())
 	})
 
-	// Watcher pour le modelValue pour synchroniser les dates sélectionnées
-	watch(() => props.modelValue, (newValue) => {
-		// Éviter les mises à jour récursives
-		if (isUpdatingFromInternal.value) return
-
-		try {
-			isUpdatingFromInternal.value = true
-
-			if (!newValue || newValue === '') {
-				// Réinitialiser les valeurs
-				selectedDates.value = null
-				textInputValue.value = ''
-				displayFormattedDate.value = ''
-			}
-			else {
-				// Initialiser les dates sélectionnées
-				selectedDates.value = initializeSelectedDates(newValue)
-
-				// Mettre à jour l'affichage
-				if (selectedDates.value) {
-					displayFormattedDate.value = displayFormattedDateComputed.value || ''
-				}
-			}
-
-			// Valider les dates
-			validateDates()
-		}
-		finally {
-			setTimeout(() => {
-				isUpdatingFromInternal.value = false
-			}, 0)
-		}
-	}, { immediate: true })
-
 	onMounted(() => {
 		document.addEventListener('click', handleClickOutside)
 
@@ -570,96 +385,60 @@
 		}
 		// Forcer la validation pour ignorer les conditions de validation interactive
 		validateDates(true)
-		return errorMessages.value.length === 0
+		// Retourner directement un booléen pour maintenir la compatibilité avec les tests existants
+		return errors.value.length === 0
 	}
 
-	defineExpose({
-		validateOnSubmit,
-		isDatePickerVisible,
-		selectedDates,
-		errorMessages,
-		handleClickOutside,
-		initializeSelectedDates,
-	})
-
-	// Fonction pour améliorer l'accessibilité du DatePicker
-	const updateAccessibility = async () => {
-		await nextTick()
+	const showDatePicker = () => {
+		if (props.disabled || props.readOnly) return
 
-		// Utiliser des attributs data pour sélectionner les éléments, ce qui est plus stable que les classes CSS
-		const datePickerEl = document.querySelector('.v-date-picker')
-		if (!datePickerEl) return
-
-		// Ajouter un attribut role="application" au conteneur principal
-		datePickerEl.setAttribute('role', 'application')
-		datePickerEl.setAttribute('aria-label', 'Sélecteur de date')
+		isDatePickerVisible.value = true
 
-		// Sélectionner tous les boutons de navigation
-		const navigationButtons = datePickerEl.querySelectorAll('button')
+		// Mettre à jour l'accessibilité après l'ouverture du DatePicker
+		nextTick(() => {
+			updateAccessibility()
+		})
+	}
 
-		// Attribuer des labels significatifs basés sur la position ou l'icône
-		navigationButtons.forEach((button) => {
-			const iconEl = button.querySelector('.v-icon')
-			if (!iconEl) return
+	const openDatePicker = () => {
+		showDatePicker()
+	}
 
-			// Utiliser le contenu de l'icône pour déterminer sa fonction
-			const iconContent = iconEl.textContent || ''
-			const iconClasses = iconEl.className || ''
+	type ViewMode = 'month' | 'year' | 'months' | undefined
 
-			if (iconClasses.includes('mdi-chevron-left') || iconContent.includes('chevron-left')) {
-				button.setAttribute('aria-label', 'Mois précédent')
-			}
-			else if (iconClasses.includes('mdi-chevron-right') || iconContent.includes('chevron-right')) {
-				button.setAttribute('aria-label', 'Mois suivant')
-			}
-			else if (iconClasses.includes('mdi-chevron-down') || iconContent.includes('chevron-down')
-				|| iconClasses.includes('mdi-menu-down') || iconContent.includes('menu-down')) {
-				button.setAttribute('aria-label', 'Changer de vue')
-			}
-		})
+	// Variable pour suivre le mode d'affichage actuel du DatePicker
+	const currentViewMode = ref<ViewMode>(props.isBirthDate ? 'year' : 'month')
 
-		// Ajouter des instructions pour les lecteurs d'écran
-		let srOnlyEl = datePickerEl.querySelector('.sr-only-instructions')
-		if (!srOnlyEl) {
-			srOnlyEl = document.createElement('span')
-			srOnlyEl.className = 'sr-only-instructions'
-			srOnlyEl.setAttribute('aria-live', 'polite')
-			// Utiliser HTMLElement pour accéder aux propriétés de style
-			const srOnlyHtmlEl = srOnlyEl as HTMLElement
-			srOnlyHtmlEl.style.position = 'absolute'
-			srOnlyHtmlEl.style.width = '1px'
-			srOnlyHtmlEl.style.height = '1px'
-			srOnlyHtmlEl.style.padding = '0'
-			srOnlyHtmlEl.style.margin = '-1px'
-			srOnlyHtmlEl.style.overflow = 'hidden'
-			srOnlyHtmlEl.style.clip = 'rect(0, 0, 0, 0)'
-			srOnlyHtmlEl.style.whiteSpace = 'nowrap'
-			srOnlyHtmlEl.style.border = '0'
-			srOnlyEl.textContent = 'Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date'
-
-			datePickerEl.prepend(srOnlyEl)
-		}
+	// Fonction pour gérer le changement de mode d'affichage
+	const handleViewModeUpdate = (newMode: ViewMode) => {
+		currentViewMode.value = newMode
 	}
 
-	// Appliquer les améliorations d'accessibilité quand le DatePicker devient visible
-	watch(isDatePickerVisible, async (newValue) => {
-		if (newValue) {
-			await updateAccessibility()
+	// 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'
 		}
-	})
-
-	const handlePrependIconClick = () => {
-		isDatePickerVisible.value = true
 	}
 
-	const handleAppendIconClick = () => {
-		isDatePickerVisible.value = true
+	// 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
+		}
 	}
 
-	// Fonctions et constantes déjà déclarées plus haut dans le code
+	watch(isDatePickerVisible, (isVisible) => {
+		if (!isVisible && props.isBirthDate) {
+			// Réinitialiser le mode d'affichage au type birthdate
+			currentViewMode.value = 'year'
+		}
+	})
 
 	const getIcon = () => {
-		if (props.noCalendar) {
+		if (props.noCalendar || props.disableErrorHandling) {
 			return
 		}
 		switch (true) {
@@ -674,40 +453,47 @@
 		}
 	}
 
-	// Watch sur modelValue pour gérer les changements externes
-	watch(() => props.modelValue, (newValue) => {
-		// Éviter les mises à jour récursives
-		if (isUpdatingFromInternal.value) return
+	const syncFromModelValue = (newValue: DateInput | undefined) => {
+		if (!newValue || newValue === '') {
+			selectedDates.value = null
+			textInputValue.value = ''
+			displayFormattedDate.value = ''
+			validateDates()
+			return
+		}
 
-		try {
-			isUpdatingFromInternal.value = true
+		selectedDates.value = initializeSelectedDates(newValue, props.format, props.dateFormatReturn)
 
-			if (!newValue || newValue === '') {
-				selectedDates.value = null
-				textInputValue.value = ''
-				displayFormattedDate.value = ''
+		if (selectedDates.value) {
+			const firstDate = Array.isArray(selectedDates.value)
+				? selectedDates.value[0]
+				: selectedDates.value
+
+			textInputValue.value = formatDate(firstDate, props.format)
+			displayFormattedDate.value = displayFormattedDateComputed.value || ''
+		}
+
+		validateDates()
+	}
+
+	watch(() => props.modelValue, (newValue) => {
+		if (isUpdatingFromInternal.value) {
+			if (props.displayRange) {
+				if (Array.isArray(newValue) && newValue.length >= 2) {
+					isDatePickerVisible.value = false
+					emit('closed')
+				}
 			}
 			else {
-				// Initialiser les dates sélectionnées
-				selectedDates.value = initializeSelectedDates(newValue)
-
-				// Mettre à jour l'affichage et le textInputValue
-				if (selectedDates.value) {
-					if (Array.isArray(selectedDates.value)) {
-						if (selectedDates.value.length > 0) {
-							textInputValue.value = formatDate(selectedDates.value[0], props.format)
-							displayFormattedDate.value = displayFormattedDateComputed.value || ''
-						}
-					}
-					else {
-						textInputValue.value = formatDate(selectedDates.value, props.format)
-						displayFormattedDate.value = displayFormattedDateComputed.value || ''
-					}
-				}
+				isDatePickerVisible.value = false
+				emit('closed')
 			}
+			return
+		}
 
-			// Valider les dates
-			validateDates()
+		try {
+			isUpdatingFromInternal.value = true
+			syncFromModelValue(newValue)
 		}
 		finally {
 			setTimeout(() => {
@@ -715,6 +501,17 @@
 			}, 0)
 		}
 	}, { immediate: true })
+
+	defineExpose({
+		validateOnSubmit,
+		isDatePickerVisible,
+		selectedDates,
+		errorMessages,
+		handleClickOutside,
+		initializeSelectedDates,
+		updateAccessibility,
+		openDatePicker,
+	})
 </script>
 
 <template>
@@ -734,13 +531,16 @@
 				:required="props.required"
 				:custom-rules="props.customRules"
 				:custom-warning-rules="props.customWarningRules"
-				:is-disabled="props.isDisabled"
-				:is-read-only="props.isReadOnly"
+				:disabled="props.disabled"
+				:read-only="props.readOnly"
 				:is-outlined="props.isOutlined"
 				:display-icon="props.displayIcon"
 				:display-append-icon="props.displayAppendIcon"
 				:display-prepend-icon="props.displayPrependIcon"
 				:no-icon="props.noIcon"
+				:disable-error-handling="props.disableErrorHandling"
+				:show-success-messages="props.showSuccessMessages"
+				:bg-color="props.bgColor"
 				title="Date text input"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
@@ -754,20 +554,22 @@
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
 				:error-messages="errorMessages"
 				:warning-messages="warningMessages"
-				:success-messages="successMessages"
-				:is-disabled="props.isDisabled"
-				:is-read-only="true"
+				:success-messages="props.showSuccessMessages ? successMessages : []"
+				:disabled="props.disabled"
+				:read-only="true"
 				:label="props.placeholder"
 				: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"
 				is-clearable
 				title="Date Picker"
-				@focus="isDatePickerVisible = true"
+				@focus="openDatePicker"
 				@update:model-value="updateSelectedDates"
-				@prepend-icon-click="handlePrependIconClick"
-				@append-icon-click="handleAppendIconClick"
+				@prepend-icon-click="openDatePicker"
+				@append-icon-click="openDatePicker"
 			/>
 		</template>
 		<div>
@@ -779,6 +581,7 @@
 				location="bottom"
 				:close-on-content-click="false"
 				:open-on-click="false"
+				scroll-strategy="none"
 				transition="fade-transition"
 				attach="body"
 				:offset="[-20, 5]"
@@ -787,12 +590,15 @@
 					<VDatePicker
 						v-if="isDatePickerVisible && !props.noCalendar"
 						v-model="selectedDates"
+						color="primary"
 						:first-day-of-week="1"
 						:multiple="props.displayRange ? 'range' : false"
 						:show-adjacent-months="true"
 						:show-week="props.showWeekNumber"
-						:view-mode="props.isBirthDate ? 'year' : 'month'"
-						color="primary"
+						:view-mode="currentViewMode"
+						@update:view-mode="handleViewModeUpdate"
+						@update:year="handleYearUpdate"
+						@update:month="handleMonthUpdate"
 					>
 						<template #title>
 							Sélectionnez une date