Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/lazaronixon/react-native-date-range-picker

Simple date range picker extended from react-native-calendars
https://github.com/lazaronixon/react-native-date-range-picker

Last synced: 2 months ago
JSON representation

Simple date range picker extended from react-native-calendars

Lists

README 

        
# react-native-date-range-picker

A simple Date Range Picker implemented with [react-native-calendars](https://github.com/wix/react-native-calendars).



![date-range-picker](https://raw.githubusercontent.com/lazaronixon/react-native-date-range-picker/master/screenshots/shot1.png)



## Getting started

1. Install [react-native-calendars](https://github.com/wix/react-native-calendars/blob/master/README.md#installation).

2. Copy DateRangePicker.js to your project.



## Usage



```javascript

import React, { Component } from 'react';

import { StyleSheet, View } from 'react-native';

import DateRangePicker from './DateRangePicker';



type Props = {};

export default class App extends Component {

  render() {

    return (

      

         alert(s + '||' + e)}

          theme={{ markColor: 'red', markTextColor: 'white' }}/>

      

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  }

});

```



## Properties



#### `initialRange([fromDate, toDate])`

An Initial range for component. The fromDate is used to set current month.



#### `onSuccess(fromDate, toDate)`

Function executed when a valid range is selected.



#### `theme`

Extra theme properties.

- markColor

- markTextColor