fix(input-date-picker): ensure initial value is in range (#9894)

**Related Issue:** #9282

## Summary

Ensure the initial value is within the min/max range. This is in line
with the existing behavior, but it is not ideal.

The plan is to stop automatically changing the value to the min/max when
it is out of range, and rely on form constraint validation instead.
However, doing so would be a breaking change, so it's on hold until v3.

## Verification notes

The behavior after this is installed will look the same as the [repro
sample](https://codepen.io/benelan/pen/VwOGwZy). The key is to check the
value of the component in the form submission callback:

```js
form.onsubmit = (event) => {
  console.log(event.target.elements["date-picker"].value);
  ...
}
```

Here is an [updated repro
sample](https://codepen.io/benelan/pen/dyBNVMx?editors=1111).

packages/calcite-components/src/components.d.ts

@@ -4418,7 +4418,7 @@ export namespace Components {
          */
         "detached": boolean;
         /**
-          * When `displayMode` is `float-content`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale": Scale;
@@ -4447,7 +4447,7 @@ export namespace Components {
          */
         "position": Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable": boolean;
         /**
@@ -12538,7 +12538,7 @@ declare namespace LocalJSX {
          */
         "detached"?: boolean;
         /**
-          * When `displayMode` is `float-content`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale"?: Scale;
@@ -12569,7 +12569,7 @@ declare namespace LocalJSX {
          */
         "position"?: Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable"?: boolean;
         /**

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

@@ -777,6 +777,23 @@ describe("calcite-input-date-picker", () => {
     });
   });
 
+  it("ensures initial value is in range", async () => {
+    const page = await newE2EPage();
+    await page.emulateTimezone("America/Los_Angeles");
+    await page.setContent(
+      html`<calcite-input-date-picker
+        value="2017-07-22"
+        min="2018-01-01"
+        max="2018-12-31"
+      ></calcite-input-date-picker>`,
+    );
+
+    const element = await page.find("calcite-input-date-picker");
+
+    expect(await element.getProperty("value")).toEqual("2018-01-01");
+    expect(await getDateInputValue(page)).toEqual("1/1/2018");
+  });
+
   it("updates internally when min attribute is updated after initialization", async () => {
     const page = await newE2EPage();
     await page.emulateTimezone("America/Los_Angeles");

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -469,11 +469,22 @@ export class InputDatePicker
 
     const { open } = this;
     open && this.openHandler();
+
+    if (this.min) {
+      this.minAsDate = dateFromISO(this.min);
+    }
+
+    if (this.max) {
+      this.maxAsDate = dateFromISO(this.max);
+    }
+
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
     } else if (this.value) {
       try {
-        this.valueAsDate = dateFromISO(this.value);
+        const date = dateFromISO(this.value);
+        const dateInRange = dateFromRange(date, this.minAsDate, this.maxAsDate);
+        this.valueAsDate = dateInRange;
       } catch (error) {
         this.warnAboutInvalidValue(this.value);
         this.value = "";
@@ -486,14 +497,6 @@ export class InputDatePicker
       }
     }
 
-    if (this.min) {
-      this.minAsDate = dateFromISO(this.min);
-    }
-
-    if (this.max) {
-      this.maxAsDate = dateFromISO(this.max);
-    }
-
     connectLabel(this);
     connectForm(this);
     connectMessages(this);