Native Date, Time, Datetime and Yearmonth Picker

Features

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

Screenshots

iOS	Android	mWeb - Safari	mWeb - Chrome	Web - Chrome

See it in action

demo.mp4

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
			/>
		</>
	);
}

Multiple

function Example() {
	const [selectedDates, setSelectedDates] = useState<Date[]>([]);

	return (
		<>
			<Text>
				Selected dates:{" "}
				{selectedDates
					?.map((date) => date.toLocaleDateString())
					.join(", ")}
			</Text>
			<DatePicker
				type="date"
				value={selectedDates}
				onChange={setSelectedDates}
				multiple
				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 Date[]	The selected date(s).
onChange	(value: Date | null) => void (value: Date[]) => void	Callback when the user changes the selected date(s).
min	Date	The earliest selectable date(s).
max	Date	The latest selectable date(s).
step	number	The stepping interval, in seconds. ⚫🔵
multiple	boolean	Whether the user can select multiple dates. ⚫🟢
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. 🟢

Methods

Imperative handle methods.

Method	Type	Description
showPicker	() => void	Shows the picker.

Feedback

Every code review, bug report and feature request is appreciated! Please feel free to share your feedback.

License

MIT

---

⚫ iOS - 🟢 Android - 🔵 Web