You are viewing limited content. For full access, please sign in.

Question

Question

Only allow future dates in date field

asked on October 21, 2019

Is there any way to configure the date field in forms to only accept dates in the future? We want to prevent users from accidentally entering a date earlier than the current date. 

0 0

Replies

replied on October 21, 2019 Show version history

First, in the java script section on the form, add the following code:

$(document).ready(function(){
	var todaysDate = new Date();	// Get today's date.
	
	// Get today's date.
	var year = todaysDate.getFullYear();			// yyyy
	var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2); // mm
	var day = ("0" + todaysDate.getDate()).slice(-2);	// dd
	
	var dtToday = (year + "-" + month + "-" + day);	// Results in yyyy-mm-dd
	
	// Now set the max date value for the calendar to be that date.
	$(".Past input").attr('max', dtToday);
	$(".Future input").attr('min', dtToday);
});

Next in the layout tab, select the date field, click the advanced tab, and put Future in the CSS class for the fields that you would like to like to be future dated. I also normally use Past in the CSS class for the field for the past dated as well. If you already have a CSS class or need to add additional classes just put a space between the ones you need.

0 0
replied on October 22, 2019

Hi Michael,

I added the code and put Future in the CSS class field.

 

However, it's still letting me pick a date from the past. 

 

Am I missing something? Does the code need to be modified to just use future dates? The only thing I changed was for the results to appear as mm-dd-yyyy

 

$(document).ready(function(){
    var todaysDate = new Date();    // Get today's date.
     
    // Get today's date.
    var year = todaysDate.getFullYear();            // yyyy
    var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2); // mm
    var day = ("0" + todaysDate.getDate()).slice(-2);   // dd
     
    var dtToday = (year + "-" + month + "-" + day); // Results in mm-dd-yyyy
     
    // Now set the max date value for the calendar to be that date.
    $(".Past input").attr('max', dtToday);
    $(".Future input").attr('min', dtToday);
}

 

 

Tiffany

0 0
replied on October 22, 2019

Are you getting any errors? Press F12 on the page, select the console tab, and see if there are any messages there.

The date does need to be in yyyy-mm-dd format because of the way that the date is handled with the max and min values, but it looks like you only changed the comment on that line.

0 0
replied on October 22, 2019

It's fixed now. I was getting this error in the console:

 

Had to add a ) at the end.

 

Thanks for your help!

Tiffany

0 0
replied on October 22, 2019

Thanks, must have missed that in the copy and paste. Edited that into the post above in case someone else also needs it.

0 0
replied on March 30

Michael,

How would I modify this code to show only 12 days in the date picker? 

For context, our transportation department doesn't want users to schedule trips any farther than 12 days in advance of the current date.

 

Thank you,

Cathy

0 0
replied on March 31

I would suggest using a different class. In this case, I will use EventDate. 

 

 

$(document).ready(function(){
	var todaysDate = new Date();	// Get today's date.
	
	// Get today's date.
	var year = todaysDate.getFullYear();			// yyyy
	var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2); // mm
	var day = ("0" + todaysDate.getDate()).slice(-2);	// dd
	
	var dtToday = (year + "-" + month + "-" + day);	// Results in yyyy-mm-dd
	
	// Now set the max date value for the calendar to be that date.
	$(".EventDate input").attr('min', dtToday);
	
	var d = new Date();
	d.setDate(d.getDate() + 12);
	// Get today's date.
	var year = d.getFullYear();			// yyyy
	var month = ("0" + (d.getMonth() + 1)).slice(-2); // mm
	var day = ("0" + d.getDate()).slice(-2);	// dd
	var maxDate = (year + '-' + month + '-' + day);
	$(".EventDate input").attr('max', maxDate);
});

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.