HTML5

HTML5 Date Time Components Example

The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and not all browsers support it (i.e mozilla firefox).

Chrome fully supports the following components, while IE and Firefox still don’t. To check if your browser supports this component check here.

We take these elements in consideration because they represent input elements of html and thus we get get data from the user.

The approach we’ll use is going to be getting to know all elements of date and time we can use, and then do some styling to enhance usability.
 
 

1. Basic Setup and Application

Below, we take a look at the necessary setup and the basic application of this element in html.

1.1 Basic Setup

First, go ahead and create a new html file with the basic syntax in it like this:

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Date and Time Components</title>
</head>
<body>

	<!-- STYLE  SECTION -->
  <style type="text/css">

  </style>

	<!-- HTML SECTION  -->

</body>
</html>

1.2 Basic Application

The date and time component can be applied by giving the input a datetime-local type.

<!-- HTML SECTION  -->
<!-- Example of Date and Time -->
<input type="datetime-local" value="none" />

You could once use the input type datetime to show this component but Chrome doesn’t support that anymore.

The datetime component would look like this:

Basic Datetime Component in HTML
Basic Datetime Component in HTML

As you can see, the initial view consists of mm/dd/yyyy hh:mm well-known format, while the hover view adds controls.

The dropdown icon (the last item you see) brings up a simplified calendar-like section for you to choose the date.

The dropdown component of date!
The dropdown component of date!

That was the most basic application/type of date and time components. Now lets see what other types there are.

The dropdown left and right arrows navigate thorugh months white the dot in the middle sets the current date in the input.

2. Data and Time Input Types

In this section, we will see other cases of date or time input types.

2.1 Unristricted Date Input

For a typical date choosing option with no restrictions at all, you could just have the date input type.

<!-- HTML SECTION  -->
<!-- Example of Date Unrestricted -->
<input type="date" value="none" />

The view in the browser would be:

Date HTML5 Component - Not Restricted
Date HTML5 Component – Not Restricted

We say not restricted, because you can restrict/limit the choice of dates the user can make in case you want.

2.2 Ristricted Date Input

If you want to limit date choice just add a min and max attributes and values after the date input type like so:

<!-- HTML SECTION  -->
<!-- Example of Date Restricted -->
<input type="date" min="2012-01-01" max="2013-01-01">

The view in the browser would be:

Date HTML5 Component – Restricted
Date HTML5 Component – Restricted

Look at the year choices, there are only two, 2012 and 2013, the ones we decided as limits.

2.3 Month Input Type

If you want a monthly focused input, just add the month keyword inside the type of input like below:

<!-- HTML SECTION  -->
<!-- Example of Month Choice -->
<input name="month" type="month">

The view in the browser would be:

Month HTML5 Component
Month HTML5 Component

Now you get months to choose, instead of dates, and the input box is kinda changed to fit the month name.

2.4 Week Input Type

Alongside with date and month, you could also have an input type week which will show the week number of the year.

<!-- HTML SECTION  -->
<!-- Example of Week Choice -->
<input name="week" type="week">

The view in the browser would be:

Week HTML5 Component
Week HTML5 Component

Now you get a slightly different view of the dropdown, which allows you to easier choose weeks highlighting days.

2.5 Time Input Type

Just like you want to get date from input, you might also want to get time, and you do that with the time input type.

<!-- HTML SECTION  -->
<!-- Example of Time Choice -->
<input name="time" type="time">

The view in the browser would be:

Time HTML5 Component
Time HTML5 Component

As simple as that, you get a time information from the user with this input type.

Another thing you can do with the time component is give it some parameters like min and max time and also a step attribute where you define how minutes should a click of the chevron/arrows step forward/backward. Look at the code:

<!-- HTML SECTION  -->
<!-- Example of Time Choice - 15 min intervals -->
<input type='time' min=9:00 max=17:00 step=900 >

It sets a minimum and maximum time limit that you can choose and also a 900s (15min) step per click.

The time intervals on up and down icons click would look like this:

Custom Time Component
Custom Time Component

3. A Styling Example

The above components in html were not styled at all, that was their default style. Lets style one of the components.

First, give the date input element a class of date.

<!-- HTML SECTION  -->
<!-- Example of Time Choice -->
<input class="date" type="date" value="none" >

Now, add some styling like font family, size, color, width and height, border and padding.

  .date {
  	width: 10em;
  	height: 2em;
  	border: 0.2em solid #2db0e6;
  	border-radius: 0.5em;
  	padding: 0.1em 0em 0.1em 1em;
  	vertical-align: middle;
  	background-color: #ebf5ff;
  	color: #727272;
  	font-size: 1.2em;
  	font-family: "Lato";
  }

The styled date input would look like this:

Styled Date Component
Styled Date Component

However, you will notice that you cannot still style the controls icons or the dropdown because browsers won’t read your changes.

4. Conclusion

To conclude, we can say that as an input type, date and time inputs are really easy and efficent to use to get information from users. Remember the basic types: datetime-local, date, month, week, time and their custom forms.

You can also add styling on date and time components, but that is optional as long as it has a default style. Whenever you want to get information from the inputs, do add the name keyword and give it an understandable name that you can refer.

That was all, feel free to try all of the components by yourself, or download the code below.

5. Download

Download
You can download the full source code of this example here: HTML5 Date & Time Components

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button