WordPress ACF Admin Datepicker Range

I’m using Advanced Custom Fields on my WordPress site and I have a datepicker start-date & end-date that I’m trying to set min/max on when one is selected. From jQuery’s datepicker date-range I’m trying to add the onClose option.

I currently have the following code based off the custom javascript fields page but it’s not working.

<?php function takeover_scripts() { ?>

  <script type="text/javascript">
    (function($) {

      var startDate = $('.acf-field-568d4b2968a3e');
      acf.add_filter('date_picker_args', function( args, startDate ){
        // do something to args
        args.changeMonth = false;
        args.onClose = function( selectedDate ) {
          $( ".acf-field-568d4bbd68a3f" ).datepicker( "option", "minDate", selectedDate );
        }
        // return
        return args;
      });

      var endDate = $('.acf-field-568d4bbd68a3f');
      acf.add_filter('date_picker_args', function( args, endDate ){
        // do something to args
        args.changeMonth = true;
        args.onClose = function( selectedDate ) {
          $( ".acf-field-568d4b2968a3e" ).datepicker( "option", "minDate", selectedDate );
        }
        // return
        return args;
      });

    })(jQuery); 
  </script>

<?php }

add_action('acf/input/admin_footer', 'takeover_scripts'); ?>

I’m not sure if I need to target the id of the end-date input or the field number or if I even have the start-date field selected correctly. If anyone has any experience with this please let me know what I’m setting/selecting wrong.

Here’s the markup for the two fields :

<div class="acf-field acf-field-date-picker acf-field-568d4b2968a3e" style="width:25%;" data-name="start_date" data-type="date_picker" data-key="field_568d4b2968a3e" data-required="1" data-width="25">
    <div class="acf-label">
        <label for="acf-field_568d479e68a3b-0-field_568d4b2968a3e">Start Date <span class="acf-required">*</span></label>
    </div>
    <div class="acf-input">
        <div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0">
            <input id="acf-field_568d479e68a3b-0-field_568d4b2968a3e" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4b2968a3e]" value="">
            <input type="text" value="" class="input active hasDatepicker" id="dp1452127570218">
        </div>      
    </div>
</div>

<div class="acf-field acf-field-date-picker acf-field-568d4bbd68a3f" style="width:25%;" data-name="end_date" data-type="date_picker" data-key="field_568d4bbd68a3f" data-required="1" data-width="25">
    <div class="acf-label">
        <label for="acf-field_568d479e68a3b-0-field_568d4bbd68a3f">End Date <span class="acf-required">*</span></label>
    </div>
    <div class="acf-input">
        <div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0"><input id="acf-field_568d479e68a3b-0-field_568d4bbd68a3f" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4bbd68a3f]" value=""><input type="text" value="" class="input active hasDatepicker" id="dp1452127570219"></div>     
    </div>
</div>

Thanks

P.S. : I also have this on ACF’s support located here.