Date

Date and time picker

Demo

Basic example

{ "type": "date", "label": "Select date", "value": "{{eta}}", "description": "Click to open a date picker" }

Format and time example

{ "type": "date", "label": "Select date and time", "value": "{{eta}}", "extraSettings": { "format": "DD, MMMM Do YYYY, h:mm:ss a", "enableTime": true }, "description": "DD MMMM Do YYYY, h:mm:ss a" }

Attributes

Attribute	Type	Description
type	string	Type expected is date.
defaultValue	string	See Formats. Section below.

See section Common attributes.

Extra attributes

Attribute	Type	Description
enableTime	boolean	Allow selection of hour and minutes
timeInterval	boolean	Selectable time list divided by timeInterval. Default is 15
timeFormat	string	Format of the time which will be used for rendering in the time selection.
format	string	Date will be rendered using this format. See the Formats section below
maxDate	string	Maximum selectable date. See the Formats section below
minDate	string	Minimum selectable date. See the Formats section below
minDateErrorMessage	string	Custom error message for minDate validation
maxDateErrorMessage	string	Custom error message for maxDate validation

Formats

This component uses date values in different formats:

• today current date
• PNumPeriod relative date, where P is fixed, Num is any number and Period is a letter correspondig to Day, Month or Year. For example:
  • P-12D means subtract 12 days from the current date
  • P2M means add 2 month to the current date
  • P15Y means add 15 years to the current date
• 2018-03-21 exact date

In order to format values this component uses Moment.js string format.
For example: YYYY-MM-DD, D/M/YY or dddd at HH:mm

For using date formatting inside expressions, see section Expressions.

When to use it

Use it to select oredit dates, with or without times. Allows dates and times to be added or edited in a human readable way with configurable formats, including picking dates and times from a calendar.