add error messages to DateTimePicker

vaadin · Sep 26, 2024 · 6e53eb6 · 6e53eb6
1 parent 8ddeaa9
commit 6e53eb6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/frontend/demo/component/datetimepicker/date-time-picker-validation.ts b/frontend/demo/component/datetimepicker/date-time-picker-validation.ts
@@ -39,7 +39,7 @@ export class Example extends LitElement {
         .min="${format(this.minDate, dateTimeFormat)}"
         .max="${format(this.maxDate, dateTimeFormat)}"
         .errorMessage="${this.errorMessage}"
-        @change="${({ target }: DateTimePickerChangeEvent) => {
+        @validated="${({ target }: DateTimePickerChangeEvent) => {
           const date = parseISO(target.value ?? '');
           if (isBefore(date, this.minDate)) {
             this.errorMessage = 'Too early, 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,19 @@ 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[]
     }