DateRangePicker

The Date Range Picker component enables users to select a start date and an end date within a single control. It is especially useful in reporting, filtering data, reservations, and scheduling applications.

1. Basic Properties

Name → Unique identifier for the component (e.g., DateRangePicker1).
Start date label → Text displayed for the start date input (e.g., Start Date).
End date label → Text displayed for the end date input (e.g., End Date).
Start date placeholder → Placeholder for the start date field.
End date placeholder → Placeholder for the end date field.
Default value → Initial start and end date values.
- Example: {{ [new Date(), new Date()] }} This initializes the range with the current date for both start and end.

States

Read only → Prevents editing while still showing values.
Show clear button → Allows users to reset the selected range.
Disabled → Disables the control completely.
Hidden → Hides the control but keeps it functional in logic.

2. Display Format

Defines how the start and end dates are displayed. This should align with regional or business formatting rules.

Examples:
- shortdate
- EEEE, d of MMM, yyyy
- 'Year': yyyy, 'Month': MMM, 'Day': d

📘 Consistency with the DatePicker / DateTimePicker Format property is recommended.

const date = new Date(2021, 6, 15, 20, 45, 34);
 
type: "longDate" // Thursday, July 15, 2021
type: "longTime" // 8:45:34 PM
type: "longDateLongTime" // Thursday, July 15, 2021, 8:45:34 PM
type: "monthAndDay" // July 15
type: "monthAndYear" // July 2021
type: "quarterAndYear" // Q3 2021
type: "shortDate" // 7/15/2021
type: "shortTime" // 8:45 PM
type: "shortDateShortTime" // 7/15/2021, 8:45 PM
type: "millisecond" // 000
type: "second" // 34
type: "minute" // 45
type: "hour" // 20
type: "day" // 15
type: "dayOfWeek" // Thursday
type: "month" // July
type: "quarter" // Q3
type: "year" // 2021

3. Layout

Handles grid placement, spacing, and responsiveness.

📘 See Common Properties → Layout.

4. Events

onChange → Triggered whenever the start or end date is changed.
- Can be used to refresh reports, filter results, or validate date ranges.

5. Validations

Supports validation rules such as:

Ensuring start date ≤ end date.
Requiring both dates to be filled.
Restricting range to a maximum length (e.g., 30 days).

📘 See Common Properties → Validations.

6. Business Use Cases

Reporting dashboards → Filter results by date ranges (e.g., sales between two dates).
Reservations & bookings → Select check-in and check-out dates.
Project/task management → Define project timelines or task deadlines.
Data filtering → Apply constraints to datasets (e.g., invoices created between two dates).

7. Style

Can be styled for custom colors, borders, and spacing.

📘 See Common Properties → Style.

✅ The DateRangePicker component is the go-to control for scenarios requiring two correlated dates, with built-in flexibility for formatting, validation, and clear user interactions.