Limit past dates and time of day selection on Gravity Forms

If you are using Gravity Forms, have a datefield and want to limit the time of day it can be selected (e.g. If you had a shop and only wanted to allow delivery on the same day if orders were before 1pm) , using a combination of a few bits of code, you can easily limit selections.

The code snippet at the bottom allows you to limit past / previous days or dates, limit the time that the user can select the current day, and also choose the amount of days in advance that the user can select.

The first thing you want to do after you add your datefield to your gravity form is create an HTML block and then place the below snippet it, you will then need to adjust the #input_X_Y to suit your form and field ID, so if you form is 1, and the datefield is 10, the code would be #input_1_10.

To adjust the time of day the same day is allowed to be selected, adjust the 780 in ((hour*60 + minutes) >= 780) to suit your preferred cut-off time, and for our North American counterparts, you might want to change dateFormat: ‘dd/mm/yy’, to something ridiculous like having the month appear before the day 😉

You can also adjust the minDate and maxDate to any value you like, perhaps you don’t take bookings or orders without 24/48 hours notice, so you could add +1d or +2d, and perhaps you only want to have 2 months past the current month, so +2 for maxDate.

If you are using Enable legacy markup for your form, you will have the old style field showing, but if you use the new gravity forms styles, it might not show styled at all, in that case you may have to include some styles of your own.

<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#input_X_Y").datepicker( { 
									  dateFormat: 'dd/mm/yy',
									  changeMonth: true,
									  changeYear: true,
									// Set min date to today
									  minDate: "+0D",
									// Set max date to 2 months past
									  maxDate: "+2M",
									  constrainInput: true
								  });

									// Check time
								  var currentdate = new Date();
								  var hour = currentdate.getHours(); 
								  var minutes = currentdate.getMinutes();

									// if time is after 13:00 (1pm) change allowed date to tomorrow.
								  if ((hour*60 + minutes) >= 780) {
									  currentdate.setDate(currentdate.getDate() + 1);
									  $( "#input_X_Y" ).datepicker( "option", "minDate", currentdate);
								  }     
						
								});
</script>

Creating beautiful websites since 2006