A genuine question on when will you guys face the ion-datetime horrible state

[forevermasteryi]

Its been 2021 since user of ionic raise up the ion-datetime component problem, the lack of support on such important component shocked me. In here, I would like to raise out the problem, AGAIN, just in case you guys still give a care about user on your framework.

-year/month wheel value emitting

I still don’t know why ionic developer have a tendency to FORCE the component emiting value each time user spinning the year/month wheel. The sole purpose of putting the wheel here is to allow user to SELECT year/month more easily not to CHANGING the whole date. Why would you force a valueChange on such action, can you atleast pays little effort and making it not emitting value each time user spinning the wheel but rather only emitting it when closing the wheel and only changing the year/month, not the day, not the time, not minute, not the second, its a year/month wheel, not a whole datetime wheel for god sake?

Because right now, CHANGING YEAR/MONTH WILL RUINED THE DAY VALUE AND WHY YOU FORCING USER TO HAVE IT ???

-no way of setting calender value programatically

Really, you are making a framework, and user can’t set your component value programatically, really, wow, unbelievable. Come on. Right now you are forced to bind the value to angular variable or else, good luck , what that mean? complicated spegahtti if statement thats what you get Im tellling you if you ACTUALLY USE YOUR FRAMEWORK TO DEVELOP SOMETHING

I don’t even know how would you guys one day making this framework profitable, if its made with so called “love”, please stop, I am already knee deep with a project using this framework, don’t ask me to change a framework.

[aaronksaunders]

somebody sounds like they are having a bad day… is there an actual question here somewhere are did you just need to get that off your chest?

[forevermasteryi]

Yes, when will ionic developer seperate the value emits from year/month wheel and day input .

Because right now , the component is barely usable that user input in year/month will instantly emit and ruined the accuracy of the input.

[forevermasteryi]

Also, I still can’t mimick user input programmatically .

Like literally, 0 chance.

[mirko77]

That is a lost cause.

For dates and time inputs, we use standard HTML directly and never used the Ionic components as we always had issues, since Ionic 1.

For some specific cases, we use the Cordova plugin cordova-wheel-selector-plugin
to show a hh:mm:ss or DD/MM/YYYY wheel.

[ldebeasi]

Hey there! I’m the lead engineer on Ionic Framework and have worked pretty extensively on ion-datetime, so I’ll do my best to address your concerns.

I can confirm that the the value changing when the month/year picker changes is an intentional behavior. Ionic Framework is designed to follow what the native iOS and Material Design components do. The native iOS date picker also changes the value when the month/year picker changes which is why we opted to follow that behavior.

I attached a sample of this same behavior happening with the native iOS date picker:

We do also give the option to customize this behavior using the showDefaultButtons property. This property allows you to require explicit user confirmation before the ion-datetime value changes. I think this is probably what you want as it prevents ionChange from being emitted every time the month/year changes. Instead, ionChange only emits once users press the “Confirm” button.

[ldebeasi]

@forevermasteryi

-no way of setting calender value programatically

You can absolutely set the value of ion-datetime programmatically. There are two things to note about this:

1. Asynchronously setting the value of ion-datetime does not re-render the UI. This is being tracked in bug: Setting ion-datetime value programatically does not update the grid · Issue #26391 · ionic-team/ionic-framework · GitHub, and it is something we are actively working on correcting. In fact, we have a PR to fix this that is currently being reviewed by the team: fix(datetime): scroll to newly selected date when value changes by amandaejohnston · Pull Request #27806 · ionic-team/ionic-framework · GitHub

2. Programmatically setting the value of ion-datetime does not emit ionChange. ionChange only emits as a result of user interaction, so emitting ionChange for programmatic changes isn’t really helpful since you already know when the value has changed. This behavior also aligns with how the web’s <input type="date" /> element works.

[forevermasteryi]

Very well reply. Im very happy to see that even the lead developer have to work pretty extensively on ion-datetime.

@ldebeasi

