Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farhoudshapouran/react-native-ui-datepicker
Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales.
https://github.com/farhoudshapouran/react-native-ui-datepicker
android calendar date-range date-range-picker datepicker datetime-picker datetimepicker ios picker react-native react-native-web timepicker
Last synced: about 2 months ago
JSON representation
Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales.
- Host: GitHub
- URL: https://github.com/farhoudshapouran/react-native-ui-datepicker
- Owner: farhoudshapouran
- License: mit
- Created: 2023-03-22T16:24:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-16T04:46:32.000Z (4 months ago)
- Last Synced: 2024-05-17T21:48:21.289Z (4 months ago)
- Topics: android, calendar, date-range, date-range-picker, datepicker, datetime-picker, datetimepicker, ios, picker, react-native, react-native-web, timepicker
- Language: TypeScript
- Homepage: https://farhoudshapouran.github.io/react-native-ui-datepicker/
- Size: 6.66 MB
- Stars: 218
- Watchers: 6
- Forks: 19
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
---
# react-native-ui-datepicker
[](https://github.com/prettier/prettier)
[](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/LICENSE)
DateTimePicker component for React Native that allows you to create a customizable date and time picker. The component uses [Day.js](https://day.js.org/) library and it contains a set of style props that allows you to change every item of calendar based on your own UI design. Please visit [demo](https://farhoudshapouran.github.io/react-native-ui-datepicker/).
## Installation
```sh
npm install react-native-ui-datepicker
```
Or
```sh
yarn add react-native-ui-datepicker
```
## Usage
```js
import DateTimePicker from 'react-native-ui-datepicker';
import dayjs from 'dayjs';
export default function App() {
const [date, setDate] = useState(dayjs());
return (
setDate(params.date)}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});
```
For more, take a look at the `/example` directory.
## Calendar props
| Name | Type | Default | Description |
| --------------- | ---------- | ------------- | ------------------------------------------------------------------------ |
| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` |
| locale | `string` | `'en'` | Defines the DatePicker locale |
| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date |
| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date |
| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday |
| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view |
| initialView | `string` | `'day'` | Defines the DatePicker initial view `['day', 'month', 'year', 'time']` |
| height | `number` | `'undefined'` | Defines the Calendar view heights |
## Single Mode props
| Name | Type | Default | Description |
| ---------- | ---------- | ---------------- | ------------------------------------------------- |
| date | `DateType` | `undefined` | Date value to display selected date |
| onChange | `Function` | `({date}) => {}` | Called when the new date selected from DatePicker |
| timePicker | `boolean` | `false` | Defines show or hide time picker |
## Range Mode props
| Name | Type | Default | Description |
| --------- | ---------- | ------------------------------ | -------------------------------------------------------------- |
| startDate | `DateType` | `undefined` | Start date value to display selected start date |
| endDate | `DateType` | `undefined` | End date value to display selected end date |
| onChange | `Function` | `({startDate, endDate}) => {}` | Called when the new start or end date selected from DatePicker |
## Multiple Mode props
| Name | Type | Default | Description |
| -------- | ------------ | ----------------- | -------------------------------------------------- |
| dates | `DateType[]` | `[]` | Dates array to display selected dates |
| onChange | `Function` | `({dates}) => {}` | Called when the new dates selected from DatePicker |
## Styling props
| Name | Type | Default | Description |
| ---------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |
| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |
| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |
| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |
| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |
| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |
| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header "prev and next buttons" containers style |
| headerButtonColor | `string` | `null` | Defines calendar header "prev and next buttons" icon color |
| headerButtonSize | `number` | `18` | Defines calendar header "prev and next buttons" icon size |
| headerButtonsPosition | `string` | `'around'` | Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']` |
| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header "prev button" custom icon |
| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header "next button" custom icon |
| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |
| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |
| todayTextStyle | `TextStyle` | `null` | Defines today text style |
| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |
| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |
| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |
| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |
| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |
| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |
| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |
| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |
| selectedRangeBackgroundColor | `string` | `undefined` | Defines selected range background color. |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## Consider supporting with a ⭐️ [Star on GitHub](https://github.com/farhoudshapouran/react-native-ui-datepicker)
If you are using the library in one of your projects, please consider supporting it with a star.
## License
MIT