@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -12,7 +12,7 @@
 	import {
 		useDateInitialization,
 		type DateInput,
-		type DateValue,
+		type DateModelValue,
 	} from '@/composables/date/useDateInitializationDayjs'
 	import {
 		useAsteriskDisplay,
@@ -130,6 +130,7 @@
 		defineProps<{
 			autoClamp?: boolean
 			bgColor?: string
+			/** @deprecated Utilisez isBirthDate à la place */
 			birthDate?: boolean
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			customRules?: { type: string, options: any }[]
@@ -212,12 +213,12 @@
 	)
 
 	const emit = defineEmits<{
-		(e: 'update:modelValue', value: DateValue): void
+		(e: 'update:modelValue', value: DateModelValue): void
 		(e: 'closed'): void
 		(e: 'focus'): void
 		(e: 'blur'): void
 		(e: 'input', value: string): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	/**
@@ -313,14 +314,14 @@
 		emitFocus: () => emit('focus'),
 	})
 
-	const updateModel = (value: DateValue) => {
+	const updateModel = (value: DateModelValue) => {
 		// Prevent redundant emits
 		if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return
 		withInternalUpdate(() => emit('update:modelValue', value))
 	}
 
 	// Keep and expose this so consumers can listen to `date-selected`
-	const handleDateSelected = (value: DateValue) => {
+	const handleDateSelected = (value: DateModelValue) => {
 		if (props.readonly) return
 
 		// 1) Update v-model
@@ -334,7 +335,12 @@
 			const dateObjects = value
 				.map(dateStr => parseDate(dateStr, returnFormat.value))
 				.filter(Boolean) as Date[]
-			selectedDates.value = dateObjects
+			if (props.displayRange && dateObjects.length >= 2) {
+				selectedDates.value = dateSelectionResult.generateDateRange(dateObjects[0]!, dateObjects[dateObjects.length - 1]!)
+			}
+			else {
+				selectedDates.value = dateObjects
+			}
 		}
 		else {
 			const dateObject = parseDate(value, returnFormat.value)
@@ -390,6 +396,7 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange: dateSelectionResult.generateDateRange,
 	})
 
 	// Display helpers (centralised in useDatePickerState)
@@ -703,7 +710,7 @@
 		validateField: (value, rules, warningRules) =>
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			validateField(value, rules as any[], warningRules as any[]),
-		updateModel: value => updateModel(value as DateValue),
+		updateModel: value => updateModel(value as DateModelValue),
 		emitInput: value => emit('input', value),
 		inputRef: dateCalendarTextInputRef as Ref<ComponentPublicInstance | null>,
 	})
@@ -772,7 +779,7 @@
 					const startDate = parseDate(startDateStr, props.format)
 					const endDate = parseDate(endDateStr, props.format)
 					if (startDate && endDate) {
-						selectedDates.value = [startDate, endDate]
+						selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 						validateDates()
 					}
 				}
@@ -842,7 +849,7 @@
 	/**
 	 * Gère les mises à jour de DateTextInput avec contrôle
 	 */
-	const handleDateTextInputUpdate = (value: DateValue) => {
+	const handleDateTextInputUpdate = (value: DateModelValue) => {
 		// Ne pas traiter les mises à jour internes pour éviter les boucles
 		if (isUpdatingFromInternal.value) return
 
@@ -866,7 +873,7 @@
 				const endDate = endStr ? parseDate(endStr, rf) || parseDate(endStr, props.format) : null
 
 				if (startDate && endDate) {
-					selectedDates.value = [startDate, endDate]
+					selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 					displayFormattedDate.value
 						= `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
 				}
@@ -1222,8 +1229,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .date-picker-title {
 	display: block;
 	text-transform: lowercase;
@@ -1249,7 +1254,7 @@
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
-	border: 2px dotted tokens.$neutral-black;
+	border: 2px dotted rgb(var(--v-theme-grey-darken60));
 	border-radius: 50%;
 }
 
@@ -1268,45 +1273,45 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-success !important;
+		color: rgb(var(--v-theme-textSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 	}
 }
 
 .v-messages__message--error {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 }
 
 :deep(.v-btn__content) {
-	font-size: tokens.$font-size-body-text + 3;
+	font-size: var(--v-fontSize-corpsDeTexte) + 3;
 	font-weight: bold;
 }
 
@@ -1337,7 +1342,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: tokens.$colors-background-main;
+	background-color: rgb(var(--v-theme-backgroundMain));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1345,7 +1350,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-primary-contrasted !important;
+	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {

package/src/components/DatePicker/ComplexDatePicker/tests/ComplexDatePicker.spec.ts

@@ -157,7 +157,30 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.selectedDates).not.toBeNull()
 
 		const input = wrapper.find('input')
-		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - ')
+		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - 10/01/2025')
+	})
+
+	it('generates all intermediate dates when selecting a range in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+		})
+
+		await wrapper.vm.handleDateSelected(['01/01/2025', '05/01/2025'])
+		await flushPromises()
+
+		const selection = wrapper.vm.selectedDates as Date[]
+		expect(Array.isArray(selection)).toBe(true)
+		// Should contain 5 dates: 01/01, 02/01, 03/01, 04/01, 05/01
+		expect(selection).toHaveLength(5)
+
+		// Verify start and end dates are correct (handle timezone differences)
+		expect(selection[0]).toBeInstanceOf(Date)
+		expect(selection[selection.length - 1]).toBeInstanceOf(Date)
+		// Use local date string to avoid timezone issues
+		expect(selection[0]?.toLocaleDateString('fr-FR')).toContain('01/01/2025')
+		expect(selection[selection.length - 1]?.toLocaleDateString('fr-FR')).toContain('05/01/2025')
 	})
 
 	it('formatDateInput formats raw digits according to the format and computes cursor position', () => {

package/src/components/DatePicker/DatePickerValidationExample/DatePickerValidation.stories.ts

@@ -76,7 +76,7 @@ ValidationExamples.parameters = {
 			<script setup>
 import { computed, ref, watch } from 'vue';vue'
 import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
-import { useDateFormat } from '@/composables/date/useDateFormat';vue'
+import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 
 				// Exemple 1: Validation de base (required)
 				const date1 = ref('')

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -16,7 +16,7 @@
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
-	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+	import type { DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 	import type { DateObjectValue } from '../types'
 
 	dayjs.extend(customParseFormat)
@@ -40,7 +40,7 @@
 		isOutlined?: boolean
 		isValidateOnBlur?: boolean
 		label: string
-		modelValue?: DateValue
+		modelValue?: DateModelValue
 		noIcon?: boolean
 		persistentHint?: boolean
 		placeholder?: string
@@ -77,11 +77,11 @@
 	})
 
 	const emit = defineEmits<{
-		(e: 'update:model-value', value: DateValue): void
+		(e: 'update:model-value', value: DateModelValue): void
 		(e: 'focus'): void
 		(e: 'blur'): void
 		(e: 'input', value: string): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	/**
@@ -111,6 +111,7 @@
 		errors: ref<string[]>([]),
 		warnings: ref<string[]>([]),
 		successes: ref<string[]>([]),
+		displaySuccesses: computed(() => []),
 		hasError: ref(false),
 		clearValidation: () => {},
 		validateField: () => ({
@@ -153,7 +154,8 @@
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])
 	const warningMessages = warnings
-	const successMessages = successes
+	const displaySuccesses = computed(() => (validationApi.value as typeof baseValidation).displaySuccesses?.value ?? [])
+	const successMessages = displaySuccesses
 
 	/**
 	 * Safe validate utility
@@ -576,7 +578,7 @@
 		return formatDate(date, returnFormat.value)
 	}
 
-	function emitModel(val: DateValue) {
+	function emitModel(val: DateModelValue) {
 		emit('update:model-value', val)
 	}
 
@@ -688,12 +690,31 @@
 
 			if (formatValidationResult.isValid && !customRulesValidationResult.hasError && !isRange.value) {
 				const parsedDate = dayjs(inputValue.value, displayFormat.value, true).toDate()
+				// Guard isFormatting to prevent the modelValue watcher from
+				// rewriting inputValue in reaction to our own emit.
+				isFormatting.value = true
 				emitModel(returnFormat.value !== displayFormat.value ? dayjs(parsedDate).format(returnFormat.value) : inputValue.value)
 			}
 			else if (formatValidationResult.isValid && !customRulesValidationResult.hasError && isRange.value) {
 				if (typeof inputValue.value === 'string' && inputValue.value.includes(' - ')) {
 					const dateRangeParts = inputValue.value.split(' - ')
-					if (dateRangeParts.length === 2) emitModel([dateRangeParts[0]!, dateRangeParts[1]!])
+					if (dateRangeParts.length === 2) {
+						const sd = dayjs(dateRangeParts[0]!, displayFormat.value, true)
+						const ed = dayjs(dateRangeParts[1]!, displayFormat.value, true)
+						// Guard isFormatting to prevent the modelValue watcher from
+						// rewriting inputValue in reaction to our own emit.
+						isFormatting.value = true
+						if (sd.isValid() && ed.isValid()) {
+							const emittedRange: [string, string] = [
+								returnFormat.value !== displayFormat.value ? sd.format(returnFormat.value) : dateRangeParts[0]!,
+								returnFormat.value !== displayFormat.value ? ed.format(returnFormat.value) : dateRangeParts[1]!,
+							]
+							emitModel(emittedRange)
+						}
+						else {
+							emitModel([dateRangeParts[0]!, dateRangeParts[1]!])
+						}
+					}
 					else emitModel(inputValue.value)
 				}
 				else emitModel(inputValue.value)
@@ -701,29 +722,40 @@
 			else {
 				runRules(inputValue.value)
 				if (!props.disableErrorHandling && formatValidationResult.message) errors.value.push(formatValidationResult.message)
-				// Only emit null for format errors, not for custom rule errors
-				if (!formatValidationResult.isValid) {
-					emitModel(null)
-				}
-				// For custom rule errors with valid format, keep the current value
+				// Keep the invalid input visible so the user can correct it.
+				// Do NOT emit null — that would trigger the modelValue watcher
+				// which clears inputValue and hides the error message.
+				return
 			}
 		}
 
 		// autoClamp au blur
-		if (props.autoClamp) inputValue.value = clampIfNeeded(inputValue.value)
+		if (props.autoClamp) {
+			const clamped = clampIfNeeded(inputValue.value)
+			if (clamped !== inputValue.value) {
+				inputValue.value = clamped
 
-		// Sync model après clamp
-		if (isRange.value) {
-			const [startDate, endDate] = parseRangeInput(inputValue.value)
-			if (startDate && endDate) emitModel([toReturnFormat(startDate), toReturnFormat(endDate)])
-			else if (startDate) emit('date-selected', toReturnFormat(startDate))
-		}
-		else {
-			const parsedDate = parseDate(inputValue.value, displayFormat.value)
-			if (parsedDate) emitModel(returnFormat.value !== displayFormat.value ? toReturnFormat(parsedDate) : formatDate(parsedDate, displayFormat.value))
+				// Sync model après clamp uniquement si la valeur a changé
+				isFormatting.value = true
+				if (isRange.value) {
+					const [startDate, endDate] = parseRangeInput(inputValue.value)
+					if (startDate && endDate) emitModel([toReturnFormat(startDate), toReturnFormat(endDate)])
+					else if (startDate) emit('date-selected', toReturnFormat(startDate))
+				}
+				else {
+					const parsedDate = parseDate(inputValue.value, displayFormat.value)
+					if (parsedDate) emitModel(returnFormat.value !== displayFormat.value ? toReturnFormat(parsedDate) : formatDate(parsedDate, displayFormat.value))
+				}
+			}
 		}
 
 		runRules(inputValue.value)
+
+		// Release isFormatting after the current microtask so that
+		// the modelValue watcher (triggered synchronously by emitModel)
+		// stays blocked, but future external changes are allowed.
+		await nextTick()
+		isFormatting.value = false
 	}
 
 	/**
@@ -1092,7 +1124,9 @@
 		:readonly="props.readonly"
 		:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 		:warning-messages="warningMessages"
-		:success-messages="props.showSuccessMessages ? successMessages : []"
+		:success-messages="successMessages"
+		:has-success="isOnSuccess"
+		:show-success-messages="props.showSuccessMessages"
 		:bg-color="props.bgColor"
 		color="primary"
 		:is-clearable="!props.readonly"
@@ -1110,8 +1144,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 :deep(.v-icon__svg) { cursor: default; }
 
 .warning-field {
@@ -1122,10 +1154,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -1133,7 +1165,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -1141,11 +1173,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
@@ -1157,10 +1189,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -1168,7 +1200,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -196,7 +196,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'isBirthDate': {

package/src/components/DatePicker/composables/tests/useDatePickerState.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+import { useDatePickerState } from '../useDatePickerState'
+
+describe('useDatePickerState', () => {
+	const mockParseDate = vi.fn()
+	const mockFormatDate = vi.fn()
+	const mockInitializeSelectedDates = vi.fn()
+	const mockValidateDates = vi.fn()
+	const mockUpdateModel = vi.fn()
+	const mockGenerateDateRange = vi.fn()
+
+	const format = 'DD/MM/YYYY'
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	describe('syncFromModelValue', () => {
+		it('devrait initialiser selectedDates et générer les dates intermédiaires en mode plage', () => {
+			const selectedDates = ref<Date | (Date | null)[] | null>(null)
+			const startDate = new Date('2023-01-01')
+			const endDate = new Date('2023-01-05')
+			const intermediateDate = new Date('2023-01-03')
+
+			mockInitializeSelectedDates.mockReturnValue([startDate, endDate])
+			mockFormatDate.mockImplementation((date) => {
+				if (date === startDate) return '01/01/2023'
+				if (date === endDate) return '05/01/2023'
+				return ''
+			})
+			mockGenerateDateRange.mockReturnValue([startDate, intermediateDate, endDate])
+
+			const { syncFromModelValue } = useDatePickerState({
+				selectedDates,
+				format,
+				displayRange: true,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				initializeSelectedDates: mockInitializeSelectedDates,
+				validateDates: mockValidateDates,
+				updateModel: mockUpdateModel,
+				generateDateRange: mockGenerateDateRange,
+			})
+
+			syncFromModelValue(['01/01/2023', '05/01/2023'])
+
+			expect(mockInitializeSelectedDates).toHaveBeenCalled()
+			expect(mockGenerateDateRange).toHaveBeenCalledWith(startDate, endDate)
+			expect(selectedDates.value).toEqual([startDate, intermediateDate, endDate])
+		})
+	})
+})

package/src/components/DatePicker/composables/useDatePickerState.ts

@@ -1,5 +1,6 @@
 import { computed, ref, watch, type Ref, type ComputedRef } from 'vue'
-import type { DateInput, DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateInput, DateModelValue } from '@/composables/date/useDateInitializationDayjs'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 export interface UseDatePickerStateOptions {
 	selectedDates: Ref<Date | (Date | null)[] | null>
@@ -11,7 +12,8 @@ export interface UseDatePickerStateOptions {
 	formatDate: (date: Date | null, format: string) => string
 	initializeSelectedDates: (value: DateInput | null, format: string, dateFormatReturn?: string) => Date | (Date | null)[] | null
 	validateDates: (forceValidation?: boolean) => void
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
+	generateDateRange?: (start: Date, end: Date) => Date[]
 }
 
 export interface UseDatePickerStateResult {
@@ -19,7 +21,7 @@ export interface UseDatePickerStateResult {
 	rangeBoundaryDates?: Ref<[Date | null, Date | null] | null>
 	textInputValue: Ref<string>
 	displayFormattedDate: Ref<string>
-	formattedDate: Ref<DateValue>
+	formattedDate: Ref<DateModelValue>
 	displayFormattedFromSelectedDates: ComputedRef<string | null>
 	syncFromModelValue: (newValue: DateInput | undefined) => void
 	syncTextInputFromSelection: () => void
@@ -37,12 +39,13 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		initializeSelectedDates,
 		validateDates,
 		// updateModel,
+		generateDateRange,
 	} = options
 
 	const textInputValue = ref('')
 	const displayFormattedDate = ref('')
 
-	const formattedDate = computed<DateValue>(() => {
+	const formattedDate = computed<DateModelValue>(() => {
 		if (!selectedDates.value) return ''
 		const rf = dateFormatReturn || format
 
@@ -71,7 +74,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 
 		if (Array.isArray(selectedDates.value)) {
 			if (selectedDates.value.length >= 2) {
-				return `${formatDate(selectedDates.value[0]!, format)} - ${formatDate(
+				return `${formatDate(selectedDates.value[0]!, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(
 					selectedDates.value[selectedDates.value.length - 1]!,
 					format,
 				)}`
@@ -89,7 +92,17 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 				textInputValue.value = ''
 				return
 			}
-			if (typeof newValue === 'string') {
+			if (Array.isArray(newValue) && newValue.length === 2) {
+				// Mode plage : afficher "startDate - endDate" dans l'input
+				const startStr = dateFormatReturn
+					? formatDate(parseDate(newValue[0]!, dateFormatReturn), format)
+					: newValue[0]!
+				const endStr = dateFormatReturn
+					? formatDate(parseDate(newValue[1]!, dateFormatReturn), format)
+					: newValue[1]!
+				textInputValue.value = `${startStr}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${endStr}`
+			}
+			else if (typeof newValue === 'string') {
 				if (dateFormatReturn) {
 					const date = parseDate(newValue, dateFormatReturn)
 					if (date) {
@@ -115,17 +128,35 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		}
 
 		selectedDates.value = initializeSelectedDates(newValue ?? null, format, dateFormatReturn)
+
+		if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length === 2) {
+			const startDate = selectedDates.value[0]
+			const endDate = selectedDates.value[1]
+			if (startDate && endDate && generateDateRange) {
+				// Regenerate intermediate dates for Vuetify range selection
+				selectedDates.value = generateDateRange(startDate, endDate)
+			}
+		}
+
 		if (selectedDates.value) {
-			const firstDate = Array.isArray(selectedDates.value)
-				? selectedDates.value[0]
-				: selectedDates.value
-			if (firstDate) {
-				const formattedForInput = formatDate(firstDate, format)
-				textInputValue.value = formattedForInput
+			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
+				const startDate = selectedDates.value[0]
+				const endDate = selectedDates.value[selectedDates.value.length - 1]
+				if (startDate && endDate) {
+					textInputValue.value = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
+				}
+			}
+			else {
+				const firstDate = Array.isArray(selectedDates.value)
+					? selectedDates.value[0]
+					: selectedDates.value
+				if (firstDate) {
+					textInputValue.value = formatDate(firstDate, format)
+				}
 			}
 			if (Array.isArray(formattedDate.value)) {
 				// Pour les plages, formater avec le séparateur standard " - "
-				displayFormattedDate.value = formattedDate.value.join(' - ')
+				displayFormattedDate.value = formattedDate.value.join(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			}
 			else {
 				displayFormattedDate.value = (formattedDate.value as string) || ''
@@ -141,6 +172,18 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 			return
 		}
 
+		if (displayRange && Array.isArray(value) && value.length >= 2) {
+			const startDate = value[0]
+			const endDate = value[value.length - 1]
+			if (startDate && endDate) {
+				const formattedForInput = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
+				if (textInputValue.value !== formattedForInput) {
+					textInputValue.value = formattedForInput
+				}
+				return
+			}
+		}
+
 		const firstDate = Array.isArray(value) ? (value[0] ?? null) : value
 		if (!firstDate) return
 

package/src/components/DatePicker/composables/useDateRangeInput.ts

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { extractRangeParts as extractRangePartsUtil, hasRangeSeparator as hasRangeSeparatorUtil, isValidDateRange } from '../utils/dateFormattingUtils'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 // Initialiser les plugins dayjs
 dayjs.extend(customParseFormat)
@@ -23,7 +24,7 @@ export function useDateRangeInput(
 	// Stockage temporaire pour la deuxième date saisie
 	const secondDate = ref<Date | null>(null)
 	// Séparateur de plage
-	const rangeSeparator = ' - '
+	const rangeSeparator = DATE_PICKER_MESSAGES.RANGE_SEPARATOR
 
 	/**
 	 * Vérifie si une chaîne de caractères contient un séparateur de plage