react-native-day-picker

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

Getting Started

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

1'use strict';
2
3import React from 'react';
4import {
5    View,
6    StyleSheet,
7    AppRegistry
8} from 'react-native';
9
10import Calendar from './src/Calendar';
11
12
13class DayPicker extends React.Component {
14    render() {
15        var from = new Date();
16        from.setDate(from.getDate() - 16);
17        var to = new Date();
18
19        var startDate = new Date();
20        startDate.setMonth(startDate.getMonth() + 1);
21
22        return (
23            <View style={styles.container}>
24                <Calendar
25                    monthsCount={24}
26                    startFormMonday={true}
27                    startDate={startDate}
28                    selectFrom={from}
29                    selectTo={to}
30                    width={350}
31                    onSelectionChange={(current, previous) => {
32                        console.log(current, previous);
33                    }}
34                />
35            </View>
36        );
37    }
38}
39
40const styles = StyleSheet.create({
41    container: {
42        flex: 1,
43        paddingTop: 20,
44        justifyContent: 'center',
45        alignItems: 'center',
46        backgroundColor: '#F5F5F5'
47    }
48});

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.

Support

Email vlm.ivanchenko@gmail.com for support.