DateRangePicker uses @internationalized/date for all date manipulations (CalendarDate, calendar systems, time zones, locale-aware formatting). For full context on the date types and helpers exposed through this component's props and callbacks, read the @internationalized/date docs alongside this page.

Import

import { DateRangePicker } from 'heroui-native-pro';

Anatomy

<DateRangePicker>
  <Label>...</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content>
        <DateRangePicker.Calendar>
          <RangeCalendar.Header>...</RangeCalendar.Header>
          <RangeCalendar.Grid>...</RangeCalendar.Grid>
        </DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
  <Description>...</Description>
</DateRangePicker>

DateRangePicker: Root container that manages date range selection state, open state, display formatting, and form field context (for Label, Description, FieldError). Supports controlled and uncontrolled modes.
DateRangePicker.Select: Pre-wired Select root connected to the DateRangePicker context. State props (value, isOpen, onValueChange, onOpenChange) are managed by the root.
DateRangePicker.Trigger: Pressable trigger button that opens the calendar overlay. Supports variant and inherits invalid border styling from the root.
DateRangePicker.Value: Text display for the selected range label. Shows a placeholder when no range is selected.
DateRangePicker.TriggerIndicator: Indicator icon inside the trigger. Defaults to a calendar icon instead of a chevron.
DateRangePicker.Portal: Portal wrapper that re-provides DateRangePicker context across the portal boundary.
DateRangePicker.Overlay: Backdrop overlay behind the calendar content.
DateRangePicker.Content: Content container for the calendar popup. Supports "popover", "dialog", and "bottom-sheet" presentations.
DateRangePicker.Calendar: Pre-wired RangeCalendar root that commits a completed range, updates the trigger label, and closes the overlay after selection. Two taps are required to complete a range (start, then end). Uses RangeCalendar compound parts as children.

Usage

Basic Usage

The DateRangePicker uses a popover presentation by default. Pass RangeCalendar compound parts as children of DateRangePicker.Calendar.

<DateRangePicker>
  <Label>Trip dates</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>
          <RangeCalendar.Header>
            <RangeCalendar.Heading />
            <RangeCalendar.NavButton slot="previous" />
            <RangeCalendar.NavButton slot="next" />
          </RangeCalendar.Header>
          <RangeCalendar.Grid>
            <RangeCalendar.GridHeader>
              {(day) => <RangeCalendar.HeaderCell day={day} />}
            </RangeCalendar.GridHeader>
            <RangeCalendar.GridBody>
              {(date) => <RangeCalendar.Cell date={date} />}
            </RangeCalendar.GridBody>
          </RangeCalendar.Grid>
        </DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>

Control the selected range externally with value and onValueChange. The option stores a JSON string with ISO start/end dates in value and a display label shown in the trigger. You can also control the calendar overlay with isOpen and onOpenChange.

import type { DateRangePickerOption } from 'heroui-native-pro';
import { useState } from 'react';

const [selected, setSelected] = useState<DateRangePickerOption | undefined>({
  value: '{"start":"2026-04-01","end":"2026-04-07"}',
  label: 'Apr 1, 2026 – Apr 7, 2026',
});
const [isOpen, setIsOpen] = useState(false);

<DateRangePicker
  value={selected}
  onValueChange={setSelected}
  isOpen={isOpen}
  onOpenChange={setIsOpen}
>
  <Label>Trip dates</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>
          <RangeCalendar.Header>
            <RangeCalendar.Heading />
            <RangeCalendar.NavButton slot="previous" />
            <RangeCalendar.NavButton slot="next" />
          </RangeCalendar.Header>
          <RangeCalendar.Grid>
            <RangeCalendar.GridHeader>
              {(day) => <RangeCalendar.HeaderCell day={day} />}
            </RangeCalendar.GridHeader>
            <RangeCalendar.GridBody>
              {(date) => <RangeCalendar.Cell date={date} />}
            </RangeCalendar.GridBody>
          </RangeCalendar.Grid>
        </DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>;

Dialog Presentation

Display the range calendar in a centered modal dialog.

<DateRangePicker>
  <Label>Trip dates</Label>
  <DateRangePicker.Select presentation="dialog">
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="dialog">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>

