@s77rt/react-native-date-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 |
| :-------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | | | | |

Installation

- Using npm

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

- Using yarn

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

Usage

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

$3

`tsx
function Example() {
const datePicker = useRef(null);
const [selectedDate, setSelectedDate] = useState(null);

return (
<>
Selected date: {selectedDate?.toLocaleDateString()}

title="Select date 📅"
onPress={() => datePicker.current?.showPicker()}
/>
ref={datePicker}
type="date"
value={selectedDate}
onChange={setSelectedDate}
/>


);
}
`

$3

`tsx
function Example() {
const [selectedDate, setSelectedDate] = useState(null);

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

);
}
`

$3

`tsx
function Example() {
const [selectedDates, setSelectedDates] = useState([]);

return (
<>

Selected dates:{" "}
{selectedDates
?.map((date) => date.toLocaleDateString())
.join(", ")}

type="date"
value={selectedDates}
onChange={setSelectedDates}
multiple
inline
/>

);
}
`

Props

Inherits View Props.

| Prop | Type | Description |
| ---------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| ref | Ref | 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). ⚫🟢 |

$3

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

- date
- time
- datetime ⚫🔵
- yearmonth

$3

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. 🟢 |

$3

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