Input Date Range
The Input Date Range component provides an intuitive interface for selecting and displaying a range of dates, often used for filtering, booking, or scheduling

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 happens when users select an icon. A list of interactions is 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 textLabel
: to customize Date / Time labels
You can find the instructions for styling here.
Examples

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
Last updated
Was this helpful?