Version: v0.22.x

DatePicker & Calendar

DatePicker is a React Native date picker that shows a month calendar. It supports single, range and multiple selection, min / max dates, disabled days, dots and labels under days, swipe navigation, a quick month jump and any locale.

import { DatePicker, Calendar } from '@elik56a/react-native-pickers';

DatePicker is the entry point. With display="calendar" (the default) it renders a Calendar, and with display="wheel" it renders a DateWheelPicker.
Calendar is what DatePicker renders by default, with the same props minus display. <DatePicker /> and <Calendar /> look and behave the same; import Calendar directly if you never need the wheel.

Loading…

<>
  <DatePicker value={date} onChange={setDate} />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {date
      ? formatDate(date, undefined, { dateStyle: 'full' })
      : 'No date selected'}
  </Text>
</>

This page covers single selection and everything the calendar shares. Range and multiple selection are on the Date range & multiple page.

Try the props

Platform

display

mode

weekdayFormat

firstDayOfWeek

showOutsideDaysfixedWeeksshowWeekdaysenableQuickJump

<DatePicker value={value} onChange={setValue} firstDayOfWeek={0} />

Min and max dates

Days outside [minDate, maxDate] are disabled (struck through). The arrows stop at the first and last allowed months, and the month grid greys out months outside the range. Only the day matters; the time of day is ignored.

Loading…

<DatePicker
  value={date}
  onChange={setDate}
  minDate={today}
  maxDate={addDays(today, 45)}
/>

Disabling days

isDateDisabled runs for every visible day. Return true to disable it.

Loading…

<DatePicker
  value={date}
  onChange={setDate}
  initialMonth={new Date(2026, 11, 1)}
  isDateDisabled={(d) =>
    d.getDay() === 0 || d.getDay() === 6 || holidays.has(toDateKey(d))
  }
/>

You can also disable specific days through markedDates with disabled: true.

Keep it cheap

isDateDisabled is called up to 42 times per render. Avoid heavy work inside it; precompute a Set of disabled keys and check it with toDateKey.

Marked dates: dots, labels and colours

markedDates is keyed by YYYY-MM-DD (local time; build keys with toDateKey). Each entry can have:

Field	Type	Effect
`dots`	`string[]`	Up to 3 coloured dots under the number (events, statuses)
`label`	`string`	Small text under the number (prices, counts)
`textColor`	`string`	Colour of the day number
`disabled`	`boolean`	Disable the day

Loading…

<DatePicker value={date} onChange={setDate} markedDates={marks} />

Locale and first day of week

Month and weekday names come from Intl.DateTimeFormat for the locale you pass. firstDayOfWeek (0 = Sunday … 6 = Saturday) defaults to the locale's first day when Intl.Locale week info is available, else Sunday.

Loading…

<View style={{ gap: 24 }}>
  <DatePicker
    value={date}
    onChange={setDate}
    locale="fr-FR"
    firstDayOfWeek={1}
  />
  <DatePicker
    value={date}
    onChange={setDate}
    locale="ja-JP"
    weekdayFormat="narrow"
  />
</View>

Arrows step one month. They're disabled at minDate / maxDate.
Swipe left / right on the days to change month (enableSwipe, on by default). The direction flips in RTL.
Quick jump: tap the month title to open a grid of months (the arrows step by year), tap the title again for a grid of years (the arrows step by 12 years), and tap it once more to go back to days. Picking a year opens its months, and picking a month opens its days (enableQuickJump, on by default). The year grid is limited to yearRange, which defaults to the minDate / maxDate years or 100 years either side of today.
initialMonth sets the first month shown. By default it's the month of the selected date (or range start, or first multiple date), else today.
onMonthChange(month) fires with the first day of the newly shown month.

In single mode, when value changes from outside to a date in another month, the calendar follows it.

Layout

Loading…

<DatePicker
  value={date}
  onChange={setDate}
  showOutsideDays={false}
  fixedWeeks={false}
  dayHeight={38}
  formatTitle={(month) =>
    month.toLocaleDateString('en-US', { month: 'short', year: '2-digit' })
  }
/>