Asynchronously setting the value of ion-datetime does not re-render the UI. This is being tracked in bug: Setting ion-datetime value programatically does not update the grid · Issue #26391 · ionic-team/ionic-framework · GitHub, and it is something we are actively working on correcting. In fact, we have a PR to fix this that is currently being reviewed by the team: fix(datetime): scroll to newly selected date when value changes by amandaejohnston · Pull Request #27806 · ionic-team/ionic-framework · GitHub

This is exactly what I was talking about.

“Asynchronously setting value” does not re-render the UI. That’s very frustrating. Good to know it is still in the code reviewing phase.

@ldebeasi

I can confirm that the the value changing when the month/year picker changes is an intentional behavior. Ionic Framework is designed to follow what the native iOS and Material Design components do. The native iOS date picker also changes the value when the month/year picker changes which is why we opted to follow that behavior.

This makes the component impossible to make a single calender for day range selection, bug-free.

Reason: You can’t seperate whether or not the user want to only change the year/month only, or they want a new day.

Problem :
You try to make the day-range selection more convineient so you make any value smaller then last input becomes from date and any value bigger then last input become to date.

user accidently scroll to year 3000 and now they have to press the reset button to reset the whole component because your component is too convinient.

@ldebeasi

We do also give the option to customize this behavior using the showDefaultButtons property. This property allows you to require explicit user confirmation before the ion-datetime value changes. I think this is probably what you want as it prevents ionChange from being emitted every time the month/year changes. Instead, ionChange only emits once users press the “Confirm” button.

Not ideal solution, This mean you are forced to make user click confirm. This is not intuitive.

For example :

• If you have 10 ion-datetime to pick from you have to click confirm 10 times
• if datetime picker is inside an ion-modal(contact list/ filter etc) you click confirm multiple times. Even worse if you put ion-datetime as a modal itself.

Suggestion. Just make an option to seperate the year/month wheel selection as a boolean property in component html.

So then Ion-datetime will cache the year/month value somewhere. And only emits the value when user click on a day. [cacheYearMonth]==true.

Instead of automatically select the same day but different year/month and then emit the value.

This actually in return makes day-range in a single calender possible.

Like trust me, I have sink 200 hours trying to make this work.

[ldebeasi]

This makes the component impossible to make a single calender for day range selection, bug-free.

ion-datetime was not built for range selection so I don’t recommend using ion-datetime for this. I have seen some developers use multiple datetime instances (one for the start date and one for the end date), so you could try that. But I’m not surprised you are running into issues using it for range selection since it was not built for that purpose.

We have an open feature request for adding this that you can upvote: feat: ion-datetime with date range · Issue #23572 · ionic-team/ionic-framework · GitHub

---

As a best practice, developers should not care about the user changing the month and year or any intermediary steps when using the full grid picker, so I’m not sure I fully understand what you are trying to accomplish with your current usage.

Changing the month/year changes the selected date which matches the behavior that you will find in most native iOS applications. For example, if the selected date is “August 2, 2023” and the user changes the month to “September”, then the selected date emitted will be “September 2, 2023”.

Suggestion. Just make an option to seperate the year/month wheel selection as a boolean property in component html.

You can already do this using the presentation property.

[ferreirajose]

Taking advantage of this conversation, I would like to know if there is any way to add new attributes to the DatetimeHighlight type, for example a border?

Like this:

export type DatetimeHighlightStyle = {
textColor: string;
backgroundColor?: string;
border?: string
} | {
textColor?: string;
backgroundColor: string;
border?: string;
};

This would be very useful, as it would solve a problem I am trying to solve when customizing the calendar.

below is the prototype

[ferreirajose]

@ldebeasi

Taking advantage of this conversation, I would like to know if there is any way to add new attributes to the DatetimeHighlight type, for example a border?

Like this:

export type DatetimeHighlightStyle = {
textColor: string;
backgroundColor?: string;
border?: string
} | {
textColor?: string;
backgroundColor: string;
border?: string;
};

This would be very useful, as it would solve a problem I am trying to solve when customizing the calendar.