Toggle menu

Date Range

This field has been deprecated because it doesn't meet accessibility standards. The Date Picker field (or two of them) can be used instead.

The date range field lets a user select either a single date or range between two dates. Dates can also include times (so the field could be set up so a user can only select a time range on a given day, rather than a date range, or a single time on a single day, or a date range including times).

The date and time selected will be displayed in the browser's locale, using the set format, but will always be stored using the ISO8601 date format in UTC.

The field can be set up so that only past or future dates (inclusive or exclusive of the current date) can be chosen. The field also includes a JavaScript validation function if you need to create more complex validation.

The moment JavaScript library is loaded with this field, making it available browser side. See the final example below.


LabelDescriptionType Name
LabelThe label for this field.LABEL
Show LabelWhether to show the label for this field or not. This property adds/removes a class on the field's label element. The styling itself is controlled by the site's stylesheet.SHOWLABEL
HintAdditional information displayed alongside the field to assist the user in completing it. The value of another field can be used by adding the field's name between # characters. See Common Field Properties for more informationHINT
RequiredWhether or not the field is required to have a value to pass validation.REQUIRED
DefaultThe date range to be used when the form is first loaded. This must be a JSON string that represents a map containing the key "date1" and optionally "date2". For example:

{"date1": "2016-11-29T11:00:00Z","date2": "2016-12-01T11:00:00Z"}
Dates should be in ISO8601 format, ie YYYY-MM-DDThh:mm:ssZ.

Dates will be converted to the default locale when they are displayed.
Error MessageThe error message that will be displayed if this field fails its validation.ERRMSG
WidthThe display width of the field. The value matches a CSS class, which actually sets the width.WIDTH
Date FormatThe format in which to display the selected dates and times. The format does not change the underlying data, which is always stored as UTC. The same format will be applied to both dates/times in a range.

The default is YYYY-MM-DD[T]HH:mm:ss

Also, unless you specify a time zone offset, Z or ZZ, parsing a string will create a date in the current time zone.

For example, YYYY-MM-DD HH:mm will parse as local time, YYYY-MM-DD HH:mm Z will parse as zero offset UTC. The complete set of supported tokens are listed below.   
Date SeparatorA simple string that is used to separate the dates when they are displayed.

For example the separator " TO " would appear as 2016-12-25T00:00:00 TO 2017-01-01T23:59:59
RangeRestrict the selection to particular date ranges The 5 options are:
    1: "Any": any date[s] are acceptable
    2: "Past": only date[s] before midnight today
    3: "Past+Today": only date[s] before midnight tomorrow
    4: "Future": only date[s] from midnight tomorrow
    5: "Future+Today": only date[s] from midnight today

Note, midnight is first thing in the morning.
ShortcutsShortcuts to help user select predefined ranges The four options are:
    1: "None": do not display shortcuts
    2: "Previous": display shortcuts for the past 3, 5 or 7 days and previous week, month or year
    3: 'Next": display shortcuts for the following 3, 5 or 7 days and next week, month or year
    4: "All": show all shortcuts  
Show TimeWhether time selection controls should be included in the date picker. If this property is set to false, selected dates will be midnight to 23:59:59.TIME
Single DateSet true to turn the date range field into a single date/time input field.SINGLEDATE
Validation FunctionA JavaScript function that can be used to provide custom field validation whenever the field value changes or the form is submitted. This function will be executed client-side, provided JavaScript is enabled in the browser, and repeated server-side.

For example:

function (helper, value) {
    var range;
    if (value.length > 0){
        range = JSON.parse(value);
       //Only Tuesdays are valid
        return moment(range.date1).isoWeekday() == 2;
    return true;
Default FunctionA JavaScript function that can be used to calculate the default field value. This function is executed server-side when the field HTML is generated and is useful when the DEFAULT property is insufficient.

For example:

function (helper, defaultValue, currentValue) {
    var theValue;
    if (currentValue) {
        theValue = currentValue;
    } else if (defaultValue) {
        theValue = defaultValue;
    } else {
        theValue = {'date1': '2016-11-27T15:12:00Z', 'date2': '2016-11-28T15:12:00Z'};
        theValue = JSON.stringify(theValue);
    return theValue;
HandlersA JavaScript function that is executed client-side whenever the page loads, or the field value changes. This function is useful for modifying the values of other fields based on an entered valueHANDLERS
Read OnlyDisplay the field as read onlyREADONLY
Additional Styling ModifierAn optional CSS modifier for the field. See Common Field Properties for an exampleADDITIONALSTYLINGMODIFIER
DocumentationAdd documentation to your field to help explain any complex functionality to future users. You might include information on what the field does and how it relates to other fields on the form. Notes added here are only ever visible in the Forms Designer, they can be searched for, viewed and downloaded from the action panel. See Common Field Properties for an exampleDOCUMENTATION

Formatting Dates

MonthM1 2 ... 11 12
 Mo1st 2nd ... 11th 12th
 MM01 02 ... 11 12
 MMMJan Feb ... Nov Dec
 MMMMJanuary February ... November December
QuarterQ1 2 3 4
Day of MonthD1 2 ... 30 31
 Do1st 2nd ... 30th 31st
 DD01 02 ... 30 31
Day of YearDDD1 2 ... 364 365
 DDDo1st 2nd ... 364th 365th
 DDDD001 002 ... 364 365
Day of Weekd1 2 ... 5 7
 do0th 1st ... 5th 6th
 ddSu Mo ... Fr Sa
 dddSun Mon ... Fri Sat
 ddddSunday Monday ... Friday Saturday
Day of Week (Locale)e0 1 ... 5 6
Day of Week (ISO)E1 2 ... 6 7
Week of Yearw1 2 ... 52 53
 wo1st 2nd ... 52nd 53rd
 ww01 02 ... 52 53
Week of Year (ISO)W1 2 ... 52 53
 Wo1st 2nd ... 52nd 53rd
 WW01 02 ... 52 53
YearYY70 71 ... 29 30
 YYYY1970 1971 ... 2029 2030
Week Yeargg70 71 ... 29 30
 gggg1970 1971 ... 2029 2030
Week Year (ISO)GG70 71 ... 29 30
 GGGG1970 1971 ... 2029 2030
 aam pm
HourH0 1 ... 22 23
 HH00 01 ... 22 23
 h1 2 ... 11 12
 hh01 02 ... 11 12
Minutem0 1 ... 58 59
 mm00 01 ... 58 59
Seconds0 1 ... 58 59
 ss00 01 ... 58 59
Fractional SecondS0 1 ... 8 9
 SS0 1 ... 98 99
 SSS0 1 ... 998 999
TimezoneZ-07:00 -06:00 ... +06:00 +07:00
 ZZ-0700 -0600 ... +0600 +0700
Unix TimestampX1360013296

Share this page

Facebook icon Twitter icon email icon


print icon