Admin Datepicker Range

• timbomckay

• January 7, 2016 at 3:37 pm

I have a datepicker start-date and end-date that I’m trying to set min/max on when one is selected. From 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.

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

    // find a specific field
    var startDate = $('.acf-field-568d4b2968a3e');
    acf.add_filter('date_picker_args', function( args, startDate ){
      // do something to args
      args.onClose = function( selectedDate ) {
        $( ".acf-field-568d4bbd68a3f" ).datepicker( "option", "minDate", selectedDate );
      }
      // return
      return args;
    });
    
  })(jQuery); 
</script>

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

• timbomckay

• January 12, 2016 at 3:01 am

Anyone have any experience with altering the datepicker in the admin via javascript?

• James

• April 13, 2016 at 7:46 pm

Hi @timbomckay,

Thanks for the post.

I would recommend you make use of the following script to change the date picker range:

<script type="text/javascript"> 	
(function($) { 		
              acf.add_filter('date_picker_args', function(args, el) { 			
              args.yearRange = "-200:+200"; 			
              return args; 		
              }); 	

})($); 

</script>

• dsuresh.ebiz

• February 26, 2018 at 7:41 am

I tried its note working, please help me. thankyou