Streaming live at 10am (PST)

Restrict Calendar Form Entry to Current Date or Later


#1

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


#2

Hi @rhami smile

Try the min-date attribute

example:

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

#3

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.


#4

Are you looking for something like this?

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


#5

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.


#6

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


#7

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


#8

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.


#9

Thanks @AlexN,

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


#10

Any luck?

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

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


#11

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