Support

Account

Home Forums Backend Issues (wp-admin) How to trigger on close datepicker() event?

Solved

How to trigger on close datepicker() event?

  • Hey all! I’ve got a new question πŸ™‚

    How to trigger the on close event for datepicker()?

    The goal: I want to live validate ACF input, for which I’ve gotten an answer from John Huebner here.
    This is the perfect base to start from. But the problem with this is, when it comes to working with a datepicker, it all triggers a bit different I guess. The result is that with the code from the example on my previous post it runs the validation on every change of the input. Even while editing.
    And this is way to aggressive. I would only like to validate the value when deselecting the field. Or even better, when on closing the datepicker().

    Approach so far. As you can see from the code below I’ve tried several ways to trigger this. None of them work (correctly). The only ones being fires are ‘blur’ and ‘change’.

    – ‘change’ every time you change the date/input.
    – ‘blur’ every time you change the date/input. Plus when deselecting the field.

    The problem with ‘blur’ is that every time you change the input you can see the input field ‘blur’ and ‘focus’ (the blue selection border).

     
    var start_date_key = 'field_5bc62ed0bbcd1'; // the field key of the start date
     
    // add an action for all datepicker fields
    acf.addAction('date_time_picker_init', function( $input, args, field ){
        // get the field key for this field
        var key = $input.closest('.acf-field').data('key');
    
        // see if it's the start date field
        if (key == start_date_key) {
    
            $input.datepicker({
                onClose: function (e) {
                    console.log('onClose');
                }
            });
            
            $input.datepicker({
                onchange: function (e) {
                    console.log('onchange');
                }
            });
    
            $input.datepicker().on('hide', function (e) {
                console.log('hide');
            });
            
            $input.datepicker().on('close', function (e) {
                console.log('close');
            });
    
            $input.datepicker().on('blur', function (e) {
                console.log('blur');
            });
    
            $input.datepicker().on('input', function (e) {
                console.log('input');
            });
    
            $input.datepicker().on('change', function (e) {
                console.log('change');
            });
    
            $input.datepicker().on('select', function (e) {
                console.log('select');
            });
        }
    });

    Does anyone has some insights on this?

  • Hey John, once again you’ve saved the day. πŸ™‚

    This is what I ended up using. The setTimeout(). And added a check. I was not able to get the onSelect() to work πŸ™‚

    With the code below I was even able to split the validation into two parts! One while editing and one post editing. Nice.

    $input.datepicker().on('input change select', function (e) {
            $this = this;
    
            // validate "live", directly on change
            // for example, if date end indeed is later than date start
            rtt_validate_datepicker_onChange($this, $input);
    
            // validate after exiting the field
            // for example, after populating start date AND exiting field, check if end date is empty, if so, than populate it with you desired value
            // Debounce
            setTimeout(function(){
                // check if your input is still focused. If so, it went back in editing.
                if ( ! $input.is(":focus")  ) {
                    // alright, after debounce it is blurred, not focused.
                    // That means we actually left the field. Now it's time for your validation.
                    rtt_validate_datepicker_onBlur($this, $input);
                }
            }, 300);
        });
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.