32

I used jQuery datepicker and I want to restrict my input field with a HTML5 pattern if a user, instead of getting the date from jQuery datepicker, types the date.

How can I restrict my users with a HTML5 pattern so that they can just type the date in the form mm/dd/yyyy?

7 Answers 7

71

Easiest way is use read only attribute to prevent direct user input:

 <input class="datepicker" type="text" name="date" value="" readonly />

Or you could use HTML5 validation based on pattern attribute. Date input pattern (dd/mm/yyyy or mm/dd/yyyy):

<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" class="datepicker" name="date" value="" />
6
  • I don't know if I'm doing something wrong, but the regex you suggest doesn't work for me (at least on Firefox, HTML 5). I did a small adjustment and now it works: \d{1,2}\/\d{1,2}\/\d{4} Jun 23, 2021 at 13:51
  • Ok I was maybe wrong. I have two pages that are almost identical, but for one the pattern you posted doesn't work, while for the other one it does. This really bugs me (I am a real beginner about HTML) Jun 23, 2021 at 14:13
  • how to change the rendered date to yyyy/mm/day instead of mm/dd/yyyy? Dec 15, 2021 at 4:00
  • @JenuelGanawed Do you mean, how to change date format displayed using jQuery datepicker? If so, here is the docs Dec 21, 2021 at 14:14
  • Very confusing... I don't understand what pattern="\d{1,2}/\d{1,2}/\d{4}" does
    – Black
    Feb 9, 2022 at 12:47
22

I use this website and this pattern do leap year validation as well.

<input type="text" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" required />
2
  • Could I limit the date to only be from the past 80 years?
    – Qasim
    Jan 17, 2020 at 4:35
  • This is not handling leap years correctly. For example it considers 2021-02-29 to be valid, but this should not be the case since 2021 is not a leap year. It seems to consider every year to be a leap year.
    – pfrenssen
    May 2, 2021 at 13:35
7

I've converted the http://html5pattern.com/Dates Full Date Validation (YYYY-MM-DD) to DD/MM/YYYY Brazilian format:

pattern='(?:((?:0[1-9]|1[0-9]|2[0-9])\/(?:0[1-9]|1[0-2])|(?:30)\/(?!02)(?:0[1-9]|1[0-2])|31\/(?:0[13578]|1[02]))\/(?:19|20)[0-9]{2})'
5

Below pattern perfectly works in case of leap year and as well as with normal dates. The date format is : YYYY-MM-DD

<input type="text"  placeholder="YYYY-MM-DD" pattern="(?:19|20)(?:(?:[13579][26]|[02468][048])-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))|(?:[0-9]{2}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:29|30))|(?:(?:0[13578]|1[02])-31)))" class="form-control "  name="eventDate" id="" required autofocus autocomplete="nope">

I got this solution from http://html5pattern.com/Dates. Hope it may help someone.

1
  • 1
    I'm from the future. Getting false negatives with this in the year 2021, it considers dates such as 2021-04-30 as invalid.
    – pfrenssen
    Apr 30, 2021 at 20:47
1

pattern="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}"

This is pattern to enter the date for textbox in HTML5.
The first one[0-9]{1,2} will take only decimal number minimum 1 and maximum 2.
And other similarly.

1

Try to use:

pattern="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/\d{4}"
0

This regex does the standard ISO 8601 YYYY-MM-DD format for the years 1900-2099, taking into account leap years.

<input type="text" pattern="(?:19|20)(?:[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:29|30))|(?:(?:0[13578]|1[02])-31))|(?:[13579][26]|[02468][048])-02-29)" required />

All other examples seem to have some problem validating leap years, either not allowing the date February 29, or allowing this date in years that are not leap years.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.