datepicker IDs

• shankie

• April 23, 2014 at 5:15 am

Hi Eliot & co

I think I might have discovered a bug.

In the front-end form, most fields get an ID of acf-field_name, where field_name is the field name defined in ACF in the dashboard.

For some reason, this doesn’t seem to be happening with datepicker fields – datepicker fields get an ID something like dp1398193624568 which changes each time the page is loaded – which of course makes targeting difficult.

Has anyone encountered this before?

Cheers,

Andrew

• John Huebner

• April 13, 2016 at 9:00 am

Hopefully you found a solution for this, for anyone else that’s looking, the datapicker field is a field that’s inserted by the jquery datepicker add on, the actual ACF field is hidded and the value of that field is updated by the JS that runs the datepicker.

When targeting ACF fields like this use ‘[data-key=”field_570d7682a7be5″]’ to target the fields inside the div. You can target the field ID if you are looking to modify the hidden ACF field

• juanmtorrijos

• April 27, 2016 at 2:11 am

Hi John,

I have an issue, I would like to grab the value of the datepicker field when the value changes and set that value in another datepicker field.

I tried doing this using the datepicker onSelect method described in the jquery ui docs and this stackoverflow question:

http://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help

However I have not have any luck, I think this is because of the hidden field? Can you think of a workaround?

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

• juanmtorrijos

• May 3, 2016 at 1:27 pm

HI John,

I have tried this with no luck. I failed to mention I am using a front end form created with acf_form()

• John Huebner

• May 3, 2016 at 9:18 pm

You’ll need to also enqueue the scripts on the front end as well, run the enqueue filter on the wp_enqueue_scripts also.