Bottom Sheet Presentation

Display the range calendar in a bottom sheet.

<DateRangePicker>
  <Label>Trip dates</Label>
  <DateRangePicker.Select presentation="bottom-sheet">
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="bottom-sheet">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>

Display Format

Configure how the selected range is displayed in the trigger using dateDisplayFormat.

<DateRangePicker dateDisplayFormat="long">
  <Label>Trip dates</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>

Custom Format Function

Override the display label entirely with formatDateRange.

function formatSpanishRange(start: CalendarDate, end: CalendarDate): string {
  const fmt = new Intl.DateTimeFormat('es-ES', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
  const a = fmt.format(start.toDate(getLocalTimeZone()));
  const b = fmt.format(end.toDate(getLocalTimeZone()));
  if (start.compare(end) === 0) return a;
  return `${a} – ${b}`;
}

<DateRangePicker formatDateRange={formatSpanishRange} locale="es-ES">
  <Label>Custom range label</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
  <Description>Pick a start date, then an end date.</Description>
</DateRangePicker>;

Custom Range Separator

Change the separator between formatted start and end dates in the trigger label.

<DateRangePicker rangeSeparator="to">
  <Label>Stay</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
</DateRangePicker>

Field States

Use root props for required, invalid, and disabled states.

<DateRangePicker isRequired>
  <Label>Travel dates</Label>
  <DateRangePicker.Select>
    <DateRangePicker.Trigger>
      <DateRangePicker.Value placeholder="Select travel dates" />
      <DateRangePicker.TriggerIndicator />
    </DateRangePicker.Trigger>
    <DateRangePicker.Portal>
      <DateRangePicker.Overlay />
      <DateRangePicker.Content presentation="popover" width="trigger">
        <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
      </DateRangePicker.Content>
    </DateRangePicker.Portal>
  </DateRangePicker.Select>
  <Description>Required for booking confirmation.</Description>
</DateRangePicker>

Example

import type { CalendarDate } from '@internationalized/date';
import { getLocalTimeZone } from '@internationalized/date';
import { Description, Label } from 'heroui-native';
import { DateRangePicker, RangeCalendar } from 'heroui-native-pro';
import { View } from 'react-native';

function formatSpanishDateRange(
  start: CalendarDate,
  end: CalendarDate
): string {
  const fmt = new Intl.DateTimeFormat('es-ES', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
  const a = fmt.format(start.toDate(getLocalTimeZone()));
  const b = fmt.format(end.toDate(getLocalTimeZone()));
  if (start.compare(end) === 0) return a;
  return `${a} – ${b}`;
}

export default function DateRangePickerExample() {
  return (
    <View className="flex-1 justify-center px-5 gap-12">
      <DateRangePicker formatDateRange={formatSpanishDateRange} locale="es-ES">
        <Label>Custom range label (es-ES)</Label>
        <DateRangePicker.Select>
          <DateRangePicker.Trigger>
            <DateRangePicker.Value className="text-sm" numberOfLines={1} />
            <DateRangePicker.TriggerIndicator />
          </DateRangePicker.Trigger>
          <DateRangePicker.Portal>
            <DateRangePicker.Overlay />
            <DateRangePicker.Content presentation="popover" width="trigger">
              <DateRangePicker.Calendar>
                <RangeCalendar.Header>
                  <RangeCalendar.Heading />
                  <RangeCalendar.NavButton slot="previous" />
                  <RangeCalendar.NavButton slot="next" />
                </RangeCalendar.Header>
                <RangeCalendar.Grid>
                  <RangeCalendar.GridHeader>
                    {(day) => <RangeCalendar.HeaderCell day={day} />}
                  </RangeCalendar.GridHeader>
                  <RangeCalendar.GridBody>
                    {(date) => <RangeCalendar.Cell date={date} />}
                  </RangeCalendar.GridBody>
                </RangeCalendar.Grid>
              </DateRangePicker.Calendar>
            </DateRangePicker.Content>
          </DateRangePicker.Portal>
        </DateRangePicker.Select>
        <Description>Pick a start date, then an end date.</Description>
      </DateRangePicker>
    </View>
  );
}

API Reference