docs: add incomplete input to date time picker docs

articles/components/_input-field-common-features.adoc

@@ -167,6 +167,14 @@ An instruction text at the top of the form explaining the required indicator is
 ====
 // end::required[]
 
+// tag::incomplete-input[]
+[#incomplete-input]
+.Incomplete Input
+[%collapsible]
+====
+Incomplete input refers to when an input has a valid value while the other is empty. When an incomplete value is entered, the field resets the value to empty and becomes invalid. This constraint is non-configurable and enabled by default.
+====
+// end::incomplete-input[]
 
 // tag::min-and-max-length[]
 [#min-and-max-length]

articles/components/date-time-picker/index.adoc

@@ -159,7 +159,7 @@ Date Time Picker provides a validation mechanism based on constraints. Constrain
 
 Below is a list of supported constraints with more detailed information:
 
-include::{articles}/components/_input-field-common-features.adoc[tags=bad-input;required]
+include::{articles}/components/_input-field-common-features.adoc[tags=bad-input;incomplete-input;required]
 
 [#min-and-max-value]
 .Min & Max Values

frontend/demo/component/datetimepicker/date-time-picker-validation.ts

@@ -44,9 +44,13 @@ export class Example extends LitElement {
             !datePicker.value && !!(datePicker.inputElement as HTMLInputElement).value;
           const hasBadTimeInput =
             !timePicker.value && !!(timePicker.inputElement as HTMLInputElement).value;
+          const hasIncompleteInput =
+            (datePicker.value && !timePicker.value) || (timePicker.value && !datePicker.value);
 
           if (hasBadDateInput || hasBadTimeInput) {
             this.errorMessage = 'Invalid date or time';
+          } else if (hasIncompleteInput) {
+            this.errorMessage = 'Missing date or time';
           } else if (!field.value) {
             this.errorMessage = 'Field is required';
           } else if (field.value < field.min!) {

frontend/demo/component/datetimepicker/react/date-time-picker-validation.tsx

@@ -32,9 +32,13 @@ function Example() {
           !datePicker.value && !!(datePicker.inputElement as HTMLInputElement).value;
         const hasBadTimeInput =
           !timePicker.value && !!(timePicker.inputElement as HTMLInputElement).value;
+        const hasIncompleteInput =
+          (datePicker.value && !timePicker.value) || (timePicker.value && !datePicker.value);
 
         if (hasBadDateInput || hasBadTimeInput) {
           errorMessage.value = 'Invalid date or time';
+        } else if (hasIncompleteInput) {
+          errorMessage.value = 'Missing date or time';
         } else if (!field.value) {
           errorMessage.value = 'Field is required';
         } else if (field.value < field.min!) {

src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerCustomValidation.java

@@ -23,7 +23,8 @@ public DateTimePickerCustomValidation() {
                 .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"));
+                .setBadInputErrorMessage("Invalid date or time format")
+                .setIncompleteInputErrorMessage("Missing date or time"));
         add(dateTimePicker);
 
         String errorMessage = "The selected day of week or time is not available";

src/main/java/com/vaadin/demo/component/datetimepicker/DateTimePickerValidation.java

@@ -24,6 +24,7 @@ public DateTimePickerValidation() {
         dateTimePicker.setI18n(new DateTimePickerI18n()
                 .setRequiredErrorMessage("Field is required")
                 .setBadInputErrorMessage("Invalid date or time format")
+                .setIncompleteInputErrorMessage("Missing date or time")
                 .setMinErrorMessage("Too early, choose another date and time")
                 .setMaxErrorMessage("Too late, choose another date and time"));