🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Date_Time React Native

Documentation

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.

Support

Email [email protected] for support.


You May Also Like