@s77rt/react-native-date-picker NPM

Features

📅 Date picker
🕜 Time picker
🗓️ Datetime picker
🌙 Yearmonth picker
🔌 Supports iOS, Android and Web
💎 Renders in modal and inline
✨ Highly customizable

Screenshots

iOS	Android	mWeb - Safari	mWeb - Chrome	Web - Chrome

https://github.com/user-attachments/assets/f46f5132-3385-48c9-8d1b-ee478b60fba8

Installation

Using npm

npm install @s77rt/react-native-date-picker

Using yarn

yarn add @s77rt/react-native-date-picker

Usage

import { DatePicker } from "@s77rt/react-native-date-picker";
import type { DatePickerHandle } from "@s77rt/react-native-date-picker";

Modal

function Example() {
	const datePicker = useRef<DatePickerHandle>(null);
	const [selectedDate, setSelectedDate] = useState<Date | null>(null);

	return (
		<>
			<Text>Selected date: {selectedDate?.toLocaleDateString()}</Text>
			<View>
				<Button
					title="Select date 📅"
					onPress={() => datePicker.current?.showPicker()}
				/>
				<DatePicker
					ref={datePicker}
					type="date"
					value={selectedDate}
					onChange={setSelectedDate}
				/>
			</View>
		</>
	);
}

Inline

function Example() {
	const [selectedDate, setSelectedDate] = useState<Date | null>(null);

	return (
		<>
			<Text>Selected date: {selectedDate?.toLocaleDateString()}</Text>
			<DatePicker
				type="date"
				value={selectedDate}
				onChange={setSelectedDate}
				inline
			/>
		</>
	);
}

Props

Inherits View Props.

Prop	Type	Description
`ref`	`Ref<DatePickerHandle>`	Ref for the date picker handle.
`type`	`Type`	The type of the picker.
`value`	`Date \\| null`	The selected date.
`onChange`	`(value: Date \\| null) => void`	Callback when the user changes the selected date.
`min`	`Date`	The earliest selectable date.
`max`	`Date`	The latest selectable date.
`step`	`number`	The stepping interval, in seconds. ⚫🔵
`inline`	`boolean`	Whether the date picker should be displayed inline. ⚫🟢
`options`	`Options`	Options. Note: Must be memoized (`useMemo`). ⚫🟢
`styles`	`Styles`	Styles. Note: Must be memoized (`useMemo`). ⚫🟢

Type

The type of the picker and can be one of the following:

date
time
datetime ⚫🔵
yearmonth ⚫🔵

Options

Various configuration options.

Option	Type	Description
`locale`	`string`	The locale BCP-47 identifier. ⚫
`confirmText`	`string`	The confirm button text. ⚫🟢
`cancelText`	`string`	The cancel button text. ⚫🟢
`mode`	`"compact" \\| "graphical" \\| "wheel"`	The display mode. ⚫
`title`	`string`	The title. 🟢
`headline`	`string`	The headline. 🟢
`showModeToggle`	`boolean`	Whether the mode toggle should be shown. 🟢
`is24Hour`	`boolean`	Whether the time should be in 24-hour. 🟢

Styles

Look and feel styles.

Style	Type	Description
`accentColor`	`ColorValue`	The accent color. ⚫
`containerColor`	`ColorValue`	The container color. 🟢
`titleContentColor`	`ColorValue`	The title color. 🟢
`headlineContentColor`	`ColorValue`	The headline color. 🟢
`weekdayContentColor`	`ColorValue`	The weekday letters color. 🟢
`subheadContentColor`	`ColorValue`	The month and year subhead labels color. 🟢
`navigationContentColor`	`ColorValue`	The year and arrow buttons color. 🟢
`yearContentColor`	`ColorValue`	The year color. 🟢
`disabledYearContentColor`	`ColorValue`	The disabled year color. 🟢
`currentYearContentColor`	`ColorValue`	The current year color. 🟢
`selectedYearContentColor`	`ColorValue`	The selected year color. 🟢
`disabledSelectedYearContentColor`	`ColorValue`	The disabled selected year color. 🟢
`selectedYearContainerColor`	`ColorValue`	The selected year container color. 🟢
`disabledSelectedYearContainerColor`	`ColorValue`	The disabled selected container color. 🟢
`dayContentColor`	`ColorValue`	The day color. 🟢
`disabledDayContentColor`	`ColorValue`	The disabled day color. 🟢
`selectedDayContentColor`	`ColorValue`	The selected day color. 🟢
`disabledSelectedDayContentColor`	`ColorValue`	The disabled selected day color. 🟢
`selectedDayContainerColor`	`ColorValue`	The selected day container color. 🟢
`disabledSelectedDayContainerColor`	`ColorValue`	The disabled selected day container color. 🟢
`todayContentColor`	`ColorValue`	The today color. 🟢
`todayDateBorderColor`	`ColorValue`	The today border color. 🟢
`dayInSelectionRangeContainerColor`	`ColorValue`	The selected days container color. 🟢
`dayInSelectionRangeContentColor`	`ColorValue`	The selected days color. 🟢
`dividerColor`	`ColorValue`	The divider color. 🟢
`clockDialColor`	`ColorValue`	The clock dial color. 🟢
`selectorColor`	`ColorValue`	The clock dial selector color. 🟢
`periodSelectorBorderColor`	`ColorValue`	The period selector border color. 🟢
`clockDialSelectedContentColor`	`ColorValue`	The selected number color. 🟢
`clockDialUnselectedContentColor`	`ColorValue`	The unselected number color. 🟢
`periodSelectorSelectedContainerColor`	`ColorValue`	The selected period container color. 🟢
`periodSelectorUnselectedContainerColor`	`ColorValue`	The unselected period container color. 🟢
`periodSelectorSelectedContentColor`	`ColorValue`	The selected period color. 🟢
`periodSelectorUnselectedContentColor`	`ColorValue`	The unselected period color. 🟢
`timeSelectorSelectedContainerColor`	`ColorValue`	The selected time container color. 🟢
`timeSelectorUnselectedContainerColor`	`ColorValue`	The unselected time container color. 🟢
`timeSelectorSelectedContentColor`	`ColorValue`	The selected time color. 🟢
`timeSelectorUnselectedContentColor`	`ColorValue`	The unselected time color. 🟢