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

Question

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

User · Answer

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.

User · Answer

I use this website and this pattern do leap year validation as well    lt 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   gt

User · Answer

Easiest way is use read only attribute to prevent direct user input     lt input class  datepicker  type  text  name  date  value    readonly   gt    Or you could use HTML5 validation based on pattern attribute   Date input pattern  dd mm yyyy or mm dd yyyy     lt input type  text  pattern   d 1 2   d 1 2   d 4   class  datepicker  name  date  value      gt

User · Answer

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

User · Answer

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

User · Answer

Try to use   pattern   0  1-9   12  0-9  3 01    0  1-9  1 012    d 4

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

Examples related to html

Examples related to date

Examples related to html-input