How to trigger on close datepicker() event?

• 

  • TimR

  • October 17, 2018 at 6:34 pm

  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?
• 

  

  • John Huebner

  • October 18, 2018 at 7:37 am

  It appears you may be looking for onSelect https://stackoverflow.com/questions/1814292/jqueryui-datepicker-fires-inputs-blur-before-passing-date-avoid-workaround
• 

  • TimR

  • October 20, 2018 at 1:30 am

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