Support

Account

Home Forums Backend Issues (wp-admin) Admin Datepicker Range

Solving

Admin Datepicker Range

  • 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

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

  • 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>
  • I tried its note working, please help me. thankyou

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

You must be logged in to reply to this topic.