react-native-ui-datepicker-custom-v2
Version:
Customizable date picker for React Native
141 lines (107 loc) • 9.79 kB
Markdown
---
# 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/).
<p align="center">
<img src="/.github/images/react-native-ui-datepicker-example.gif" height="500" />
</p>
## 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 (
<View style={styles.container}>
<DateTimePicker
mode="single"
date={date}
onChange={(params) => setDate(params.date)}
/>
</View>
);
}
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 |
| maxDate | `isDateDisabled` | `undefined` | A function that return if a specific date is `Disabled` |
| 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 |
<p align="center">
<img src="/.github/images/modes-screenshot.png" />
</p>
## 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