DatePickerModal

Overlay & Menus

DatePickerModal

Full-screen modal date picker with animated headers.

Usage

Use when selecting dates is the primary task and deserves a focused flow.

Highlights

• Header summary for start/end dates
• Portal-powered modal with Backdrop

When to use it

• You need range selection spanning months.
• Mobile flows require immersive selection.

Related components

ModalDatePickerInline

Examples

Default

Preview (Web)

import { useState } from 'react';
import { DatePickerModal } from 'react-native-molecules/components/DatePickerModal';

export default function Example() {
  const [selection, setSelection] = useState({
      date: new Date(),
      dates: [new Date()],
      startDate: new Date(),
      endDate: undefined,
  });

  return <DatePickerModal {...selection} onChange={setSelection} />;
}