The DateTime component

A DateTime component lets users specify a date and/or a time interactively.

In addition to the properties and methods listed below, this component inherits properties and methods from the superclass Component. For example, any DataTime component has a label and tooltip property even though these are not explicitly listed here.

Properties

NameDescriptionDatatypeDefault
formatThe date and time format used for presenting the date captured by the component.String'yyyy-MM-dd HH:mm a'
enableDateWhether or not the date picker should be enabled.BooleanTrue
enableTimeWhether or not the time picker should be enabled.BooleanTrue
defaultDateThe default date selected when the value has not been edited. This shall follow the format of the component or you can use Moment.js functions such as moment()​.subtract(10, 'days') (which is not supported by the defaultValue property).String
datePickerThe date picker configurations.DatePickerConfigurationSee below
labelPositionPosition of the label with respect to the component. Can be 'top', 'bottom', 'right-right', 'left-right', 'left-left' or 'right-left'.String"top"
multipleWhether or not multiple values can be entered.BooleanFalse
timePickerThe time picker configurations.TimePickerConfigurationSee below

If you set the defaultValue property to specify the date selected by default, make sure to pass it in the right format (as specified in the format property). If you set both the defaultValue and defaultDate property, the defaultValue will be used as the default value. It is therefore advised to use the defaultValue instead of the defaultDate when not using Moment.js.

Testing

The defaultDate property does not work well with the Testing functionality because calling getSubmissionData on a DateTime component in a test-environment will return the defaultValue and not the defaultDate. Also, editing the value of a DateTime component with the testing functionality (using choose or type gestures) is not supported.

Methods

NameSyntaxDescription
setDateSelectionobj​.setDateSelection()Disables time selection and sets the format property to 'dd-MM-yyyy'.
setOutputAsobj.setOutputAs(outputType)Set the output type used by getSubmissionData. The default is a string. The value can be converted to a datetime object.

DatePickerConfiguration

The value of the datePicker property of a DateTime component shall be of type DatePickerConfiguration. It has the following properties:

NameDescriptionDatatypeDefault
disableSpecify what (ranges of) dates should not be selectable. For example: "2021-09-21, 2021-12-25 - 2022-01-03, 2022-02-01"String
disableFunctionDisable dates using this function. For example, disable all Mondays and Wednesdays using date.getDay() === 1 || date.getDay() === 3. See this link for more information.String
disableWeekdaysWhether or not to disable weekdays.StringFalse
disableWeekendsWhether or not to disable weekends.StringFalse
maxDateThe maximum date that can be set within the date picker.String
minDateThe minimum date that can be set within the date picker.String
multipleWhether or not multiple values can be entered.BooleanFalse

For example, set the mininum date that can be selected by using:

dt                      = component.DateTime("dt", form);
dt.datePicker.minDate   = "2020-01-01";

dt = component.DateTime("dt", form)
dt.datePicker.minDate = "2020-01-01"


TimePickerConfiguration

The value of the timePicker property of a DateTime component shall be of type TimePickerConfiguration. It has the following properties:

NameDescriptionDatatypeDefault
hourStepThe amount of hours to step when the up or down button is pressed.Integer1
minuteStepThe amount of minutes to step when the up or down button is pressed.Integer1
showMeridianWhether or not to show the time in AM/PM.BooleanFalse

For example, you can make the time show up in AM/PM instead of 24hr notation by using:

dt                          = component.DateTime("dt", form);
dt.timePicker.showMeridian  = true;

dt = component.DateTime("dt", form)
dt.timePicker.showMeridian = True


If the component does not expand when it is clicked, it probably means that a property of your DatePickerConfiguration or TimePickerConfiguration is incorrectly structured.