Home Forums Front-end Issues datepicker IDs


datepicker IDs

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



  • 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

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

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

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

      // 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
            // 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);
        }, // 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.

  • HI John,

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

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

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘datepicker IDs’ is closed to new replies.