igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

InputEditDateFormat and/or DataPicker date format not working

Hi guys,

I need to set my rangeSelectors Date to this format dd/mm/yy.

The inputDateFormat works well, but you can see when you click to edit the date it changes from dd/mm/yy to mm/dd/yy. (from 27/09/21 to 09/27/21)

Somebody could help me with it please ?

Thank you,

https://jsfiddle.net/igrasso/fyrj8n5d/1/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: InputEditDateFormat and/or DataPicker date format not working

Hi igrasso,

Welcome to our forum and thanks for contacting us with your issue!

In my case when I click at the date picker the format remains the same, only the separator changes (e.g. 27/09/21 to 27.09.21). Could you provide me with a short video or gif that would show the issue? Now I can't really reproduce it. Thanks in advance.

Regards!
Mateusz Bernacik
Highcharts Developer
igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Re: InputEditDateFormat and/or DataPicker date format not working

Hi Mateus,

Thanks for your answer.

I tested on Safari and Chrome and the issue is happening on both.

Please check the link below

https://ibb.co/SQYwD7S
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: InputEditDateFormat and/or DataPicker date format not working

Hi igrasso,

Thanks for the gif, it was really helpful, because as I said in my case the date remains in the same format, only separator changes and here is why:

Date picker in Highcharts is actually an <input> elements of type="date", and as you can read here:
https://developer.mozilla.org/en-US/doc ... input/date
Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
And this explains that behaviour. When you click on the input to change the date, the format changes based on your localization and we can't really do anything about that.

In Highcharts, input type depends on rangeSelector.inputDateFormat(https://api.highcharts.com/highstock/ra ... DateFormat).
inputEditDateFormat works only for text type input as informed in the API docs:
https://api.highcharts.com/highstock/ra ... DateFormat

An internal function preferredInputType is setting the type of the input to text only if %L is found in the format option (that is if milliseconds should be shown). The function preferredInputType is not accessible to overwrite or change. However, the type of the input could be changed after it is created and it could work with the format option but it will have to be a text type input.
Demo: https://jsfiddle.net/BlackLabel/fuezd95b/

This approach should solver issue with changing date format, but unfortunately you would lose some date input functionalities like calendar date picker.

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
igrasso
Posts: 7
Joined: Mon Dec 27, 2021 9:30 pm

Re: InputEditDateFormat and/or DataPicker date format not working

Hi Mateus,

This explains that behavior.

Thank you so much for clarifying it.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: InputEditDateFormat and/or DataPicker date format not working

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”