Support

Account

Register Login

Home › Forums › ACF PRO › Autocomplete end date when start date is selected in jquery date picker

Solved

Autocomplete end date when start date is selected in jquery date picker

  • 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:
    acf.addaction is not a function

  • 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

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

You must be logged in to reply to this topic.