Support

Home Forums Add-ons User Submitted Restrict date range for datepicker edit screen

Solving

Restrict date range for datepicker edit screen

    • ryanxx

    • May 20, 2014 at 12:46 pm

    I’m trying to restrict the ability to choose certain dates with the datepicker add-on. I’m assuming this is easy, but I can’t seem to find a way to manipulate the edit screen. It should be a minDate and maxDate value as detailed here

    http://jqueryui.com/datepicker/#min-max

    <script>
    $(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
    });
    </script>
    

    I’ve searched through the plugins ‘datepicker’ core files and can’t seem to find where exactly to add the code in.

    If anyone can help me or show me how to implement taht would be greatly appreciated.

    Thanks!

  • i’m having the same query. Any success on this?

    • ryanxx

    • May 26, 2014 at 3:53 pm

    No luck sorry.

    I thought it might be worth adding, that all I really need to do, is for the default date to start in July, instead of the current month. My client will be entering hundreds of events all in happening in July and has persistently asked me to make July the default date picker month.

    I was planning on achieving this by restricting the dates as the jquery docs suggest. But as this is all implemented with ACF, I can’t change it, or find where to change it.

    If anyone could help, you’d be a total life saver!

    Thanks!

    • Aminta

    • February 8, 2017 at 2:04 am

    Hi,

    in Acf 5.5.6 (I use the Pro Version), you will need to edit assets/js/acf-input.js file at line 4736 and 4764 and 4953:

    from:

    
                            // create options
    			var args = { 
    				dateFormat:			this.o.date_format,
    				altField:			this.$hidden,
    				altFormat:			'yymmdd',
    				changeYear:			true,
    				yearRange:			"-100:+100", // value to change
    				changeMonth:		true,
    				showButtonPanel:	true,
    				firstDay:			this.o.first_day
    			};

    to:

    
                            // create options
    			var args = { 
    				dateFormat:			this.o.date_format,
    				altField:			this.$hidden,
    				altFormat:			'yymmdd',
    				changeYear:			true,
    				yearRange:			"-200:+100", // value changed!
    				changeMonth:		true,
    				showButtonPanel:	true,
    				firstDay:			this.o.first_day
    			};

    Then you have to minify input.js in input.min.js because this is the file that is read in production; you can use an online tool like https://javascript-minifier.com.

    Finally clear any browser cache to get the new range.

    Or – more simply and cleaner:

    Use the appropriate hook

    functions.php

    
    function my_admin_enqueue_scripts() {
    
    	wp_enqueue_script( 'date-picker-js', get_template_directory_uri() . '/js/custom_date_picker.js', array(), '1.0.0', true );
    
    }
    
    add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');
    

    custom_date_picker.js

    
    // function to merge two Javavascipt objects IE compatible, from prototype.js http://prototypejs.org/doc/latest/language/Object/extend/
    function extend(destination, source) {
    	for (var property in source)
    		destination[property] = source[property];
    	return destination;
    }
    
    // Acf hook -> Hooks -> Filters -> date_picker_args
    // see https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/
    acf.add_filter('date_picker_args', function( args, $field ){
    	
    	// do something to args
    	
    	var custom_args = {
    	  yearRange:			"-200:+100", // value to change
    	};
    	
    	args = extend(args, custom_args)
    	
    	// return
    	return args;
    			
    });
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.