JS : How to trigger a Blur event with my code

Question

I need help in triggering a Blur event attached to a calendar field.

The event I am trying to trigger is added in /media/system/calendar.js around line 1003

JoomlaCalendar.prototype._bindEvents = function () {
    var self = this;
    this.inputField.addEventListener('blur', function(event) {
        var calObj = JoomlaCalendar.getCalObject(this)._joomlaCalendar;

The field the event is attached to is the Start Publishing field for my testing

<input type="text" id="jform_publish_up" name="jform[publish_up]" value="2012-01-04" size="22" class="inputbox" data-alt-value="2012-01-04" autocomplete="off">

My bit of JS where I am trying to trigger the Blur Event.

function addDate(target_field) 
{
    document.getElementById(target_field).value = currentDate();
    document.getElementById(target_field).blur();
}

The first line adds the current date to the field and works fine on other field types and will work on the calendar fields provided I place the cursor in the calendar field and leave(this is what triggers the Blur normally) at some point before I try to submit the form.

I have tracked it down to a few lines of code that need to run in the above blur event that allows my new value for the field to be saved and not reset back to the value it was before.

The second line is where I am trying to trigger the function and what is there is just the latest of things that don't seem to have any affect.

And for completeness here is my other test field that kicks of the process of adding the date to the start publishing field.

<input type="text" name="jform[note]" id="jform_note" value="3432" class="inputbox" size="40" onchange="addDate('jform_publish_up')" maxlength="255" aria-invalid="false">

This is a follow on question to this one for earlier in the week, How to Update a field only when another filed is changed , and if I can save the dates then I can close it off.

Update 17/11 - This is the piece of code that I believe I need to run after my date value is added to the target_field. /media/system/js/calendar.js at Approx. line 1013.

    if (calObj) {
        if (calObj.inputField.value) {
            if (typeof calObj.params.dateClicked === 'undefined') {
                calObj.inputField.setAttribute('data-local-value', calObj.inputField.value);

Without data-local-value being set, and this happens as the cursor leaves the field, then other processing in calendar.js that runs on Submit will revert the field back to the original value. You can see this in any/most Joomla date fields if you inspect the event for the field you can this code under the third entry which is calendar.js

Answer 1

Sometimes you can't see the forest for the trees.

My JS now looks like this

function addDate(target_field) 
{
    document.getElementById(target_field).value = currentDate();
    document.getElementById(target_field).focus();
    document.getElementById(target_field).blur();
}

and it works !!!