Date time

The datetime component supports the selection and formatting of dates, times and timestamps.

It is based on the activeFormat components, and is similar to the activeFormat date functionality, but provides the following enhancements:

  • Support for timestamps as well as dates.
  • Use of generic formats (short, medium, long and full) rather than format names (such as en-little-endian-short).

The components are invoked using the activeFormat conventions, with a datetime class identifying the datetime component.

The date time type follows a recipe which identifies the lowest date part for the datetime (year, month, day, hour, minute), with an optional granularity. For example "minute5" means "a timestamp to the nearest 5 minutes". More than one type is permitted, separated by a hyphen. For example, "day-minute15" means "a whole day, or a timestamp to the nearest 15 minutes". In this case, an time button is provided to allow the user to indicate that they want to use the "minute" type rather than the "day" type. This is useful in, for example, a calendaring scenario to identify an all day task. The following date time types are permitted

  • day – a date
  • minute – a timestamp to the nearest minute
  • minute5 – a timestamp to the nearest 5 minutes
  • minute15 – a timestamp to the nearest 15 minutes
  • day-minute – a whole day, or a timestamp to the nearest minute
  • day-minute5 – a whole day, or a timestamp to the nearest 5 minutes
  • day-minute15 – a whole day, or a timestamp to the nearest 15 minutes

The default is "minute5".

The synonyms date and timestamp can be used for day and minute, respectively.

The date time type must follow immediately after the datetime class, and is passed through as the 'format' within the activeFormat component. However, an additional formatting class can be used of the form "format-datestyle-timestyle", where datestyle and timestyle are short, medium, long or full. If only one is given, it is assumed to apply to both. This is similar to the formats used by the localization routines. The default is format-medium-short. This outputs the following formats.

Part Style Example
date short 02/01/10
  medium 2 Jan 2010
  long 2 January 2010
  full 2 January 2010
time short 12:34
  medium 12:34:56
  long 12:34:56
  full 12:34:56

If the date time picker has a time component, it starts in the hour view. If not, it starts in the day view. You can force the date time picker to start in a different view using the datetime-start-view class, where view is one of year, month, day, hour or minute. datetime-start-year is useful for date-of-birth pickers.

The format alters the display of the date and time, but not its storage, which is always in ISO 8601 format.