DatePickerInline

Inputs & Controls

DatePickerInline

Inline calendar grid with year and month pickers for rich scheduling flows.

Usage

Embed the picker directly within forms or dashboards.

Highlights

• Day, month, year views
• Keyboard navigation + range styling

When to use it

• You have the vertical space to keep a calendar always visible.
• Administrators need full context when browsing dates.

Related components

DatePickerInputDatePickerDocked

Examples

Default

Preview (Web)

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

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

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