Skip to main content

DatePickerDocked

Inputs & Controls

DatePickerDocked

Docked date picker optimized for bottom sheets and persistent surfaces.

Usage

Let users pick dates without leaving context, especially on mobile.

Highlights

  • Month navigation with keyboard shortcuts
  • Tokenized typography + spacing

When to use it

  • A form stays on screen while the picker slides up.
  • You need condensed footprint compared to dialog pickers.

Related components

DatePickerModalDatePickerInlineDateTimePicker

Examples​

Default​

Preview (Web)
import { useState } from 'react';
import { DatePickerDocked } from 'react-native-molecules/components/DatePickerDocked';

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

  return <DatePickerDocked mode="single" locale="en" {...data} onChange={setData} />;
}