Reply To: datepicker IDs

• John Huebner

• April 27, 2016 at 11:04 am

Spent some time trying to figure this out and here’s what I have

create a script and enqueue it in the admin

add_action('admin_enqueue_scripts', 'extend_acf_datepicker');
function extend_acf_datepicker() {
  $handle = 'extend-acf-datepicker';
  $src = get_template_directory_uri().'/extend-acf-datepicker.js';
  $depends = array('acf-field-group');
  wp_enqueue_script($handle, $src, $depends);
}

here’s the script, not much for explanation, hopefully it works.

jQuery(document).ready(function($){
  // extend acf's datepicker field
  var extended_datepicker = acf.fields.date_picker.extend({
    events: {
      'change input[type="text"]': 'change',
    },
    change: function() {
      // get the ID of the field that triggered function
      var $hidden_id = this.$hidden.attr('id');
      if ($hidden_id == 'acf-field_571fdefeea8fd') {
        // this runs on the field you want to copy from
        // put the value of this field into the other field
        $('#acf-field_571fdf12ea8fe').val(this.$hidden.val());
        // this triggers change on the field you want to copy to
        // where the value will be formatted for display
        $('div[data-key="field_571fdf12ea8fe"] input').trigger('change');
      } else if ($hidden_id == 'acf-field_571fdf12ea8fe') {
        // this runs on the field you want to copy to
        var value = this.$hidden.val();
        value = value.substr(0,4)+'-'+value.substr(4,2)+'-'+value.substr(6,2);
        var date = new Date(value);
        value = $.datepicker.formatDate(this.o.display_format, date);
        this.$input.val(value);
      }
    }, // end change
  }) // end extent
}); // ene ready

There is a lot of trial and error when working with the JS side of ACF. You’ve basically got to dig into the js files in ACF and start making mistakes.