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 | | :-------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | | | |

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

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 \| nullDate[] | 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