Is there any way to autocomplete end date when start date is selected. I am using the jquery date picker inside a repeater field with Start date and end date.
I want to leave some days say 5 days in between the start date and end date.
Like if I select 11-04-2017 as start_date the end_date should autofill as 15-04-2017
Hi,
I’m not sure if there is a better way to handle this but I would personally suggest to create a function fired on save post, and if the “end date” is empty, you can set the default date (5 days after the start date):
function custom_execute_save_post_actions($post_id, $post, $update){
// Stop WP from clearing custom fields on autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if ( 'trash' != $post_status ) {
// check if your custom field is empty and set the default value here
}
}
add_action( 'save_post', 'custom_execute_save_post_actions', 10, 3);
I have not put this all together.
First take a look at these examples I’ve created. Basically it’s a group of examples that show how to get and set values of ACF fields using JavaScript https://github.com/Hube2/acf-dynamic-ajax-select-example
Next, take a look at this topic about getting the value of a datepicker field http://stackoverflow.com/questions/8147108/getting-value-from-jquery-datepicker
And finally take a look at this topic on setting the value of a datepicker field http://stackoverflow.com/questions/606463/jquery-datepicker-set-selected-date-on-the-fly
Not sure if this will get you where you need to go. You may want to look for more information on getting and setting datepicker fields, I just picked the first 1 that came up in a search.
EDIT: I’d love to see any solution you come up with. If I had a couple of hours to kill I’d create a new example for this.
So, I had some time to kill and this was interesting, I got to learn something.
Here is the JS, which takes a different path than some of my other code, basically because it’s a datepicker field and we need to interact with that rather than acf. This needs to be after the script ‘acf-input’ is loaded.
// set end date from start date
var start_date_key = 'field_58ea95e10e001'; // the field key of the start date
var end_date_key = 'field_58f0f9dd1b228'; // the field key of the end date
if (typeof(acf) != 'undefined') {
// add an action for all datepicker fields
acf.add_action('date_picker_init', function($input, args, $field) {
// get the field key for this field
var key = $input.closest('.acf-field').data('key');
// see if it's the start date field
if (key == start_date_key) {
// add action to start date field datepicker
$input.datepicker().on('input change select', function(e) {
// get the selected date
var date = jQuery(this).datepicker('getDate');
// add 5 days to date
date.setDate(date.getDate()+5);
// set end date
jQuery('[data-key="'+end_date_key+'"] input.hasDatepicker').datepicker('setDate', date);
});
}
});
}
if you put this in a script file then in functions.php add
add_action('acf/input/admin_enqueue_scripts', 'enqueue_date_script');
function enqueue_date_script() {
wp_enqueue_script('your-handle', 'src-of-your-script', array('acf-input'));
}
Hi
I have the following problem after using your code.
acf.addaction is not a function
ACF version 4.4.11
I found this solution, but I do not understand how to apply it:
Github
Browser console:
The solution I posted is for ACF5. I don’t know how to do this for ACF4. There is very little documentation on custom JS for ACF4. https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/?version=4
Going to be completely honest here. I would not waste any time building custom JS for ACF4. A free version of ACF5 is going to be released in the next few months and you’ll just be rebuilding it since ACF4 & 5 JS are not compatible. ACF5 Pro is really cheap for a single site. But that’s just my opinion.
I am having trouble getting this to work. I am able to enqueue the script, but I am not sure where or how to check if it is loading after ‘acf-input’ is loaded as you said.
here is my code:
// set end date from start date
var start_date_key = 'field_55b9e422a0ec5'; // the field key of the start date
var end_date_key = 'field_56274f2898327'; // the field key of the end date
if (typeof(acf) != 'undefined') {
// add an action for all datepicker fields
acf.add_action('date_picker_init', function($input, args, $field) {
// get the field key for this field
var key = $input.closest('.acf-field').data('key');
// see if it's the start date field
if (key == start_date_key) {
// add action to start date field datepicker
$input.datepicker().on('input change select', function(e) {
// get the selected date
var date = jQuery(this).datepicker('getDate');
// add 5 days to date
date.setDate(date.getDate()+5);
// set end date
jQuery('[data-key="'+end_date_key+'"] input.hasDatepicker').datepicker('setDate', date);
});
}
});
}
and in functions.php:
add_action('acf/input/admin_enqueue_scripts', 'enqueue_date_script');
function enqueue_date_script() {
wp_enqueue_script('date-picker', '/date-picker.js', array('acf-input'));
}
Am I missing something here? I have ensured that the field keys are correct. I am using ACF 5.3.0
This value for the SRC is probably incorrect '/date-picker.js'
Since it’s in your theme then you probably want something like
get_template_directory_uri().'/path/in/theme/date-picker.js'
see
https://developer.wordpress.org/reference/functions/get_template_directory_uri/
or
https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
