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 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

Last updated

Was this helpful?