DatePicker

The DatePicker suite provides a complete date selection system with multiple presentation styles.

Components

Component	Description
DatePicker	Core picker with wheel or calendar variant
DatePickerCard	Inline card with confirm/cancel actions
DatePickerModal	Full-screen modal presentation
DatePickerDialog	Alert-style dialog presentation
DatePickerInput	Pressable input field that opens a modal

Usage

DatePickerInput (Most Common)

DatePickerInputExample.tsx

import { useState } from 'react';
import { DatePickerInput } from '@masumdev/rn-ui';

export function DatePickerExample() {
  const [date, setDate] = useState<Date | undefined>();

  return (
    <DatePickerInput
      title="SELECT DATE"
      placeholder="Choose a date"
      value={date}
      onChange={setDate}
    />
  );
}

DatePickerCard (Inline)

DatePickerCardExample.tsx

import { useState } from 'react';
import { DatePickerCard } from '@masumdev/rn-ui';

export function DatePickerCardExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DatePickerCard
      value={date}
      onChange={setDate}
      variant="wheel"
      mode="date"
    />
  );
}

Variants & Modes

• Variants: "wheel" (iOS-style scroll columns) | "calendar" (month grid)
• Modes: "date" | "month-year" | "month" | "year"

Props API

DatePickerInput

Prop	Type	Default	Description
value	Date | undefined	—	Selected date value.
onChange	(date: Date) => void	—	Callback when date is confirmed.
placeholder	string	—	Placeholder text when no date selected.
title	string	—	Title shown in the modal header.
variant	"wheel" | "calendar"	"wheel"	Picker presentation style.
mode	DatePickerMode	"date"	Date granularity mode.
disabled	boolean	false	Disable the input.

DatePicker (Core)

Prop	Type	Default	Description
value	Date	—	Currently selected date.
onChange	(date: Date) => void	—	Callback on date change.
variant	"wheel" | "calendar"	"wheel"	Picker type.
mode	DatePickerMode	"date"	Selection mode.
minDate	Date	—	Minimum selectable date.
maxDate	Date	—	Maximum selectable date.
locale	LocaleInput	—	Locale configuration for month/day names.
order	DatePickerOrder	—	Column order for wheel variant.
monthFormat	"short" | "full" | "numeric"	"short"	Month label format.