Comment on page

Input Date Range

A combination select and input field to select two dates.

Overview
The Input Date Range component allows the user to input and displays a range of dates. It typically consists of two input fields, one for the start date and one for the end date, along with a calendar icon or button that, when clicked, opens a calendar interface for selecting the desired dates. The user can then choose the desired start and end dates by clicking on them or by manually entering them into the input fields.
The Input Date Range component is often used where the user needs to input a specific range of dates. It can be beneficial in scenarios where the user needs to input a range of dates in the future or the past, as it allows them to quickly navigate to and select the desired dates without manually entering them into the input fields.
The Input Date Range component may include features such as time zone selection, marked dates and formatting options for the displayed dates.
Changing the Properties
Adding a label
The Label field allows you to enter text to display for the Input Date range.
Choosing a type
You can choose between Time and DateTime type for the Input Date Range. DateTime allows the end-users to specify a date and a time 
Choosing a date format
3 different date format are available to customize the look and feel of the date and time displayed. You can choose from Short, Medium and Long. 
Customizing Labels
Date and Time Labels can be customized if needed. For example, you can add Date Labels like From / To.
Adding Interactions
Interactions define what will happen when users select an icon. You can find a list of interactions available here.
Here are the available Actions for the Input Date Range component:
On Change
The event fired when the value changed.
Styling the Input Date Range
From the Styles panel, you can customize styling attributes for the Input Date Range: 
Header: to customize main label text
Label: to customize Date / Time labels
You can find the instructions for styling here.
Examples
Property
Value
Label
Select Dates
Type
Date
Variant
Standard
Format / Date Style 
Short
Label / Start Date
Check-in
Label / End Date
Check-out
Style / Header Color
#0b5cab
Style / Font Size
16px
Style / Font Weight
700 - Bold
Specifications
Attributes
Name
Type
Description
dateStyle
String
The display style of the date.
Valid values are short, medium and long. The format of each style is specific to the locale.
On mobile devices this attribute has no effect.
disabled
Boolean
If present, the input field is disabled and users cannot interact with it.
endDate
Date
Specifies the value of the end date input, which can be a Date object, timestamp, or an ISO8601 formatted string.
endDateTime
DateTime
​
fieldLevelHelp
String
Help text detailing the purpose and function of the input.
This attribute isn't supported for file, radio, toggle, and checkbox-button types.
label
String
Text label for the input.
labelEndDate
String
Text label for the end input.
labelEndTime
String
If type is datetime, text label for the end time input.
labelStartDate
String
Text label for the start input.
labelStartTime
String
If type is datetime, text label for the start time input.
readOnly
Boolean
If present, the input 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.
startDate
Date
Specifies the value of the start date input, which can be a Date object, timestamp, or an ISO8601 formatted string.
startDateTime
Datetime
​
timeStyle
String
The display style of the time when type='time' or type='datetime'.
Valid values are short, medium and long. Currently, medium and long styles look the same.
On mobile devices this attribute has no effect.
type
String
Valid types include date and datetime.
variant
String
The variant changes the appearance of an input field.
Events
Name
Description
change
The event fired when the value changed.
Styling Hooks
Header
Name
Description
Text Color
Define a text color if a text label is present.
Font Size
Define a font size if a text label is present.
Font Style
Define a font style if a text label is present.
Font Weight
Define a font weight if a text label is present.
Labels
Name
Description
Text Color
Define a text color if a Start/End date label is present.
Font Size
Define a font size if a Start/End date label is present.
Font Style
Define a font style if a Start/End date label is present.
Font Weight
Define a font weight if a Start/End date label is present.

Property	Value
Label	Select Dates
Type	Date
Variant	Standard
Format / Date Style	Short
Label / Start Date	Check-in
Label / End Date	Check-out
Style / Header Color	#0b5cab
Style / Font Size	16px
Style / Font Weight	700 - Bold

Name	Type	Description
`dateStyle`	String	The display style of the date. Valid values are short, medium and long. The format of each style is specific to the locale. On mobile devices this attribute has no effect.
`disabled`	Boolean	If present, the input field is disabled and users cannot interact with it.
`endDate`	Date	Specifies the value of the end date input, which can be a Date object, timestamp, or an ISO8601 formatted string.
`endDateTime`	DateTime
`fieldLevelHelp`	String	Help text detailing the purpose and function of the input. This attribute isn't supported for file, radio, toggle, and checkbox-button types.
`label`	String	Text label for the input.
`labelEndDate`	String	Text label for the end input.
`labelEndTime`	String	If type is datetime, text label for the end time input.
`labelStartDate`	String	Text label for the start input.
`labelStartTime`	String	If type is datetime, text label for the start time input.
`readOnly`	Boolean	If present, the input 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.
`startDate`	Date	Specifies the value of the start date input, which can be a Date object, timestamp, or an ISO8601 formatted string.
`startDateTime`	Datetime
`timeStyle`	String	The display style of the time when type='`time`' or type='`datetime`'. Valid values are short, medium and long. Currently, medium and long styles look the same. On mobile devices this attribute has no effect.
`type`	String	Valid types include date and datetime.
`variant`	String	The variant changes the appearance of an input field.

Name	Description
change	The event fired when the value changed.

Name	Description
Text Color	Define a text color if a text label is present.
Font Size	Define a font size if a text label is present.
Font Style	Define a font style if a text label is present.
Font Weight	Define a font weight if a text label is present.

Name	Description
Text Color	Define a text color if a Start/End date label is present.
Font Size	Define a font size if a Start/End date label is present.
Font Style	Define a font style if a Start/End date label is present.
Font Weight	Define a font weight if a Start/End date label is present.

Last modified 5mo ago