Skip to content
Simple date range picker extended from react-native-calendars
Branch: master
Clone or download
Latest commit 596bca1 Mar 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots adjust size Mar 27, 2018
.gitignore Initial Commit Mar 27, 2018
DateRangePicker.js Initial Commit Mar 27, 2018
README.md theme Mar 27, 2018

README.md

react-native-date-range-picker

A simple Date Range Picker implemented with react-native-calendars.

date-range-picker

Getting started

  1. Install react-native-calendars.
  2. Copy DateRangePicker.js to your project.

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import DateRangePicker from './DateRangePicker';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <DateRangePicker
          initialRange={['2018-04-01', '2018-04-10']}
          onSuccess={(s, e) => alert(s + '||' + e)}
          theme={{ markColor: 'red', markTextColor: 'white' }}/>
      </View>
    );
  }
}

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
You can’t perform that action at this time.