add error messages to DateTimePicker

revert not relevant changes
vaadin · Sep 27, 2024 · 3585586 · 3585586
1 parent f56e6ef
commit 3585586
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 36 deletions.
diff --git a/frontend/demo/component/datepicker/react/date-picker-validation.tsx b/frontend/demo/component/datepicker/react/date-picker-validation.tsx
@@ -2,7 +2,7 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 import { addDays, formatISO, isAfter, isBefore, parse } from 'date-fns';
 import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
-import { DatePicker, type DatePickerElement } from '@vaadin/react-components';
+import { DatePicker, type DatePickerElement } from '@vaadin/react-components/DatePicker.js';
 
 function Example() {
   useSignals(); // hidden-source-line

diff --git a/frontend/demo/component/datetimepicker/date-time-picker-validation.ts b/frontend/demo/component/datetimepicker/date-time-picker-validation.ts
@@ -3,19 +3,16 @@ import '@vaadin/date-time-picker';
 import { addDays, format, isAfter, isBefore, parseISO } from 'date-fns';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import type { DateTimePickerChangeEvent } from '@vaadin/date-time-picker';
+import type { DatePicker } from '@vaadin/date-picker';
+import type { DateTimePicker, DateTimePickerValidatedEvent } from '@vaadin/date-time-picker';
+import type { TimePicker } from '@vaadin/time-picker';
 import { applyTheme } from 'Frontend/generated/theme';
 
-const dateTimeFormat = `yyyy-MM-dd'T'HH:00:00`;
-
 @customElement('date-time-picker-validation')
 export class Example extends LitElement {
   @state()
   private errorMessage = '';
 
-  @state()
-  private initialValue = addDays(new Date(), 7);
-
   @state()
   private minDate = new Date();
 
@@ -33,15 +30,27 @@ export class Example extends LitElement {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-date-time-picker
+        required
         label="Appointment date and time"
         helper-text="Must be within 60 days from today"
-        .value="${format(this.initialValue, dateTimeFormat)}"
-        .min="${format(this.minDate, dateTimeFormat)}"
-        .max="${format(this.maxDate, dateTimeFormat)}"
+        .min="${format(this.minDate, `yyyy-MM-dd'T'HH:00:00`)}"
+        .max="${format(this.maxDate, `yyyy-MM-dd'T'HH:00:00`)}"
         .errorMessage="${this.errorMessage}"
-        @change="${({ target }: DateTimePickerChangeEvent) => {
-          const date = parseISO(target.value ?? '');
-          if (isBefore(date, this.minDate)) {
+        @validated="${(event: DateTimePickerValidatedEvent) => {
+          const field = event.target as DateTimePicker;
+          const date = parseISO(field.value);
+          const datePicker: DatePicker = field.querySelector('[slot=date-picker]')!;
+          const timePicker: TimePicker = field.querySelector('[slot=time-picker]')!;
+          const hasBadDateInput =
+            !datePicker.value && !!(datePicker.inputElement as HTMLInputElement).value;
+          const hasBadTimeInput =
+            !timePicker.value && !!(timePicker.inputElement as HTMLInputElement).value;
+
+          if (hasBadDateInput || hasBadTimeInput) {
+            this.errorMessage = 'Invalid date and time';
+          } else if (!field.value) {
+            this.errorMessage = 'Field is required';
+          } else if (isBefore(date, this.minDate)) {
             this.errorMessage = 'Too early, choose another date and time';
           } else if (isAfter(date, this.maxDate)) {
             this.errorMessage = 'Too late, choose another date and time';

diff --git a/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx b/frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx
@@ -2,28 +2,42 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 import { addDays, format, isAfter, isBefore, parseISO } from 'date-fns';
 import { useSignal } from '@vaadin/hilla-react-signals';
-import { DateTimePicker } from '@vaadin/react-components/DateTimePicker.js';
+import {
+  type DatePickerElement,
+  DateTimePicker,
+  type DateTimePickerElement,
+  type TimePickerElement,
+} from '@vaadin/react-components';
 
 // tag::snippet[]
 function Example() {
   useSignals(); // hidden-source-line
   const errorMessage = useSignal('');
-  const value = useSignal(addDays(new Date(), 7));
   const minDate = useSignal(new Date());
   const maxDate = useSignal(addDays(new Date(), 60));
 
   return (
     <DateTimePicker
       label="Appointment date and time"
       helperText="Must be within 60 days from today"
-      value={format(value.value, "yyyy-MM-dd'T'HH:00:00")}
-      min={format(minDate.value, "yyyy-MM-dd'T'HH:00:00")}
-      max={format(maxDate.value, "yyyy-MM-dd'T'HH:00:00")}
+      min={format(minDate.value, `yyyy-MM-dd'T'HH:00:00`)}
+      max={format(maxDate.value, `yyyy-MM-dd'T'HH:00:00`)}
       errorMessage={errorMessage.value}
-      onValueChanged={({ detail: { value: newValue } }) => {
-        const date = parseISO(newValue ?? '');
-        value.value = date;
-        if (isBefore(date, minDate.value)) {
+      onValidated={(event) => {
+        const field = event.target as DateTimePickerElement;
+        const date = parseISO(field.value);
+        const datePicker: DatePickerElement = field.querySelector('[slot=date-picker]')!;
+        const timePicker: TimePickerElement = field.querySelector('[slot=time-picker]')!;
+        const hasBadDateInput =
+          !datePicker.value && !!(datePicker.inputElement as HTMLInputElement).value;
+        const hasBadTimeInput =
+          !timePicker.value && !!(timePicker.inputElement as HTMLInputElement).value;
+
+        if (hasBadDateInput || hasBadTimeInput) {
+          errorMessage.value = 'Invalid date and time';
+        } else if (!field.value) {
+          errorMessage.value = 'Field is required';
+        } else if (isBefore(date, minDate.value)) {
           errorMessage.value = 'Too early, choose another date and time';
         } else if (isAfter(date, maxDate.value)) {
           errorMessage.value = 'Too late, choose another date and time';

diff --git a/src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerCustomValidation.java b/src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerCustomValidation.java
@@ -1,6 +1,7 @@
 package com.vaadin.demo.component.datetimepicker;
 
 import com.vaadin.flow.component.datetimepicker.DateTimePicker;
+import com.vaadin.flow.component.datetimepicker.DateTimePicker.DateTimePickerI18n;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.data.binder.Binder;
 import com.vaadin.flow.router.Route;
@@ -21,6 +22,8 @@ public DateTimePickerCustomValidation() {
         dateTimePicker
                 .setHelperText("Open Mondays-Fridays, 8:00-12:00, 13:00-16:00");
         dateTimePicker.setStep(Duration.ofMinutes(30));
+        dateTimePicker.setI18n(new DateTimePickerI18n()
+            .setBadInputErrorMessage("Invalid date or time format"));
         add(dateTimePicker);
 
         String errorMessage = "The selected day of week or time is not available";

diff --git a/src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerValidation.java b/src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerValidation.java
@@ -1,6 +1,7 @@
 package com.vaadin.demo.component.datetimepicker;
 
 import com.vaadin.flow.component.datetimepicker.DateTimePicker;
+import com.vaadin.flow.component.datetimepicker.DateTimePicker.DateTimePickerI18n;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.router.Route;
 
@@ -14,24 +15,18 @@ public class DateTimePickerValidation extends Div {
     public DateTimePickerValidation() {
         // tag::snippet[]
         DateTimePicker dateTimePicker = new DateTimePicker();
+        dateTimePicker.setRequiredIndicatorVisible(true);
         dateTimePicker.setLabel("Appointment date and time");
         dateTimePicker.setHelperText("Must be within 60 days from today");
-        dateTimePicker.setAutoOpen(true);
         dateTimePicker.setMin(LocalDateTime.now());
         dateTimePicker.setMax(LocalDateTime.now().plusDays(60));
-        dateTimePicker.setValue(LocalDateTime.now().plusDays(7));
-        dateTimePicker.addValueChangeListener(event -> {
-            LocalDateTime value = event.getValue();
-            String errorMessage = null;
-            if (value != null) {
-                if (value.compareTo(dateTimePicker.getMin()) < 0) {
-                    errorMessage = "Too early, choose another date and time";
-                } else if (value.compareTo(dateTimePicker.getMax()) > 0) {
-                    errorMessage = "Too late, choose another date and time";
-                }
-            }
-            dateTimePicker.setErrorMessage(errorMessage);
-        });
+
+        dateTimePicker.setI18n(new DateTimePickerI18n()
+            .setRequiredErrorMessage("Field is required")
+            .setBadInputErrorMessage("Invalid date or time format")
+            .setMinErrorMessage("Too early, choose another date and time")
+            .setMaxErrorMessage("Too late, choose another date and time"));
+
         add(dateTimePicker);
         // end::snippet[]
     }