WordPress ACF Admin Datepicker Range
<p>I'm using Advanced Custom Fields on my WordPress site and I have a datepicker start-date &amp; end-date that I'm trying to set min/max on when one is selected. From <em>jQuery's datepicker date-range</em> I'm trying to add the <em>onClose</em> option.</p>

<p>I currently have the following code based off the <a href="http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/" rel="nofollow"><em>custom javascript fields</em> page</a> but it's not working.</p>

<pre><code>&lt;?php function takeover_scripts() { ?&gt;

  &lt;script type="text/javascript"&gt;
    (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); 
  &lt;/script&gt;

&lt;?php }

add_action('acf/input/admin_footer', 'takeover_scripts'); ?&gt;
</code></pre>

<p>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.</p>

<p>Here's the markup for the two fields :</p>

<pre><code>&lt;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"&gt;
    &lt;div class="acf-label"&gt;
        &lt;label for="acf-field_568d479e68a3b-0-field_568d4b2968a3e"&gt;Start Date &lt;span class="acf-required"&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="acf-input"&gt;
        &lt;div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0"&gt;
            &lt;input id="acf-field_568d479e68a3b-0-field_568d4b2968a3e" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4b2968a3e]" value=""&gt;
            &lt;input type="text" value="" class="input active hasDatepicker" id="dp1452127570218"&gt;
        &lt;/div&gt;      
    &lt;/div&gt;
&lt;/div&gt;

&lt;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"&gt;
    &lt;div class="acf-label"&gt;
        &lt;label for="acf-field_568d479e68a3b-0-field_568d4bbd68a3f"&gt;End Date &lt;span class="acf-required"&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="acf-input"&gt;
        &lt;div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0"&gt;&lt;input id="acf-field_568d479e68a3b-0-field_568d4bbd68a3f" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4bbd68a3f]" value=""&gt;&lt;input type="text" value="" class="input active hasDatepicker" id="dp1452127570219"&gt;&lt;/div&gt;     
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks</p>

<p>P.S. : I also have this on ACF's support located <a href="http://support.advancedcustomfields.com/forums/topic/admin-datepicker-range/#post-33466" rel="nofollow">here</a>.</p>