I am trying to populate the calendar form field by using jQuery based on the values of other field. I am using JHTML::calendar for this. When the value is set via php everything works fine for me. But when I try to set it via jQuery, it shows the value but when hit submit, the field becomes blank. Although, when I use tab (or focus) then date value saves properly.

Following is my code -


<?php if($session->get('ssdate')): $dateValue = $session->get('ssdate'); endif; ?>
<?php echo JHTML::calendar($dateValue, 'sdate', 'sdate', '%d-%m-%Y'); ?>

Via jQuery

//data.match_date is in format 01-10-2017
jQuery('#rq_form input[name=sdate]').val(data.match_date);

I referred to this post and tried chaning the format to yyyy-mm-dd and set the value but again it goes blank.

Reference: https://github.com/jquery/jquery-mobile/issues/2755

Change date format and set value

var d = new Date(jQuery('#rq_form input[name=sdate]').val()),
var dateValue = d.split("-").reverse().join("-");
//dateValue format = 2017-10-01

jQuery('#rq_form input[name=sdate]').val(dateValue);
  • Are you sure the query selector you're using ($('#rq_form input[name=sdate]')) is correct? Try console logging this to see if it actually exists
    – Lodder
    Oct 2, 2017 at 11:10
  • yes it is correct.
    – Liz.
    Oct 2, 2017 at 14:27

2 Answers 2


I noticed a change in the calendar widget in Joomla 3.8. In addition to the setting the value via val(), I also had to set the data-alt-value attribute as well. Otherwise it would fail validation. So, in your example,

jQuery('#rq_form input[name=sdate]').val(dateValue);
jQuery('#rq_form input[name=sdate]').attr('data-alt-value',dateValue);
  • 1
    When accessing data- attributes with jquery, it is simpler/cleaner to use .data('alt-value', dateValue). Furthermore, if you use attr() or prop() to overwrite the value, then try to access data-alt-value downscript, you may not get the updated value. I strongly recommend the data() method. Jun 7, 2018 at 3:32

I've found a way to do what you're looking for, but its a bit hacky!

When you call JHtml::_( 'calendar', . . Joomla renders a div with the class 'field-calendar' into your document, and adds media/system/js/fields/calendar.js to the head. The JavaScript then creates JoomlaCalendar objects called _joomlaCalendar and adds them to all divs with class 'field-calendar'.

If you can get hold of the div with class 'field-calendar', then you can get and manipulate the _joomlaCalendar object, setting the date and time. Using jQuery, this would look like:

var calendarDiv = jQuery('.field-calendar')[0];
var calendar = calendarDiv._joomlaCalendar;
calendar.setDate( new DateTime('2018-12-12 12:00') );

If you take a look at media/system/js/fields/calenar.js, you'll see what methods JoomlaCalendar has and get some idea how you might interact with it.

I say this is hacky because I've no idea the 'correct' way to interact with the JoomlaCalendar JavaSript object. I've successfully manipulated it in various ways, but I don't know if what I was doing was correct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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