🐛 vue-dot: Fix Invalid Date error in DatePicker (#1917)

CHANGELOG.md

@@ -12,6 +12,7 @@
   - **HeaderBar:** Correction de l'affichage des menus dans le composant ([#1896](https://github.com/assurance-maladie-digital/design-system/pull/1896)) ([19938e2](https://github.com/assurance-maladie-digital/design-system/commit/19938e2ea04e055533117673d4344cfacf0bca4c))
   - **SubHeader:** Correction de l'espacement interne du bouton *Retour* ([#1900](https://github.com/assurance-maladie-digital/design-system/pull/1900)) ([a996103](https://github.com/assurance-maladie-digital/design-system/commit/a99610324223a81399dfb7b41cfe81599391e1ca))
   - **UserMenuBtn:** Correction de l'espacement interne ([#1904](https://github.com/assurance-maladie-digital/design-system/pull/1904)) ([ac45f14](https://github.com/assurance-maladie-digital/design-system/commit/ac45f14002b8e2fb2ddcf0721cee6fb6740b0e36))
+  - **DatePicker:** Correction de l'affichage de `Invalid Date` dans le champ texte ([#1917](https://github.com/assurance-maladie-digital/design-system/pull/1917))
 
 - ♻️ **Refactoring**
   - **HeaderBar:** Modification de la valeur de la propriété `z-index` ([#1902](https://github.com/assurance-maladie-digital/design-system/pull/1902)) ([bc652ac](https://github.com/assurance-maladie-digital/design-system/commit/bc652aca7653046465994f5c8290a71090f7fdb2))
@@ -65,7 +66,7 @@
   - **vue-input-facade:** Mise à jour vers la `v2.0.1` ([#1888](https://github.com/assurance-maladie-digital/design-system/pull/1888)) ([0b460c8](https://github.com/assurance-maladie-digital/design-system/commit/0b460c87a29fed9f48df5c656e2b25d73f3ad941))
   - **@babel/core:** Mise à jour vers la `v7.17.9` ([#1893](https://github.com/assurance-maladie-digital/design-system/pull/1893)) ([68931d2](https://github.com/assurance-maladie-digital/design-system/commit/68931d29acc5a57a2b3136cc657b1f25b42facab))
   - **eslint-plugin-jsdoc:** Mise à jour vers la `v39` ([#1901](https://github.com/assurance-maladie-digital/design-system/pull/1901)) ([f69cc95](https://github.com/assurance-maladie-digital/design-system/commit/f69cc95152fc8d494fefa4cecbaeb9bca3401ff7))
-  - **@rushstack/eslint-patch:** Mise à jour vers la `v1.1.2` ([#1916](https://github.com/assurance-maladie-digital/design-system/pull/1916))
+  - **@rushstack/eslint-patch:** Mise à jour vers la `v1.1.2` ([#1916](https://github.com/assurance-maladie-digital/design-system/pull/1916)) ([b903cb4](https://github.com/assurance-maladie-digital/design-system/commit/b903cb42232cd7d36cc69bddc5079ffa4919218e))
 
 ## v2.3.0
 

packages/vue-dot/src/patterns/DatePicker/DatePicker.vue

@@ -13,12 +13,14 @@
 				:outlined="outlined"
 				:class="textFieldClasses"
 				:success-messages="textFieldOptions.successMessages || successMessages"
+				:error-messages="textFieldOptions.errorMessages || errorMessages"
 				:error.sync="internalErrorProp"
 				class="vd-date-picker-text-field"
 				@blur="textFieldBlur"
 				@click.native="textFieldClicked"
 				@paste.prevent="saveFromPasted"
 				@keydown.enter.prevent="saveFromTextField"
+				@input="errorMessages = null"
 				@change="dateFormatted = $event"
 				v-on="$listeners"
 			>

packages/vue-dot/src/patterns/DatePicker/mixins/dateLogic.ts

@@ -2,13 +2,17 @@ import Vue from 'vue';
 import Component, { mixins } from 'vue-class-component';
 
 import { parseDate } from '../../../helpers/parseDate';
-import { DATE_FORMAT_REGEX } from '../../../functions/validation/isDateValid';
 
 import { Options } from '../../../mixins/customizable';
 
 import { Refs } from '../../../types';
 
 export const INTERNAL_FORMAT = 'YYYY-MM-DD';
+export const INTERNAL_FORMAT_REGEX = /\d{4}[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])/;
+
+const locales = {
+	invalidDate: 'La date saisie n’est pas valide.'
+};
 
 const Props = Vue.extend({
 	props: {
@@ -82,11 +86,13 @@ export class DateLogic extends MixinsDeclaration {
 	validate!: (value: string) => void;
 
 	/** YYYY-MM-DD format */
-	date = this.value ? this.parseDateForModel(this.value) : '';
+	date = '';
 
 	/** DDMMYYYY format */
 	textFieldDate = '';
 
+	errorMessages: string[] | null = null;
+
 	mounted() {
 		// Watch VTextField 'hasError' computed value
 		// because 'update:error' event isn't reliable
@@ -108,24 +114,26 @@ export class DateLogic extends MixinsDeclaration {
 	}
 
 	/** Parse a date with dateFormatReturn format to internal format */
-	parseDateForModel(date: string): string {
+	parseDateForModel(date: string): string | null {
 		const parsed = parseDate(date, this.dateFormatReturn);
 
 		if (!parsed.isValid()) {
-			return '';
+			return null;
 		}
 
 		return parsed.format(INTERNAL_FORMAT);
 	}
 
-	parseTextFieldDate(date: string): string {
-		const formatted = parseDate(date, this.dateFormat);
+	parseTextFieldDate(date: string): string | null {
+		const parsed = parseDate(date, this.dateFormat);
+		const formatted = parsed.format(INTERNAL_FORMAT);
 
-		if (!date.match(DATE_FORMAT_REGEX) || !formatted.isValid()) {
-			return '';
+		if (!parsed.isValid() || !formatted.match(INTERNAL_FORMAT_REGEX)) {
+			this.errorMessages = [locales.invalidDate];
+			return null;
 		}
 
-		return formatted.format(INTERNAL_FORMAT);
+		return formatted;
 	}
 
 	setTextFieldModel(): void {

packages/vue-dot/src/patterns/DatePicker/mixins/tests/dateLogic.spec.ts

@@ -27,6 +27,7 @@ interface TestComponent extends Vue {
 	value: string;
 	date: string;
 	textFieldDate: string;
+	errorMessages: string[];
 	saveFromTextField: () => void;
 	saveFromCalendar: () => void;
 	saveFromPasted: (event: ClipboardEvent) => void;
@@ -160,12 +161,13 @@ describe('DateLogic', () => {
 		expect(parsed).toBe('2019-10-29');
 	});
 
-	it('returns an empty string when parseTextFieldDate is called with an invalid date', () => {
+	it('returns null and sets error messages when parseTextFieldDate is called with an invalid date', () => {
 		const wrapper = createWrapper();
 
 		const parsed = wrapper.vm.parseTextFieldDate('2019/10/29');
 
-		expect(parsed).toBe('');
+		expect(parsed).toBeNull();
+		expect(wrapper.vm.errorMessages.length).toBe(1);
 	});
 
 	// saveFromCalendar