fixedWeeks (default true) always renders 6 rows so the height never jumps between months. Set it to false to render only the weeks the month needs.
showOutsideDays (default true) shows the trailing and leading days of neighbouring months (tappable, dimmed).
dayHeight (default 44) is the row height; the selection circle is min(dayHeight − 4, 40).
showWeekdays={false} hides the weekday header row.

Custom days and arrows

renderDay(state, theme) fully replaces a day cell's content (taps and the range band are still handled for you). renderArrow(direction, disabled) replaces the arrows.

Loading…

<DatePicker
  value={date}
  onChange={setDate}
  renderArrow={(dir, disabled) => (
    <Text style={{ fontSize: 16, opacity: disabled ? 0.3 : 1 }}>
      {dir === 'prev' ? '⬅️' : '➡️'}
    </Text>
  )}
  renderDay={(s, theme) => (
    <View
      style={{
        width: 36,
        height: 36,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: s.selected
          ? theme.colors.primary
          : s.today
            ? theme.colors.primaryMuted
            : 'transparent',
        opacity: s.outside ? 0.35 : 1,
      }}
    >
      <Text
        style={{
          color: s.selected
            ? theme.colors.onPrimary
            : s.disabled
              ? theme.colors.textDisabled
              : theme.colors.text,
          fontWeight: '600',
        }}
      >
        {s.date.getDate()}
      </Text>
    </View>
  )}
/>

DayState passed to renderDay:

interface DayState {
  date: Date;
  selected: boolean;   // the selected day, a range end, or one of multiple
  rangeStart: boolean;
  rangeEnd: boolean;
  inRange: boolean;    // strictly between start and end
  today: boolean;
  disabled: boolean;
  outside: boolean;    // belongs to the previous / next month
  marking?: MarkedDate;
}

Styling

Loading…

<DatePicker
  value={date}
  onChange={setDate}
  theme={{
    colors: { primary: '#059669', primaryMuted: 'rgba(5,150,105,0.12)' },
  }}
  styles={{
    container: {
      borderRadius: 20,
      borderWidth: 1,
      borderColor: '#E8E4DC',
      paddingHorizontal: 8,
    },
    headerTitle: { fontSize: 20, fontWeight: '800' },
    weekdayText: {
      textTransform: 'uppercase',
      fontSize: 10,
      letterSpacing: 1,
    },
    selectedDay: { borderRadius: 10 },
    todayDay: { borderRadius: 10 },
  }}
/>

Slots

Slot	Element
`container`	Outer view
`header`	Title + arrows row
`headerTitle`	Month / year title text
`arrow`	Arrow button
`arrowText`	Default arrow glyph
`weekdays`	Weekday header row
`weekdayText`	Weekday labels
`week`	Each week row
`day`	Day cell (pressable, full width of the column)
`dayInner`	The circle inside the cell
`dayText`	Day number
`selectedDay` / `selectedDayText`	Selected circle / number
`todayDay` / `todayDayText`	Today's circle / number
`disabledDayText`	Disabled day numbers
`outsideDayText`	Days from neighbouring months
`rangeBand`	Range highlight band
`dot`	Marked-date dots
`dayLabel`	Marked-date label text
`gridCell` / `gridCellText`	Month and year grid cells (quick jump)

Props

DatePicker accepts everything below plus display. With display="wheel", see DateWheelPicker instead.

Selection

Prop	Type	Default	Description
`display`	`'calendar' \| 'wheel'`	`'calendar'`	`DatePicker` only.
`mode`	`'single' \| 'range' \| 'multiple' \| 'ranges'`	`'single'`	Selection mode; changes the type of `value`.
`value`	`Date \| null` · `DateRange` · `Date[]` · `DateRange[]`	—	Selection (controlled), typed by `mode`.
`defaultValue`	same as `value`	`null` · `{start:null,end:null}` · `[]` · `[]`	Initial selection when uncontrolled.
`onChange`	`(date: Date) => void` · `(range: DateRange) => void` · `(dates: Date[]) => void` · `(ranges: DateRange[]) => void`	—	Fires on every tap that changes the selection.
`minRangeDays`	`number`	—	`range` and `ranges`. See range.
`maxRangeDays`	`number`	—	`range` and `ranges`.
`allowSingleDayRange`	`boolean`	`true`	`range` and `ranges`.
`maxSelections`	`number`	—	`multiple` only.
`maxRanges`	`number`	—	`ranges` only.

