# @aldiand/react-native-ui-datepicker

> Customizable date picker for React Native

Latest version **2.1.0** (published 2024-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aldiand/react-native-ui-datepicker
pnpm add @aldiand/react-native-ui-datepicker
yarn add @aldiand/react-native-ui-datepicker
bun add @aldiand/react-native-ui-datepicker
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2024-05-14 |
| First published | 2024-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 3 |
| Unpacked size | 330.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 887 |
| Author | Farhoud Shapouran |
| Maintainers | aldiand |
| Keywords | react-native, ios, android, react-native-ui-datetpicker, react-native-datetime, react-native-datetime-picker, react-native-datetpicker, react-native-datet-picker, react-native-timepicker, react-native-time-picker, react-native-calendar, react-native-daterange, datetime, datetime-picker, datepicker, datet-picker, timepicker, time-picker, calendar, daterange |

## Links

- npm: https://www.npmjs.com/package/@aldiand/react-native-ui-datepicker
- Repository: https://github.com/farhoudshapouran/react-native-ui-datepicker
- Homepage: https://github.com/farhoudshapouran/react-native-ui-datepicker#readme
- Issues: https://github.com/farhoudshapouran/react-native-ui-datepicker/issues
- npm.io page: https://npm.io/package/@aldiand/react-native-ui-datepicker

## Dependencies (3)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [uninstall](https://npm.io/package/uninstall.md) ^0.0.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2024-05-14

## README

![react-native-ui-datepicker](https://user-images.githubusercontent.com/7857656/227187674-93012672-495d-4955-b4d3-46c3d016684e.jpg)

---

# react-native-ui-datepicker

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](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.

![react-native-ui-datepicker-styles](https://user-images.githubusercontent.com/7857656/227260476-30ee8c25-f809-4dcf-bccf-cd1ffab8795a.jpg)

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

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

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

---
_Source: https://npm.io/package/@aldiand/react-native-ui-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._