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

html date html-input
MJ X picture MJ X · Jun 13, 2013 · Viewed 151.7k times · Source

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?

Answer

Stanislav Terletskyi picture Stanislav Terletskyi · Jun 13, 2013

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

Related questions

How to set default value to the input[type="date"]

I have tried (JSFiddle): <input type="date" value="2012-3-23"> but it doesn't work, how can I set the default value?

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to set input type date's default value to today?

The HTML5 input types are great, Opera's new built-in date picker is a breeze, and Chrome has at least supported the new input type with a spin-wheel implementation. But is there any way to set the default value of the …

Read More