[Skip to content]

Search our Site
Easysite Resource Centre
HTML5 Date

HTML5 Date

The Date Field element allows a date to be added to a Directory, using a calendar interface, and is designed for Web Apps built using HTML5. For example:

Forms module pop up date example screenshot v7

HTML5 Date element

1. Drag and drop the Date Field element into the appropriate location:

HTML5 date field icon

2. Configure the element. The following view will be presented:

[ Zoom ]
Directory html 5 date element configuration

Ž3. Edit/configure:


Enter an appropriate label for the element.  


Select whether the question and answers are displayed in two separate columns, or whether the answers sit under the question as rows in a single column. 

Physical Width

Enter the width of the answer box in percentage of the screen.


Check if required.

Show Time Controls

If required, check to add a time selector to the Date element.

Display Friendly Date

Check if required.

Default Value

If required, select to pre-populate the element with a date.

Note; this date is defined by selecting a number of days before after the current date.

Show in Detail Page

Check to ensure that the field and the data is shown when an administrator reviews an individual form response.

Show As

Select if the element and the responses are to render in the Records view when managing Entries. If the element is to display select whether or not is displays as a link to the full response.


If required, check to allow the administrator to sort records by this field.

Show Key/Value Pair

If required, check to display the question and the answers when viewing an individual form response.