Date Range

The Date Range component allows users to select a date range with an intuitive calendar interface. It supports preset date ranges, time picking, and responsive layouts for desktop and mobile.

Usage

import { RDateRange } from '@rebilly/revel';

<r-date-range v-model="dateRange" label="Select dates" />;

Basic Example

With Time Picker

Enable time selection by adding the show-time-picker prop.

Constrained Date Range

Use min-date and max-date props to limit selectable dates.