kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

stock chart select datepicker?

Is there an option to print a calendar that can be selected immediately by clicking the date selection part at the top right of the stock chart?
kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

Re: stock chart select datepicker?

Development is in progress with Vue.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: stock chart select datepicker?

Hello kdp9390,
Thanks for contacting us with your question!

The Calendar feature was added in the Highcharts version v9.0.0. This was not available before, so in order to obtain this feature for yourself, all you need to do is to update the packages to the newest ones. The newest one is Highcharts v10.0.0. In the demo below you can see a demo with Highcharts v10.0.0 and the Calendar feature is working correctly.

Demo: https://codesandbox.io/s/highcharts-vue ... /Chart.vue
Changelog: https://www.highcharts.com/blog/changelog/

Let me know if that works for you!
Regards!
Hubert Kozik
Highcharts Developer
kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

Re: stock chart select datepicker?

What I want is to display the calendar right away, rather than an input box, when I click the datepicker. Is it possible?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: stock chart select datepicker?

kdp9390,

Each browser acts differently using input[type='datetime'], some browser has calendar icon, some not. To show the date picker immediately after clicking you can use a showPicker method, but you have to know, this method is not supported in every browser. You can find the browser compatibility of this method on the MDN website. In the demo below you can see how to add an event listener to dates in the right upper corner and depending on whether the method exists - use it or make just click on input[type='datetime']. You can use the link "Demo app" to see current behaviour in different browsers, be aware of this because codesandbox have got a strange error while using showPicker method.

Demo: https://codesandbox.io/s/highcharts-vue ... ked-7ndugp
Demo app: https://7ndugp.csb.app/
Docs: https://developer.mozilla.org/en-US/doc ... showPicker

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”