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
$ 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'; ;; ; Component { var from = ; from; var to = ; var startDate = ; startDate; return <View style=stylescontainer> <Calendar monthsCount=24 startFormMonday=true startDate=startDate selectFrom=from selectTo=to width=350 onSelectionChange= { console; } /> </View> ; } const styles = StyleSheet;
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.