If you were using Internet Explorer 6 or 7 on a Windows machine or Opera 9, this demo would actually work!
Intro
Validation
Date and time types
Range control
Repetition
Calculated fields
Datalist
Autofocus
Prefilling forms
Roundtripping data
Input mode

Datetime types

WF2 introduces several new form field types for entering date and time data.

The user interface for these controls are expected to be platform dependant, that is they mimick the standard date/time controls for each platform.

Here is a date control:

The HTML looks like this:

<input type="date">

An initial value should be given in ISO-format, like this: 2004-08-31. This is also the format in which the value will be submitted to the server.

The HTML looks like this:

<input value="2004-08-31" type="date">

A datetime control is a combined date and time input control. While it looks like two separate fields for the user, in HTML it is declared as single control of type datetime-local.

The HTML looks like this:

<input type="datetime-local">

There is also a time-control:

The HTML looks like this:

<input value="08:45" type="time">

There is a week selector:

The user can select a week within a specific year, according to the ISO week numbering. The HTML looks like this:

<input value="2004-W42" type="week">

Lastly, there is the month selector, for a specific month in a specific year. This is primarily used for entering credit card expiration dates:

The HTML looks like this:

<input type="month">

Datetime formats

The initial datetime should be given in ISO-format, which is formatted like this: 2004-08-31T10:22

This field is declared with a datetime value:

 
Current value: 2004-08-31T10:22
<input value="2004-08-31T10:22" type="datetime-local">

The datetime-local assumes that the input is in the local timezone.

The UTC datetime-control (type="datetime") is the same, except that the value is defined and submitted in UTC time (which is basically the same as GMT).


Current value: 2004-08-31T10:22Z

The HTML looks like this:

<input value="2004-08-31T10:22" type="datetime">
X