CS-Forms - Java for flatpickr

[xoa]

Hi there, for the flatpickr calendar, I created a custom Javascript that loads the year input field as a dropdown.

How can i place the script inside my calendar only instead of the whole site JavaScript? Basically that it only runs when the calendar opens.

Thanks!

[ruenel]

Hey @xoa,

Thanks for writing in!

You can do the following:

1. Attach your code to the calendar’s open event – rather than running your script when the page loads, attach it to flatpickr’s onOpen callback. This fires each time a calendar is opened and receives the picker instance as its third argument, which is what lets you target only that calendar.

2. Scope your changes to the calendar element – inside the callback, confine all DOM work to instance.calendarContainer, which is the calendar’s own root element. The year field is available directly as instance.currentYearElement. Working from those two references means your script cannot affect anything else on the page, which is the behaviour you are after.

3. Two ways to attach it – you can either set it as a default before the pickers initialise, using flatpickr’s setDefaults method, or attach it to an existing picker afterwards, as each date input exposes its instance on the element itself. The second approach is the more reliable of the two, because it does not depend on your script running before ours.

4. Note there is no dedicated filter for the date picker configuration in Cornerstone Forms, so this is done through flatpickr’s own API rather than a Themeco hook. flatpickr’s documentation covers onOpen and the instance properties above.

5. Confirm your subscription tier – custom JavaScript is provided under our Custom Coding tier, available to ONE package subscribers. Please confirm whether your account is on the ONE package and we can look at your specific script.

If you also want the month shown as a dropdown, that is built-in and needs no code — flatpickr supports a dropdown month selector natively.

Be advised that custom coding is beyond the scope of our support. You may wish to consult a developer to assist you with this.

Best Regards.