Reply To: Autocomplete end date when start date is selected in jquery date picker

• John Huebner

• April 15, 2017 at 4:29 am

So, I had some time to kill and this was interesting, I got to learn something.

Here is the JS, which takes a different path than some of my other code, basically because it’s a datepicker field and we need to interact with that rather than acf. This needs to be after the script ‘acf-input’ is loaded.

// set end date from start date  

  var start_date_key = 'field_58ea95e10e001'; // the field key of the start date
  var end_date_key = 'field_58f0f9dd1b228'; // the field key of the end date
  
  if (typeof(acf) != 'undefined') {
    // add an action for all datepicker fields
    acf.add_action('date_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) {
        // add action to start date field datepicker
        $input.datepicker().on('input change select', function(e) {
          // get the selected date
          var date = jQuery(this).datepicker('getDate');
          // add 5 days to date
          date.setDate(date.getDate()+5);
          // set end date
          jQuery('[data-key="'+end_date_key+'"] input.hasDatepicker').datepicker('setDate', date);
        });
      }
    });
  }

if you put this in a script file then in functions.php add

add_action('acf/input/admin_enqueue_scripts', 'enqueue_date_script');
function enqueue_date_script() {
  wp_enqueue_script('your-handle', 'src-of-your-script', array('acf-input'));
}