HTML5: Calendar and time

This entry is part 20 of 34 in the series HTML5

Before HTML5, we would use jqueryUI to create a calendar widget for user to pick a date and time.

You can refer to this earlier post regarding jqueryUI datepicker.

HTML5 offers the following date and time options:

  • Date and time
  • Date and time local – set to your local time with no UTC
  • Date
  • Time
  • Month
  • Week
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Date & Time</title>
</head>
<body>
<form>
    <label for='datetime_id'>Date & Time</label>
    <input required type='datetime' id='datetime_id' name='datetime'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='datetime_local_id'>Date & Time Local</label>
    <input required type='datetime-local' id='datetime_local_id' name='datetime-local'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='date_id'>Date</label>
    <input required type='date' id='date_id' name='date'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='time_id'>Time</label>
    <input required type='time' id='time_id' name='time'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='month_id'>Month</label>
    <input required type='month' id='month_id' name='month'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='week_id'>Week</label>
    <input required type='week' id='week_id' name='week'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>
Series Navigation<< HTML5: Search box
HTML5: Date and time implementions in different browsers >>