I'm trying to highlight specific dates in ion-datetime. But for some reason, it is not getting reflected in calendar

Question

I have used ion-datetime for my Ionic-react project. I have added all the property that they have asked in documentation. Instead of coloured dates, I'm getting simple calendar.

          <IonDatetime
              color="custom"
              preferWheel="false"
              className="some-class"
              presentation="date-time"
              highlightedDates={[
                {
                  date: "2023-01-05",
                  textColor: "#800080",
                  backgroundColor: "#ffc0cb",
                },
                {
                  date: "2023-01-10",
                  textColor: "#09721b",
                  backgroundColor: "#c8e5d0",
                },
                {
                  date: "2023-03-20",
                  textColor: "var(--ion-color-secondary-contrast)",
                  backgroundColor: "var(--ion-color-secondary)",
                },
                {
                  date: "2023-03-23",
                  textColor: "rgb(68, 10, 184)",
                  backgroundColor: "rgb(211, 200, 229)",
                },
              ]}
              onClick={(e) => filterDate(e.target.value)}
            ></IonDatetime>

I have also tried removing my css making sure that it is not affecting it but got no result. Any help would be appreciated.

do you get any errors in console.log? – Mar 11 '23 at 15:15 — , Mar 11 '23 at 15:15
No @E.Maggini, threre is no any error. – Kushal Rajyaguru Mar 12 '23 at 16:15 — Kushal Rajyaguru, Mar 12 '23 at 16:15
Using in Ionic 6 project. – Kushal Rajyaguru Mar 19 '23 at 13:30 — Kushal Rajyaguru, Mar 19 '23 at 13:30

score 0 · Accepted Answer · answered Apr 04 '23 at 11:50

0

After trying so many ways to resolve this problem, Changing Ionic version from 6.0.0 to 7.0.0 really helped me.

In recent(29/03/2023) release of Ionic 7.0.0 They have resolved this issue.

answered Apr 04 '23 at 11:50

Kushal Rajyaguru

1
2

score 0 · Answer 2 · answered Apr 15 '23 at 09:34

0

I think it's version issue as suggested by @kushal. Changing version to 7.0.0 might help.

answered Apr 15 '23 at 09:34

Jenis Alagiya

1

I'm trying to highlight specific dates in ion-datetime. But for some reason, it is not getting reflected in calendar

2 Answers2