HTML 5 Date and Time Control

HTML5 Basics - Part 21

Forward: In this part of the series, we look at HTML 5 Date and Time Control.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 21 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links of the other parts of the series are given at the end of this tutorial. In this part of the series, we look at HTML 5 Date and Time Control.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The datetime State
The input control can have the “datetime” value (state) for the type attribute. This means the user should type in the date and time related to an event.

Global and Local Date and Time
Global date and time, also known as UTC or GMT is the date and time in the country, Britain. Local date and time is the date and time in your own country. So, people in different countries have different date-time.

Format of Date and Time
The format for the date and time is,

    Year-Month-MonthDayTHour:Minutes

An example is,

    2011-05-15T13:09

The year consists of four digits. Then you have the hyphen. The month consists of two digits (a single digit is preceded by zero) from 1 to 12. Then you have the hyphen. The month day is a two-digit number (a single digit is preceded by zero) from 1 to 31. Then you have T to separate the date part from the time part. The hour consists of two digits (a single digit is preceded by zero) from 0 to 23. We are dealing with the 24-hour clock here, so midnight is zero O’Clock. The minutes consist of two digits (a single digit is preceded by zero) from 0 to 59.

Difference between Global and Local Date and Time
Global date and time ends with an uppercase Z. Local date and time does not have the uppercase Z ending. Also, the type value for global date and time for the input control is, “datetime” while the type value for the local date and time is, “datetime-local”.

An example of a global datetime input control is,

    <input type= "datetime" name="agdate">

The value the user types should end with an uppercase Z, e.g. 2011-05-15T13:09Z.

An example of a local datetime input control is,

    <input type= "datetime-local" name="aldate">

The value the user types should not end with an uppercase Z, e.g. 2012-11-03T22:17.

That is it for this part of the series. We stop here an continue in the next part

Chrys

Broad Network

HTML 5 Date and Time Control

HTML5 Basics - Part 21

Introduction

Related Links

Comments