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.