React-native-day-picker NPM

react-native-day-picker

react-native-day-picker is a simple calendar which allows you select date range. Suites for android and ios.

Demo gif

Getting Started

$ npm install react-native-day-picker --save

Important: When you build app in release mode, calendar works smooth without any lags.
Note: If you use react-native v0.24 or lower install version 1.0.0

Usage

'use strict';

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

import Calendar from './src/Calendar';


class DayPicker extends React.Component {
    render() {
        var from = new Date();
        from.setDate(from.getDate() - 16);
        var to = new Date();

        var startDate = new Date();
        startDate.setMonth(startDate.getMonth() + 1);

        return (
            <View style={styles.container}>
                <Calendar
                    monthsCount={24}
                    startFormMonday={true}
                    startDate={startDate}
                    selectFrom={from}
                    selectTo={to}
                    width={350}
                    onSelectionChange={(current, previous) => {
                        console.log(current, previous);
                    }}
                />
            </View>
        );
    }
}

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

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