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

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

  • i’ve read the whole writeup of your situation but I still cannot really figure out what you would like to accomplish with calling the blur on that target field. Would you like to call an additional (callback) function when blur happens? Or you want to just blur the input field (to have the input field to lose focus)? (Maybe I’m stupid on this but I do not see it).
    – Zollie
    Nov 16, 2019 at 16:34
  • @Zollie I think what needs to happen is for target_field to lose focus after I have put my date value in to target_field.
    – Irata
    Nov 16, 2019 at 22:16
  • @zollie I have added little more information to the original post. What I am trying to achieve is to simulate an end user selecting and then leaving the target date field after I put my value there.
    – Irata
    Nov 16, 2019 at 22:32
  • I see your purpose a little bit more I think, but as I understand you would like to make the date field non-editable after the current date is inserted (or maybe I’m still misunderstanding it). So, after inserting current date, you could call document.getElementById(“target_field").readOnly = true;. I am not sure, but that came to my mind as I’m digesting your question.
    – Zollie
    Nov 17, 2019 at 6:15
  • @Zollie It is nothing to do with Read-Only. If I can't trigger this Blur event I would have to pop up a message to the end user to asking them to put the cursor in the target_field and then move to another field. Without this manual action, the value I put into the target field will not be saved. I want to do the trigger without making the User doing anything else. Thank you for helping me.
    – Irata
    Nov 17, 2019 at 9:44

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

and it works !!!

  • Your IDE might ask you declare the object as a variable and use it three times. let targetObj = document.getElementById(target_field); ... Nov 17, 2019 at 13:26
  • Yes, I thought about this too, since usually the blur is used together with focus... I have not checked that earlier in the day that is why I did not want to suggest this... well, the point is that you solved the issue, great. :)
    – Zollie
    Nov 17, 2019 at 13:27

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.