# rn-date-range

> datepicker component for react native

Latest version **1.0.7** (published 2017-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-date-range
pnpm add rn-date-range
yarn add rn-date-range
bun add rn-date-range
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-05-10 |
| First published | 2017-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Melih Mucuk |
| Maintainers | melihmucuk |
| Keywords | datepicker, date, react, native, date, range |

## Links

- npm: https://www.npmjs.com/package/rn-date-range
- Repository: https://github.com/melihmucuk/rn-date-range
- Homepage: https://github.com/melihmucuk/rn-date-range#readme
- Issues: https://github.com/melihmucuk/rn-date-range/issues
- npm.io page: https://npm.io/package/rn-date-range

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2017-05-10
- 1.0.6 — 2017-05-08
- 1.0.5 — 2017-05-08
- 1.0.4 — 2017-05-05
- 1.0.3 — 2017-05-05
- 1.0.2 — 2017-05-03
- 1.0.1 — 2017-05-03
- 1.0.0 — 2017-05-03

## README

# rn-date-range [![NPM Version](https://img.shields.io/npm/v/rn-date-range.svg?style=flat)](https://www.npmjs.com/package/rn-date-range) [![NPM Downloads](https://img.shields.io/npm/dm/rn-date-range.svg?style=flat)](https://www.npmjs.com/package/rn-date-range)
Date picker component for react native. Forked and edited from [react-native-day-picker](https://github.com/ivanchenko/react-native-day-picker)
 
![screenshot](https://github.com/melihmucuk/rn-date-range/blob/master/ss.png?raw=true)

## Getting Started

```sh
$ npm install rn-date-range --save
```

> **Important:** When you build app in release mode, calendar works smooth without any lags.

## Usage

```javascript
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
} from 'react-native';

import Calendar from 'rn-date-range'; 

export default class RNCalendarDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Calendar />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 30
  },
});

AppRegistry.registerComponent('RNCalendarDemo', () => RNCalendarDemo);
```
## Properties

All properties are optional

- **`onSelectionChange`** _(func)_ — Function which will be executed on day click. First param is clicked day date, second one previous clicked day, third one selected range.

- **`startDate`** _(Date)_ — Date from which you can select dates. By default is **new Date()**.

- **`width`** _(number)_ Calendars width, should be **divided on 7 without remainder** or may cause unpredictable behaviour.

- **`selectFrom`** _(Date)_ — First day in range that will be selected from start.

- **`selectTo`** _(Date)_ — Last day in range that will be selected from start.

- **`monthsCount`** _(number)_ — Count of dates from current months to the last.

- **`startFromMonday`** _(bool)_ — If true than months will started from monday.

- **`monthsLocale`** _(arrayOf(string))_ — Strings for localization, which will be displayed in month header started from January.

- **`weekDaysLocale`** _(arrayOf(string))_ — Strings for localization, which will be displayed in week day header, started from sunday.

- **`isFutureDate`** _(boolean)_ — True if you want to select a future date. By default is **false**.=======

- **`rangeSelect`** _(bool)_ — True if you want to select a range of dates. By default is true.


### Colors
 
- **`bodyBackColor`** _(string)_ — Calendar background color.

- **`bodyTextColor`** _(string)_ — Calendar headers text color.

- **`headerSepColor`** _(string)_ — Calendar header separator color.
 
- **`dayCommonBackColor`** _(string)_ — Not selected day background color.

- **`dayCommonTextColor`** _(string)_ — Not Selected day text color.
 
- **`dayDisabledBackColor`** _(string)_ — Disabled day background color.

- **`dayDisabledTextColor`** _(string)_ — Disabled day text color.
 
- **`daySelectedBackColor`** _(string)_ — First and last day in range background color.

- **`daySelectedTextColor`** _(string)_ — First and last day in range text color.
 
- **`dayInRangeBackColor`** _(string)_ — In range day background color.

- **`dayInRangeTextColor`** _(string)_ — In range day text color.

- **`monthTextColor`** _(string)_ — Calendar month header text color.

## Support

Email melihmucuk@gmail.com for support.

---
_Source: https://npm.io/package/rn-date-range · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._