Support

Account

Home Forums Backend Issues (wp-admin) Datepicker – Disable Selecting Future Dates

Solved

Datepicker – Disable Selecting Future Dates

  • I’m trying to disable selecting future dates ( any date past today, midnight ) with all the ACF datepicker fields. Here’s the code I’m using:

    /**
     * Add inline script to modify ACF datepicker settings
     *
     * @return void
     */
    function themeprefix_admin_print_scripts() {
    	
    	$screen 	= get_current_screen();
    	$mod_arr 	= array( 'post' );
    	
    	if( ! in_array( $screen->post_type, $mod_arr ) || 'post' !== $screen->base ) {
    		return;
    	}
    	
      ?>
    	
    	<script>
    		( function( $ ) {
    			acf.add_filter( 'date_picker_args', function( args ) {
    				args['maxDate'] = 0;
    				return args;
    			} );
    		} )( jQuery );
    	</script>
    	
      <?php
    	
    }
    add_action( 'acf/input/admin_footer', 'themeprefix_admin_print_scripts' );

    The above allows the user to select a future date, it’s just that the date doesn’t get saved. Does anyone have suggestions on how I can disable the user from selecting future dates in the datepicker calendar pop up?

  • I can’t for the life of me get this to work. I’ve been trying methods all over the forums. That is the correct hook I should be using, right? I can get console.log() from the above and below:

    ( function( $ ) {
    	$( '#dp1528832081239' ).datepicker( 'option', 'maxDate', 0 );
    	// $( '.field_5b16a9d5df47c .acf-date_picker input.input' ).datepicker( 'option', 'maxDate', 0 );
    } )( jQuery );
  • Got it, the issue is even though I’m adding an alias for jQuery I still need document ready. Even with dom ready I couldn’t get the acf js filter to work as expected:

    jQuery( document ).ready( function( $ ) {
    	
    	let $datepicker = $( '#acf-field_5b16a9d5df47c + .hasDatepicker' );
    	
    	$datepicker.datepicker( 'option', {
    		maxDate: new Date()
    	} );
    	
    } );
  • For other users looking for this answer, the current syntax is a bit different:

    
    // Don't allow picking dates in the future
    acf.addAction('date_picker_init', function( $input, args, field ){
      $input.datepicker('option', 'maxDate', 0);
    });
    
  • My previous solution has the unwanted effect that it overwrites already set dates that are in the past to the current day.

    Correct solution came from https://stackoverflow.com/questions/62204645/disable-dates-and-days-of-the-week-in-acf-date-picker

    
    acf.add_filter('date_picker_args', function( args, $field ){
      args['minDate'] = '0';
      return args;
    });
    
    
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.