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.

Properties

Label	Description	Type Name
Label	The label for this field.	LABEL
Show Label	Whether 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
Hint	Additional 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 information	HINT
Required	Whether or not the field is required to have a value to pass validation.	REQUIRED
Default	The 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.	DEFAULT
Error Message	The error message that will be displayed if this field fails its validation.	ERRMSG
Width	The display width of the field. The value matches a CSS class, which actually sets the width.	WIDTH
Date Format	The 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.	FORMAT
Date Separator	A 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	SEPARATOR
Range	Restrict 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.	RANGE
Shortcuts	Shortcuts 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	SHORTCUTS
Show Time	Whether 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 Date	Set true to turn the date range field into a single date/time input field.	SINGLEDATE
Validation Function	A 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; }`	VALFUNC
Default Function	A 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; }`	DEFFUNC
Handlers	A 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 value	HANDLERS
Read Only	Display the field as read only	READONLY
Additional Styling Modifier	An optional CSS modifier for the field. See Common Field Properties for an example	ADDITIONALSTYLINGMODIFIER
Documentation	Add 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 example	DOCUMENTATION

Formatting Dates

	Token	Output
Month	M	1 2 ... 11 12
	Mo	1st 2nd ... 11th 12th
	MM	01 02 ... 11 12
	MMM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
Quarter	Q	1 2 3 4
Day of Month	D	1 2 ... 30 31
	Do	1st 2nd ... 30th 31st
	DD	01 02 ... 30 31
Day of Year	DDD	1 2 ... 364 365
	DDDo	1st 2nd ... 364th 365th
	DDDD	001 002 ... 364 365
Day of Week	d	1 2 ... 5 7
	do	0th 1st ... 5th 6th
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
Day of Week (Locale)	e	0 1 ... 5 6
Day of Week (ISO)	E	1 2 ... 6 7
Week of Year	w	1 2 ... 52 53
	wo	1st 2nd ... 52nd 53rd
	ww	01 02 ... 52 53
Week of Year (ISO)	W	1 2 ... 52 53
	Wo	1st 2nd ... 52nd 53rd
	WW	01 02 ... 52 53
Year	YY	70 71 ... 29 30
	YYYY	1970 1971 ... 2029 2030
Week Year	gg	70 71 ... 29 30
	gggg	1970 1971 ... 2029 2030
Week Year (ISO)	GG	70 71 ... 29 30
	GGGG	1970 1971 ... 2029 2030
AM/PM	A	AM PM
	a	am pm
Hour	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 11 12
	hh	01 02 ... 11 12
Minute	m	0 1 ... 58 59
	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
	ss	00 01 ... 58 59
Fractional Second	S	0 1 ... 8 9
	SS	0 1 ... 98 99
	SSS	0 1 ... 998 999
Timezone	Z	-07:00 -06:00 ... +06:00 +07:00
	ZZ	-0700 -0600 ... +0600 +0700
Unix Timestamp	X	1360013296

Example - Single Date

This example date range field has been set up to only display a single date input. Time selectors have been enabled. It includes a label, a hint, and has its default set as {"date1": "2022-01-28T11:00:00Z"}. Date formatting has been set as YYYY-MM-DD [at] HH:mm.

A guidance text field has been added below the date picker. It is updated using handler function to display the actual value that will be submitted in the date range field.
Layout
1. This is the label
  This is the field's hint
Example - Date Range

This example date range field has been set up to let the user select a range. Time selectors have been disabled. It includes a label, a hint, and has its default set as {"date1": "2022-01-28","date2": "2022-02-10"}. Date formatting has been set as YYYY-MM-DD. All shortcuts have been enabled.

A guidance text field has been added below the date picker. It is updated using handler function to display the actual value that will be submitted in the date range field.
Layout
1. This is the label
Example - Default Function

This example date range field uses the same formatting as above. The field's default function uses the Moment.js library to set the time "now" as the start date and one week from "now" as the end date.

Here's the default function:
function(helper, defaultValue, currentValue) { var theValue; if (currentValue) { theValue = currentValue; } else { theValue = { 'date1': moment().format(), 'date2': moment().add(1, 'weeks').format() }; } return theValue;

This website uses cookies

Properties

Formatting Dates

Example - Single Date

Example - Date Range

Example - Default Function

Was this page useful?