Ion input type date weird behavior in ios

[ptr-ee]

want to know what causing this and how to fix it

<IonRow>
              <IonCol
                className="dateInput-cont"
                size="6"
                style={{ padding: " 0 4px 0 0 " }}
              >
                <IonLabel className="label">Start Date</IonLabel>
                <div className="">
                  <IonItem className="input-cont" lines="none" color={"light"}>
                    <IonInput
                      mode="md"
                      type="date"
                      onIonChange={(e) => setStartDate(e.detail.value!)}
                    />
                  </IonItem>
                </div>
              </IonCol>
              <IonCol
                className="dateInput-cont"
                size="6"
                style={{ padding: "0 0 0 4px" }}
              >
                <IonLabel className="label">End Date</IonLabel>
                <div className="">
                  <IonItem className="input-cont" lines="none" color={"light"}>
                    <IonInput
                      mode="md"
                      type="date"
                      onIonChange={(e) => setEndDate(e.detail.value!)}
                    />
                  </IonItem>
                </div>
              </IonCol>
            </IonRow>

ionic/react": “^7.0.5”,
capacitor/core": “^5.0.0”,

[twestrick]

What’s the “weird behavior”, you didn’t specify or point it out in your screenshot. Assuming it’s the date being at the top of the input box but you should be clear of what exactly is going on and what you are expecting.

A replication of it on StackBlitz would be a good too or a minimal repo where someone can run it and help you.

[ptr-ee]

You are correct, I apologize for not specifying the exact behavior in my previous message. The “weird behavior” I mentioned refers to the date being displayed at the top of the input box instead of inside it, as expected.

This behavior only occurs when the app is installed on an iOS device, and specifically when the ion-input is of type date. I’ve tested it extensively, and this issue seems to be isolated to this particular scenario.

[twestrick]

I would first update to Ionic 7.7.4 (the current version) to make sure you have the latest fixes. It would be a minor update so no breaking changes for you.

Then I would provide a full working repo so others can see if it can be replicated. It’s very possible it’s a bug and needs to be submitted as an issue (assuming you’ve looked through existing issues already).

[Hills90210]

How do I ask a good question? - Help Center

[ptr-ee]

thank you this fixed my problem