Restrict Calendar Form Entry to Current Date or Later

Hello,

  1. I have a form with a calendar but want to restrict the input to today’s date or later.

  2. I would also like the date entry to be required in order to submit the form.

Thanks!

Link:
https://preview.webflow.com/preview/imonglist?preview=af3afcdacc9ea388532d68d689dd6adf

Hi @rhami :smile:

Try the min-date attribute

example:

<input type="date" name="bday" min="2000-01-02">

Thanks @PixelGeek ,

But is there a way to use the min attribute to constantly change to the present date (ie. min=“present”), or another solution? Your method would require me to change the min date every day because I want the min date to be whatever day it currently is.

Are you looking for something like this?

http://date-picker.webflow.io/

No what I want is this:
If the user picks a date prior to the current date and clicks submit, the form should return an error because the date picked is in the past.

In the example PixelGeek gave you the input field doesn’t allow a user to pick a date before the current date.

We put together some code to update the date dynamically. If you use the script below you can achieve the same result. (thank @bartekkustra for most of the work)

Here is the link to the public page of the example above. Feel free to clone it. :smile:
https://webflow.com/website/Example-of-a-Date-input-field-with-custom-JS

<script>
$(document).ready(function() {
	var today = new Date();
	var dd = today.getDate();
	var mm = today.getMonth()+1;
	var yy = today.getFullYear();
	if (dd<10) {
		dd = '0' + dd;
	}
	if (mm<10) {
		mm = '0' + mm;
	}
	var rightnow = yy + '-' + mm + '-' + dd;
	$('#date-withminvalue').attr('min', rightnow);
});
</script>

Place this script in the custome code section of the page for the area before the </body> tag
You will notice that the input field in the example has an id equal to “date-withminvalue” that id is referenced in the code provided.

Make sure that the id on your input field and the reference in the script match. (excluding the ‘’ and excluding the #)

Hope this helps

3 Likes

can’t help you with the date, but I noticed your Submit button
– you have a Hover that changes the Border width, your background image jumps the height of the width…

cheers,
Mike

1 Like

Thanks @PixelGeek,

Yes actually that is what I’m looking for kinda…on the desktop version it doesn’t allow me to choose a previous date however on mobile it does so that’s strange.

Thanks @AlexN,

This works on the desktop version however when I try it on my iPhone it lets me choose a previous date…

Any luck?

  1. The mobile version still lets me pick past dates.

  2. How do I make it so that a date is required?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.