I am using the below code to show a calendar in my form.

echo JHTML::calendar("", "timetable_slot_date", "id_timetable_slot_date")

What I need is to implement an onChange or onDateSelect javascript (jQuery) to do some Ajax process.

Tried the below code

jQuery('#id_timetable_slot_date').change(function() { alert('changed') });

This code works only if I manually input the date in the text box. It doesn't get triggered when I select the date from the popup.

  • @Lodder Added the code which I tried... Oct 28, 2015 at 20:15
  • After several attempts I noticed that this is not possible and finally I give up. Thanks Nov 11, 2015 at 22:12
  • It is possible now, please see my answer below.
    – Dom
    Dec 6, 2018 at 15:32

3 Answers 3


This is supported directly in core Joomla, at lease in version 3.8.5.

JHTML::calendar takes five parameters, the value (date time), element name, element id, date time format and attributes. The attributes element is an associative array and accepts an 'onchange' attribute, which is fired whenever the date or time picker is changed.

For your example, you would use something like:

echo JHTML::calendar( 

The only bit I had problems with was correctly escaping the quotes around the string being echoed.


You can achive this behavior with a workaround (testing clicks on popup calendar days):

      /* Check input values and do stuff */

This will check dinamically if .daysrow (the class including all days of the popup calendar) has been clicked, you just need to check if the value has been actually changed with jQuery("#inputid").val()


Continuing from Dom's answer, if you are rendering a calendar using xml JForm and JFormField, you can write something like this, even though I couldn't find it in Joomla docs:

<field name="date" type="calendar" default="NOW" label="COM_EXAMPLE_FORM_LBL_DATE" 
    format="%Y-%m-%d %H:%M:%S" showtime="true" class="example_calendar form-control"

In onchange, you can pass the whole Calendar field using this so that Javascript can use it, in case it is needed:

function calendarValueChange(el) {
  // with jQuery
  if (!jQuery(el).val().length) {
    alert("Calendar value is empty!");
  // without jQuery
  if (!el.value.length) {
    alert("Calendar value is empty!");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.