Date & Time Input field in HTML 5

Date and Time Input fields in HTML 5 are used for formatting dates and times, also for providing date and time picker, without using any third party libraries. You can use it only for time and also only for date, or you can combine both. You can use it for week selection, or month selection or you can limit selection by specifying minimum and maximum selection months.

The Date and Time input fields allow the user to easily select dates and times. There are multiple versions of this input type, used for selecting dates, weeks, months, and times.


Date Input filed

Simple date field with date picker.
[html] <input type="date" value="2011-12-22">


Time Input filed

Simple time input field.

[html] <input type="time" value="01:30" step="3600">

Local Date Time Input filed

Simple Local Date Time input field
[html] <input type="datetime-local" value="2011-12-22T01:30">


Week Input filed

Simple Week input field with example code snippet.
[html] <input type="week" value="2011-W11">


Month Input filed

Simple Month input field with example code snippet.
[html] <input type="month" value="2011-07">


Month Input filed with min & max

Month input field with Minimum and maximum values.

[html] <input type="month" value="2011-07" min="2011-01" max="2011-12">

If you want to learn about other input fields in HTML5 then read this -> HTML5 Form new input field types. If you want to learn about form validations read this -> HTML5 form validation

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.