Date picker

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/date-picker.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/date-picker.

Usage

import { useState } from "react";
import { DatePicker } from "@/components/goodui-native/date-picker/date-picker";

export function DeliveryDay() {
  const [day, setDay] = useState<Date | null>(null);
  const today = new Date();
  return (
    <DatePicker
      accessibilityLabel="Delivery day"
      value={day}
      onValueChange={setDay}
      min={today}
      max={new Date(today.getFullYear(), today.getMonth() + 2, 0)}
      isDateDisabled={(d) => d.getDay() === 0}
    />
  );
}

When to use

Examples

<DateRangePicker
  accessibilityLabel="Stay"
  value={stay}
  onValueChange={setStay}
  min={new Date()}
  isDateBooked={(d) => bookedKeys.has(d.toDateString())}
/>

<DatePicker variant="wheel" locale="de-DE" defaultValue={new Date(1990, 4, 17)} max={new Date()} onValueChange={setBirthday} />

<DatePicker weekStartsOn={1} isDateMarked={(d) => hasEvents(d)} value={day} onValueChange={setDay} />

API reference

Motion and haptics

• •Months sit side by side and follow a horizontal drag 1:1, with resistance before min and past max; release pages one month by position and velocity on the smooth spring. The arrows page on the same spring.
• •Single: one accent circle travels from day to day. The edges facing the new day lead on the snappy spring and the trailing edges follow on smooth, so it stretches toward the target and settles. Each number turns to the on-accent color by how much the circle covers it. A circle appearing in a month grows from 40 % on the morph spring.
• •Range: start and end circles grow in on the morph spring and, when the end is picked, the band sweeps from the start day to the end day across week rows on the smooth spring.
• •Reduced motion: paging with the arrows becomes an instant change with a short fade, a swipe settles with a short timing, the circle jumps (a newly shown one fades in), end circles and the band are simply there.

• •Haptic: select when a day is picked
• •Haptic: warning when a range is refused because it spans an unavailable day
• •Haptic: haptic={false} silences both

• •Only the visible month and its two neighbours are mounted; a far jump lands one month short and pages in.
• •The paging position, the travelling circle, number colors and the band run on the UI thread; React renders when the month or the selection changes, never per frame.
• •Pass stable functions for isDateDisabled, isDateBooked and isDateMarked when they are expensive: they run for every day of the three mounted months on each render.

Accessibility

• •Every day is a button whose label starts with its number, then the full date from Intl, then states: today, fully booked or unavailable, start of range, end of range, in range, has events. accessibilityState carries selected and disabled.
• •On the web days are buttons with aria-pressed and aria-disabled. One day is focusable at a time: arrows move by a day or a week, Page Up and Page Down by a month, Home and End to the week's ends, Enter or Space picks; moving past the month pages the calendar.
• •The month title is a header and a polite live region, so paging is announced on Android. Previous month and Next month are icon buttons with labels and disable at min and max.
• •A range that would span a booked or disabled day is refused with a warning haptic and an announcement (rangeBlockedMessage), and the tapped day starts a new range.
• •Weekday names above the grid are hidden from screen readers; each day's label already names its weekday. Months off screen are hidden from screen readers.
• •Cells are 44 pt tall and a seventh of the width.
• •The wheel variant is three adjustable wheels (Day, Month, Year) in a group named by accessibilityLabel.

Notes for AI

Related