Question

I want to prevent user from picking a date greater than today

Forms

Updated December 11, 2019

asked on April 14, 2015 • Show version history

I have a playground inspection form. The inspection date defaults to today's date, but the user must also be able to pick a date in the past. How can I ensure that the user can't pick a date in the future, i.e. greater than today?

0 0

Answer

SELECTED ANSWER

replied on April 14, 2015

Another method to accomplishing this task is to change the calendar’s maximum selectable date to be today’s date. JavaScript is able to do this easily, and I’ve given an example below which only allows users to select dates on and before today’s date.

It’s worth noting that in order for this code to work, you’ll need to add an inspectionDate class to your date field. To do this, go to the “Edit” tab in your form (this is where you added input fields to your form, including the date field). Select the date field you wish to modify, select “edit” when the menu appears, select the “Advanced” tab, and type “inspectionDate” in the “CSS class” area. A screenshot of this area is also available below:

You can add the following code to your form by selecting the “CSS and JavaScript” tab, locating the JavaScript coding area, and pasting the code below into this area.

$(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
    $('.inspectionDate input').attr('max',maxDate);
 
  });
});

This script grabs today’s date, puts it into a “YYYY-MM-DD” format, and sets it as the calendar’s maximum selectable value.

I hope this helps! Feel free to respond if you have any other questions, or if I can offer further assistance.

9 0

View 7 previous replies

replied on April 14, 2015

Hi Madison. I tried this solution and it works perfectly. Thanks a million for your assistance.

0 0

replied on March 1, 2017

Madison,

I have a spin-off of the question above. I want to limit the Date of Birth field to be 18 years and older. I would like the date to display with the max year being 18 years prior to today's date. For example today is March 1, 2017 so the user would be unable to select a date after 03/01/1999. How was that JavaScript look? I appreciate any help.

Thank you,

Vanessa Huynh

0 0

replied on March 1, 2017

Hi Vanessa,

The change needs to happen on line 8. Change the line to:

 var year = todaysDate.getFullYear()-18;

1 0

replied on March 2, 2017

Thank you Edgar! That worked perfectly!

0 0

replied on March 2, 2017

You're welcome!

0 0

replied on October 10, 2019

Hi Edgar,

If I wanted to format date to MM-DD-YYYY format, do I just need to change the order of line 8-10?

Thanks!

0 0

replied on October 10, 2019

Hi!

In more recent versions, format is controlled directly on the field options and not in JavaScript (not with this script at least). So, there's no need to change the script for what you need.

When you go to the date field properties, you just need to change the date format and choose the one you need:

0 0

replied on October 10, 2019 • Show version history

Hi,

So on the javascript to prevent them from picking a date greater than today's, I would just leave that part out? I know I can do a date range with the newer Forms version, however I would want it to be no greater than current date always.

Thanks!

0 0

replied on October 14, 2019

Yes, that is correct. The code posted here works as it is, and you would need to set the date format on the field properties.

1 0

replied on December 11, 2019 • Show version history

In my case I would like to restrict the date field to any date prior to 1/1/20. (The form will be in use next year 2020). How do I modify the code you have in order to do that?

0 0

Replies

You are not allowed to reply in this post.

replied on April 14, 2015

See the following javascript code. Note that the date field is using the CSS class called nofuture.

$(document).ready(function () {
  var d = new Date();
  var di = $('.nofuture input').val().split("/");
  $('.nofuture input').change(function () {
    di = $('.nofuture input').val().split("/");
    if (d.getFullYear() - di[2] < 0) {
      if ($('.dateWarning').length == 0) {
        $('<p class="dateWarning">You cannot select a date in the future.</p>').insertAfter('.nofuture');
        $('.Submit').attr('disabled', true);
      }
    }
    else if ((d.getFullYear() - di[2] == 0) && (d.getMonth() + 1 - di[0] < 0)) {
      if ($('.dateWarning').length == 0) {
        $('<p class="dateWarning">You cannot select a date in the future.</p>').insertAfter('.nofuture');
        $('.Submit').attr('disabled', true);
        }
    }
    else if ((d.getFullYear() - di[2] == 0) && (d.getMonth() + 1 - di[0] == 0) && (d.getDate() - di[1] < 0)) {
      if ($('.dateWarning').length == 0) {
        $('<p class="dateWarning">You cannot select a date in the future.</p>').insertAfter('.nofuture');
        $('.Submit').attr('disabled', true);
        }
    }
    else {
      $('p.dateWarning').remove();
      $('.Submit').removeAttr('disabled');
    }
  });
});

You are not allowed to follow up in this post.

Question

Question

I want to prevent user from picking a date greater than today

Answer

Replies

Sign in to reply to this post.