diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index ac63d263b95..907ec731ca0 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4518,7 +4518,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;
@@ -4547,7 +4547,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;
         /**
@@ -12638,7 +12638,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;
@@ -12669,7 +12669,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;
         /**
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
index 5e9a4d733a0..f0f5b005765 100644
--- 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
@@ -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");
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
index f45fc2e3c82..3be23598643 100644
--- 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
@@ -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);