Native Date, Time, Datetime and Yearmonth Picker
npm install @s77rt/react-native-date-picker
- š
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
| iOS | Android | mWeb - Safari | mWeb - Chrome | Web - Chrome |
| :-------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
|
See it in action
https://github.com/user-attachments/assets/f46f5132-3385-48c9-8d1b-ee478b60fba8
- Using npm
``bash`
npm install @s77rt/react-native-date-picker
- Using yarn
`bash`
yarn add @s77rt/react-native-date-picker
`tsx`
import { DatePicker } from "@s77rt/react-native-date-picker";
import type { DatePickerHandle } from "@s77rt/react-native-date-picker";

`tsx
function Example() {
const datePicker = useRef
const [selectedDate, setSelectedDate] = useState
return (
<>
title="Select date š
"
onPress={() => datePicker.current?.showPicker()}
/>
type="date"
value={selectedDate}
onChange={setSelectedDate}
/>
>
);
}
`

`tsx
function Example() {
const [selectedDate, setSelectedDate] = useState
return (
<>
value={selectedDate}
onChange={setSelectedDate}
inline
/>
>
);
}
`

`tsx
function Example() {
const [selectedDates, setSelectedDates] = useState
return (
<>
Selected dates:{" "}
{selectedDates
?.map((date) => date.toLocaleDateString())
.join(", ")}
value={selectedDates}
onChange={setSelectedDates}
multiple
inline
/>
>
);
}
`
Inherits View Props.
| Prop | Type | Description |
| ---------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| ref | Ref | 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). ā«š¢ |
The type of the picker and can be one of the following:
- datetime
- datetime
- ā«šµyearmonth
-
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. š¢ |
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. š¢ |
Imperative handle methods.
| Method | Type | Description |
| ------------ | ------------ | ----------------- |
| showPicker | () => void` | Shows the picker. |
Every code review, bug report and feature request is appreciated! Please feel free to share your feedback.
---
ā« iOS - š¢ Android - šµ Web