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
You must be logged in to reply to this topic.
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!
Plugin boilerplates can do some of the heavy lifting during initial development. We look at four options to speed up your plugin creation. https://t.co/ZtMsdBxAHw
— Advanced Custom Fields (@wp_acf) June 5, 2023
© 2023 Advanced Custom Fields.
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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.