feat(input-date-picker, input-time-picker): support form validation f…

…or min/max constraints (#9677) **Related Issue:** #8065, #9282 ## Summary - Add `min` and `mix` properties to `calcite-input-time-picker` - Add form validation support for `min` and `max` constraints to `calcite-input-time-picker` and `calcite-input-date-picker`
Esri · Jun 25, 2024 · 38fd878 · 38fd878
1 parent 69cd6a5
commit 38fd878
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -2741,6 +2741,11 @@ export namespace Components {
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form": string;
+        /**
+          * Specifies the maximum value.
+          * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
+         */
+        "max": string;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -2749,6 +2754,11 @@ export namespace Components {
           * Made into a prop for testing purposes only
          */
         "messages": InputTimePickerMessages;
+        /**
+          * Specifies the minimum value.
+          * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
+         */
+        "min": string;
         /**
           * Specifies the name of the component on form submission.
          */
@@ -10617,6 +10627,11 @@ declare namespace LocalJSX {
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
         "form"?: string;
+        /**
+          * Specifies the maximum value.
+          * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
+         */
+        "max"?: string;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -10625,6 +10640,11 @@ declare namespace LocalJSX {
           * Made into a prop for testing purposes only
          */
         "messages"?: InputTimePickerMessages;
+        /**
+          * Specifies the minimum value.
+          * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
+         */
+        "min"?: string;
         /**
           * Specifies the name of the component on form submission.
          */

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -760,13 +760,19 @@ describe("calcite-input-date-picker", () => {
 
   describe("is form-associated", () => {
     describe("supports single value", () => {
-      formAssociated("calcite-input-date-picker", { testValue: "1985-03-23", submitsOnEnter: true, validation: true });
+      formAssociated("calcite-input-date-picker", {
+        testValue: "1985-03-23",
+        submitsOnEnter: true,
+        validation: true,
+        inputType: "date",
+      });
     });
 
     describe("supports range", () => {
       formAssociated(`<calcite-input-date-picker range name="calcite-input-date-picker"></calcite-input-date-picker>`, {
         testValue: ["1985-03-23", "1985-10-30"],
         submitsOnEnter: true,
+        inputType: "date",
       });
     });
   });

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -88,6 +88,7 @@ import { guid } from "../../utils/guid";
 import { componentOnReady, getIconScale } from "../../utils/component";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
+import { syncHiddenFormInput } from "../input/common/input";
 import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils";
 import { InputDatePickerMessages } from "./assets/input-date-picker/t9n";
 import { CSS } from "./resources";
@@ -854,6 +855,10 @@ export class InputDatePicker
     this.datePickerEl.reset();
   }
 
+  syncHiddenFormInput(input: HTMLInputElement): void {
+    syncHiddenFormInput("date", this, input);
+  }
+
   setStartInput = (el: HTMLCalciteInputElement): void => {
     this.startInput = el;
   };

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
@@ -600,6 +600,7 @@ describe("calcite-input-time-picker", () => {
       submitsOnEnter: true,
       validation: true,
       validUserInputTestValue: "03:23 AM",
+      inputType: "time",
     });
   });
 

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -80,6 +80,7 @@ import { decimalPlaces } from "../../utils/math";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
 import { focusFirstTabbable } from "../../utils/dom";
+import { syncHiddenFormInput } from "../input/common/input";
 import { CSS } from "./resources";
 import { InputTimePickerMessages } from "./assets/input-time-picker/t9n";
 
@@ -231,6 +232,20 @@ export class InputTimePicker
     }
   }
 
+  /**
+   * Specifies the maximum value.
+   *
+   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
+   */
+  @Prop({ reflect: true }) max: string;
+
+  /**
+   * Specifies the minimum value.
+   *
+   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
+   */
+  @Prop({ reflect: true }) min: string;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -559,6 +574,10 @@ export class InputTimePicker
     this.calciteInputTimePickerClose.emit();
   }
 
+  syncHiddenFormInput(input: HTMLInputElement): void {
+    syncHiddenFormInput("time", this, input);
+  }
+
   private delocalizeTimeString(value: string): string {
     // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
     dayjs.locale(this.effectiveLocale.toLowerCase());

diff --git a/packages/calcite-components/src/components/input/common/input.ts b/packages/calcite-components/src/components/input/common/input.ts
@@ -1,4 +1,9 @@
-export type InputComponent = NumericInputComponent | TextualInputComponent;
+export type InputComponent = NumericInputComponent | TextualInputComponent | DateTimeInputComponent;
+
+export interface DateTimeInputComponent {
+  min: string;
+  max: string;
+}
 
 export interface NumericInputComponent {
   min: number;

diff --git a/packages/calcite-components/src/demos/validation.html b/packages/calcite-components/src/demos/validation.html
@@ -48,6 +48,16 @@
         padding: var(--calcite-spacing-md);
       }
 
+      #when {
+        display: flex;
+      }
+
+      #whenDate,
+      #whenTime {
+        align-self: center;
+        width: 50%;
+      }
+
       /* Progress bar */
       #progress {
         position: fixed;
@@ -147,11 +157,24 @@ <h1 style="margin: 0 auto; text-align: center">Form Validation</h1>
               </calcite-label>
             </li>
 
-            <!-- Date picker -->
+            <!-- Date and time pickers -->
             <li>
               <calcite-label>
                 When did you hear about Calcite components?
-                <calcite-input-date-picker id="when" name="when" required></calcite-input-date-picker>
+                <div id="when">
+                  <calcite-input-date-picker
+                    id="whenDate"
+                    name="whenDate"
+                    max="2024-07-01"
+                    required
+                  ></calcite-input-date-picker>
+                  <calcite-input-time-picker
+                    id="whenTime"
+                    name="whenTime"
+                    max="23:11"
+                    required
+                  ></calcite-input-time-picker>
+                </div>
               </calcite-label>
             </li>
 
@@ -449,7 +472,7 @@ <h1 style="margin: 0 auto; text-align: center">Form Validation</h1>
       });
 
       // Date picker
-      const datePicker = document.getElementById("when");
+      const datePicker = document.getElementById("whenDate");
       datePicker.maxAsDate = new Date();
       datePicker.min = "2021-01-01";