PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

jQuery DatePicker No Weekends

  1. I have used the gform_post_render function to create a custom datepicker using the minDate option for selection of 1 day in advance:

    http://www.gravityhelp.com/documentation/page/Gform_post_render

    Is there a way that I can exclude weekends? I only want the user to be able to select weekdays with one day ahead. I have tried using the beforeShowDay: $.datepicker.noWeekends but that seems to conflict with minDate

    Here is my form: http://www.discountdumpsters.com/shop/30-yard-dumpster/

    And here is my code:

    <script type="text/javascript">
    jQuery(document).bind('gform_post_render', function(){
    	// destroy default Gravity Form datepicker
    	jQuery("#input_1_1").datepicker('destroy');
    	// create new custom datepicker
    	jQuery("#input_1_1").datepicker({ defaultDate: '+1d', minDate: '+1d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: 'http://www.discountdumpsters.com/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
    });
    </script>

    Any help would be appreciated...thanks!

    Posted 12 years ago on Monday October 22, 2012 | Permalink
  2. The date picker is the default jQuery UI datepicker. Documentation for that can be found here http://jqueryui.com/datepicker/

    You can include some jQuery settings in your template page to limit the date range, etc. That should be all you need to do. Examples are provided at that URL.

    Posted 12 years ago on Monday October 22, 2012 | Permalink
  3. I've had a similar need but rather than destroy the existing datepicker bindings I found you can add options to input elements after they've been initialized with a datepicker by adding an option to it on the load event of the window object rather than the ready event of the document object like most people do. Also, I only wanted to block out sundays in my case but my code can be generalized for blocking any day of the week on a recurring basis:

    <script type="text/javascript">
    function noSundaysOrSaturdays(date) {
    	var weekday=new Array(7);
    	weekday[0]="Sunday";
    	weekday[1]="Monday";
    	weekday[2]="Tuesday";
    	weekday[3]="Wednesday";
    	weekday[4]="Thursday";
    	weekday[5]="Friday";
    	weekday[6]="Saturday";
    	//console.log(weekday[date.getDay()]);
    	if(weekday[date.getDay()] == 'Sunday') {
    		return [false, '', 'Not open on Sundays'];
            }else if(weekday[date.getDay()] == 'Saturday') {
                     return [false, '', 'Not open on Saturdays'];
            }
    
    	return [true];
    }
    jQuery(window).load(function(){
    	jQuery('.hasDatepicker').datepicker('option', 'beforeShowDay', noSundays);
    });
    </script>
    Posted 12 years ago on Wednesday November 14, 2012 | Permalink
  4. Thank you for sharing your solution.

    Posted 12 years ago on Saturday November 17, 2012 | Permalink