Calendar

Prop	Type	Default	Description
`minDate`	`Date`	—	Earliest selectable day.
`maxDate`	`Date`	—	Latest selectable day.
`isDateDisabled`	`(date: Date) => boolean`	—	Return `true` to disable a day.
`markedDates`	`Record<string, MarkedDate>`	—	Keyed by `YYYY-MM-DD`: `{ dots?, label?, textColor?, disabled? }`.
`locale`	`string`	device	Month / weekday names and default first day.
`firstDayOfWeek`	`number` (0–6)	from locale, else `0`	0 = Sunday … 6 = Saturday.
`initialMonth`	`Date`	selected date or today	Month shown first.
`onMonthChange`	`(month: Date) => void`	—	Fires with the first day of the new month.
`showOutsideDays`	`boolean`	`true`	Show neighbouring months' days.
`fixedWeeks`	`boolean`	`true`	Always 6 rows.
`enableSwipe`	`boolean`	`true`	Swipe horizontally to change months.
`enableQuickJump`	`boolean`	`true`	Tap the title to cycle days → months → years.
`weekdayFormat`	`'short' \| 'narrow'`	from the design: `'narrow'` in Material, else `'short'`	`Mon` vs `M`.
`showWeekdays`	`boolean`	`true`	Show the weekday header.
`formatTitle`	`(month: Date, locale?: string) => string`	`"October 2026"`	Custom title text.
`renderDay`	`(state: DayState, theme: PickerTheme) => ReactNode`	—	Custom day cell content.
`renderArrow`	`(direction: 'prev' \| 'next', disabled: boolean) => ReactNode`	—	Custom arrows.
`yearRange`	`[number, number]`	min/max or ±100 years	Years available in the year grid.
`dayHeight`	`number`	`44`	Height of a day row.
`style`	`StyleProp<ViewStyle>`	—	Container style.
`styles`	`SlotStyles<CalendarSlot>`	—	See slots.
`theme`	`DeepPartial<PickerTheme>`	—	Theme override.
`design`	`'ios' \| 'material' \| 'web'`	from `PickersProvider`	The look to follow, over the provider's: iOS, Material or web.
`testID`	`string`	—	Test ID.

Types

interface DateRange { start: Date | null; end: Date | null }
interface MarkedDate { dots?: string[]; disabled?: boolean; label?: string; textColor?: string }
type CalendarProps = CalendarBaseProps & CalendarSelectionProps;
type DatePickerProps = ({ display?: 'calendar' } & CalendarProps) | ({ display: 'wheel' } & DateWheelPickerProps);

Accessibility

Each day is a button whose label is the full date ("Wednesday, October 14, 2026") with selected / disabled state. The arrows are labelled "Previous" / "Next", and the title is a button when quick jump is on.

In a form field

DatePickerField is a field that opens a DatePickerSheet and shows the confirmed date. Switch presentation in the panel: auto opens a dropdown under the field on the web and a bottom sheet on iOS and Android.

Platform

presentation

display

confirmOnSelectclearable

<DatePickerField
  label="Due date"
  placeholder="Pick a date"
  value={date}
  onConfirm={setDate}
/>

→ Picker fields

Date range & multiple
MonthPicker: a month and year without a day
WeekStrip: one week of days in a row
DatePickerSheet
DatePickerField: the calendar behind a form field
Booking recipe

Try the props​

Min and max dates​

Disabling days​

Marked dates: dots, labels and colours​

Locale and first day of week​

Navigation​

Layout​

Custom days and arrows​

Styling​

Slots​

Props​

Selection​

Calendar​

Types​

Accessibility​

In a form field​

Related​

Try the props

Min and max dates

Disabling days

Marked dates: dots, labels and colours

Locale and first day of week

Navigation

Layout

Custom days and arrows

Styling

Slots

Props

Selection

Calendar

Types

Accessibility

In a form field

Related