Home › Forums › Front-end Issues › 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?
Cheers,
Andrew
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:
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?
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.
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.
The topic ‘datepicker IDs’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.