CODEWITHSUNDEEP
htmldatehtml-input
MJ X
MJ X

Reputation: 9054

HTML5 pattern for formatting input box to take date mm/dd/yyyy?

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?

Upvotes: 32

Views: 207140

Answers (7)

pfrenssen
pfrenssen

Reputation: 5515

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.

Upvotes: 0

Renato Probst
Renato Probst

Reputation: 6054

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})'

Upvotes: 7

S Debasish Nayak
S Debasish Nayak

Reputation: 263

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.

Upvotes: 5

Hieu.Gi
Hieu.Gi

Reputation: 75

Try to use:

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

Upvotes: 1

Ramesh KC
Ramesh KC

Reputation: 589

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.

Upvotes: 1

Chan Chun Weng
Chan Chun Weng

Reputation: 896

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 />

Upvotes: 22

Stanislav Terletskyi
Stanislav Terletskyi

Reputation: 2112

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="" />

Upvotes: 72

Related Questions