Question

I am using joomla calendar to pick a date. Below shows the html code of it. here when you click the image, calendar will pop up and there you can select a date and popup will close and date value show in input text field. What I want is I want to write a function to do a ajax post if the date is change.(input text change). I tried simple alert() but didn’t work. I think it is due to lost focus on the text field because only the image that we click and no contact with input field with mouse or any key press. plz help me to solve this.

$("#select_date").change(function(){
   alert('Working');
});

HTML Code

<input id="select_date" type="text" value="2012-02-16" name="select_date" title="Thursday, 16 February 2012">
<img id="select_date_img" class="calendar" alt="Calendar" src="/eap_movies/media/system/images/calendar.png">

PHP Code

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d');

Answer 1

Mihai Bazon’s DHTML Calendar v1.0 (under /media/system/js/calendar.js) has a callback for onSelected and onClose events. So it should be possible to catch when the calendar closes or when the user selects a date.

Solution 1 – Editing Joomla

Step 1 – You need to override this file: libraries/joomla/html/html.php

// added $onSelected parameter
public static function calendar($value, $name, $id, $format = '%Y-%m-%d', $attribs = null, $onSelected)
{
  ...
$document->addScriptDeclaration('window.addEvent(\'domready\', function() {Calendar.setup({
            inputField: "'.$id.'",          // id of the input field
            ifFormat: "'.$format.'",        // format of the input field
            button: "'.$id.'_img",          // trigger for the calendar (button ID)
            align: "Tl",                            // alignment (defaults to "Bl")
            singleClick: true,
            onSelected: '.$onSelected.'
});});');
...
}

Step 2 – Defining a callback for onSelected

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d', null, 'userSelectedDate');

Step 3 – Implementing the callback

function userSelectedDate(calendar, date){ ... }

Note: I don’t have an active install of Joomla so the code above might have syntax errors.

Solution 2 – Sara’s easier solution

Add onchange definition to the $attribs parameter of JHTML::calendar:

JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d','onchange="myfunction();"');

Visit DHTML Calendar Website as well.