Skip to content

Documentation / @jalali-js/ui-react / RangePicker

Function: RangePicker()

RangePicker(__namedParameters): Element

Defined in: ui-react/src/RangePicker.tsx:87

A calendar-grid popup for picking a start and end date, built on the same buildCalendarGrid() (from jalali-js) that @jalali-js/react's headless Calendar uses, with its own range-aware cell rendering (data-range-start, data-range-end, data-in-range) rather than reusing Calendar directly, since a single date's isSelected and a range's start/end/between are genuinely different per-cell shapes.

Selection is two clicks: the first sets the range's start, the second sets its end (picking an end earlier than the current start restarts the range from there instead). A light hover preview shows the range that would result from completing it at the hovered day.

With rules, blocked days render disabled, and a candidate range that crosses a blocked day does not complete: the second click starts a new range instead (see isRangeSelectable() in jalali-js).

Parameters

__namedParameters

RangePickerProps

Returns

Element