KTDatePicker – event not triggered when selecting a date
Hi,
I’m having an issue with KTDatePicker — the event is not triggered when a date is selected.
I’m trying to listen for a date click / selection using the following code:
const calendar = new KTDatePicker('#test-data', {
onClickDate(self, t) {
console.log(self.context.selectedDates);
},
});
calendar.init();
Unfortunately, the onClickDate callback is never executed after selecting a date in the UI
(no logs appear in the console).
Additional details:
the #test-data element exists in the DOM
calendar.init() is called after the page is loaded
the DatePicker renders correctly and the UI itself works
the issue occurs both on the first selection and when selecting another date
Could you please confirm:
whether onClickDate is the correct event for handling date selection?
if there is another event (e.g. onChange, onSelect, etc.) that should be used instead?
or if additional configuration options are required for this event to fire?
Thank you in advance for your help.
Replies (2)
A birthday party planner in Orange County can make event planning much easier by handling important details such as venue selection, decorations, catering, entertainment, and scheduling. If an event booking system has an issue where the event is not triggered when selecting a date, it can affect how smoothly clients plan their celebrations. A reliable birthday party planner should use a clear booking process that helps guests choose their preferred date and confirm availability without confusion. For Orange County birthday celebrations, proper planning and an easy booking experience can help create a well-organized event from start to finish. Website:
Hi
Listen for the kt.date-picker.change DOM event
This is fired when the selection is applied (single date: when a date is chosen; range/action-buttons: when the choice is applied). The selected date(s) are in the event detail:
const el = document.querySelector("#test-data");
el.addEventListener("kt.date-picker.change", function (e) {
const { dates } = e.detail.payload;
console.log("Selected date(s):", dates);
});If you need onClickDate to be supported by KTDatePicker itself, we will implement it.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
