Populate Joomla Calendar field by jQuery not working

Question

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 -

Via PHP

<?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);

Answer 1

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);

Answer 2

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.