Support

Account

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

    • damon

    • April 10, 2017 at 10:58 pm

    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.

    • Chris_A

    • August 24, 2017 at 10:25 pm

    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.

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.