Question

Prevent user from selecting date greater than today

Forms

Updated August 10, 2020

asked on December 15, 2015

I'm trying to disable all dates in the future in the pop-up date field. I'm trying this code:

$(function() {
  $(document).ready(function () {
    
   var todaysDate = new Date(); // Gets today's date
    
    // Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
    
    var year = todaysDate.getFullYear(); 						// YYYY
    var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);	// MM
    var day = ("0" + todaysDate.getDate()).slice(-2);			// DD

   	var maxDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
    
    // Now to set the max date value for the calendar to be today's date
    $('.InfDate input').attr('max',maxDate);
 
  });
});

found from this question. But for some reason it isn't working. Would anyone be able to help? I've made the CSS class for the date picker "InfDate". I changed the format to match YYYY-MM-DD. But ideally I would like to change it back to MM/DD/YYYY.

Thanks,

David

2 0

Answer

SELECTED ANSWER

replied on December 15, 2015 • Show version history

Hi David,

The code you found will help you accomplish everything you're trying to do. It will both limit the maximum range to today's date and the format will remain in the MM/DD/YYYY pattern.

I was able to verify the code works correctly, below are screenshots of the test I performed. You should check to see if the code was copied into the correct area.

In the first screenshot, I gave my date field the class "InfDate"

In the second screenshot, I copied the code you posted and removed the line numbers.

In the third screenshot, I previewed the form and all dates beyond today are greyed out.

In the fourth screenshot, the date field shows the date I picked out in the MM/DD/YYYY format.

2 0

View 1 previous reply

replied on December 15, 2015

Wesley,

Thanks for the help! I just created a new blank Form and it worked perfectly as you show above. But when I try and implement it into my current Form, it still doesn't work. Should I be placing the code somewhere specific?

0 0

replied on December 15, 2015

Interesting, the code should work if you put it into the JavaScript section. Maybe you have other pieces of code at work in that form? If so, perhaps that's where you're running into an issue.

You can always rebuild the form carefully, step by step, previewing it each time you add additional functionality to test the new addition, this is a pretty useful troubleshooting technique.

1 0

replied on December 15, 2015

I got it working. I took out all the code in the javascript section, then added the piece for the date. Then added back the code piece by piece ensuring it worked the entire time. Literally changed nothing in the end... but for some reason it is working now. No idea..

Thanks!

1 0

replied on December 15, 2015

awesome, I'm glad it worked!

0 0

Replies

replied on August 10, 2020

This thread was really helpful! I needed to limit my date picker to only the next 3 future days so I used David's code and added

todaysDate.setDate(todaysDate.getDate() + 3);

right below

   var todaysDate = new Date(); // Gets today's date

You can adjust accordingly depending on your needs.

0 0

You are not allowed to follow up in this post.

Question

Question

Prevent user from selecting date greater than today

Answer

Replies

Sign in to reply to this post.