Home Forums Front-end Issues datepicker IDs Reply To: datepicker IDs

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