Comment on page

Date Time Picker

A datetime picker is used to select a day and a time.

Overview
The Date Time Picker component is used to display and manage appointments. One-time and recurring appointments can be displayed in a day, week, or month view. Populate appointments by using the built-in appointment and use your own custom logic using Flow Builder.
Changing the Properties
Defining a Type
Type includes radio or checkbox. With checkbox, end-users can select multiple values whereas, with radio, end-users can only select one value.
Choosing a Variant
The variant changes the appearance of the time picker. You can choose from daily, weekly, monthly, inline and timeline variants. 
Set Start Time and End Time
To set a default Start Time and End Time for the Date Time picker. Values can be dynamic using the Mapped icon.
Add Disabled Date Time (if needed)
You can set a disabled date time if needed. End-users won't be able to book a disabled date time.
Setting Advanced options
Advanced options allow you to show or hide specific options. 
Show Disabled Dates
Show End Time
Show Time Zone
Hide Navigation
Hide Date Picker
Hide Label
Required
Disabled
Read only
Adding Interactions
From the interactions panel, you can define interactions when users interact with the Date Time Picker element. Interactions can be added  when the user makes a change to a value  
Here is a full list of actions you can add to the date time picker component.
Styling the Date Time Picker
From the Styles panel, you can customize styling for the Date Time Picker component: Label.  
You can find the instructions for styling here.
Examples
Property
Value
Label
Book a time
Type
Checkbox
Variant
Monthly
Start Time
08:00
End Time
13:00
Time Slot duration
01:00
Label color
#08abed
Font Size
16px
Specifications
Attributes
Name
Type
Description
dateFormatDay
String
Valid values include numeric and 2-digit.
dateFormatMonth
String
Valid values are numeric, 2-digit, long, short or narrow.
dateFormatWeekday
String
Specifies how to display the day of the week. Valid values are narrow, short, or long.
dateFormatYear
String
Valid values include numeric and 2-digit.
disabled
Boolean
If present, the date time picker is disabled and users cannot interact with it
disabledDateTimes
Datetime[]
Array of disabled dates. The dates must be Date objects or valid ISO8601 strings.
endTime
String
End of the time slots. Must be an ISO8601 formatted time string.
fieldLevelHelp
String
Help text detailing the purpose and function of the input
hideDatePicker
Boolean
If present, hide the date picker button.
hideLabel
Boolean
If present, hides the label.
hideNavigation
Boolean
If present, hide next, previous and today buttons.
label
String
Text label for the input.
max
Date
Specifies the maximum date, which the calendar can show.
min
Date
Specifies the minimum date, which the calendar can show.
readOnly
Boolean
If present, the input field is read-only and cannot be edited by users.
required
Boolean
If present, the input field must be filled out before the form is submitted
showDisabledDates
Boolean
If present, show the disabled dates in the date time picker.
Ex: 1:00 PM - 1:30 PM
showEndTime
Boolean
If present, show the end time in each slots.
Ex: 1:00 PM - 1:30 PM..
showTimeZone
Boolean
If present, show the time zone.
startTime
String
Start of the time slots. Must be an ISO8601 formatted time string.
timeFormatHour
String
Valid values include numeric and 2-digit.
timeFormatHour12
String
Determines whether time is displayed as 12-hour.
If false, time displays as 24-hour. The default setting is determined by the user's locale.
timeFormatMinute
String
Valid values include numeric and 2-digit.
timeFormatSecond
String
Valid values include numeric and 2-digit.
timeSlotDuration
String
Duration of each time slot. Must be an ISO8601 formatted time string.
type
String
Valid values include radio and checkbox.
value
Datetime
The value of the date selected, which can be a Date object, timestamp, or an ISO8601 formatted string.
valueCollection
Datetime[]
​
variant
String
The variant changes the appearance of the time picker.
Accepted variants include daily, weekly, monthly, inline and timeline.
Events
Name
Description
change
The event fired when the value changed.
Styling Hooks
Name
Description
Text Color
Define a color for the label
Font Size
Define a font size for the label
Font Style
Define a font style for the label
Font Weight
Define a font weight for the label

Property	Value
Label	Book a time
Type	Checkbox
Variant	Monthly
Start Time	08:00
End Time	13:00
Time Slot duration	01:00
Label color	#08abed
Font Size	16px

Name	Type	Description
dateFormatDay	String	Valid values include numeric and 2-digit.
dateFormatMonth	String	Valid values are numeric, 2-digit, long, short or narrow.
dateFormatWeekday	String	Specifies how to display the day of the week. Valid values are narrow, short, or long.
dateFormatYear	String	Valid values include numeric and 2-digit.
disabled	Boolean	If present, the date time picker is disabled and users cannot interact with it
disabledDateTimes	Datetime[]	Array of disabled dates. The dates must be Date objects or valid ISO8601 strings.
endTime	String	End of the time slots. Must be an ISO8601 formatted time string.
fieldLevelHelp	String	Help text detailing the purpose and function of the input
hideDatePicker	Boolean	If present, hide the date picker button.
hideLabel	Boolean	If present, hides the label.
hideNavigation	Boolean	If present, hide next, previous and today buttons.
label	String	Text label for the input.
max	Date	Specifies the maximum date, which the calendar can show.
min	Date	Specifies the minimum date, which the calendar can show.
readOnly	Boolean	If present, the input field is read-only and cannot be edited by users.
required	Boolean	If present, the input field must be filled out before the form is submitted
showDisabledDates	Boolean	If present, show the disabled dates in the date time picker. Ex: 1:00 PM - 1:30 PM
showEndTime	Boolean	If present, show the end time in each slots. Ex: 1:00 PM - 1:30 PM..
showTimeZone	Boolean	If present, show the time zone.
startTime	String	Start of the time slots. Must be an ISO8601 formatted time string.
timeFormatHour	String	Valid values include numeric and 2-digit.
timeFormatHour12	String	Determines whether time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user's locale.
timeFormatMinute	String	Valid values include numeric and 2-digit.
timeFormatSecond	String	Valid values include numeric and 2-digit.
timeSlotDuration	String	Duration of each time slot. Must be an ISO8601 formatted time string.
type	String	Valid values include radio and checkbox.
value	Datetime	The value of the date selected, which can be a Date object, timestamp, or an ISO8601 formatted string.
valueCollection	Datetime[]
variant	String	The variant changes the appearance of the time picker. Accepted variants include daily, weekly, monthly, inline and timeline.

Name	Description
change	The event fired when the value changed.

Name	Description
Text Color	Define a color for the label
Font Size	Define a font size for the label
Font Style	Define a font style for the label
Font Weight	Define a font weight for the label

Last modified 11mo ago