Native-Dates

Native-Dates is a React Native single/range date picker including Gregorian, Shamsi (Persian) and Hijri calendars support using Moment.js and RTL Support.

Installation

Install Native-Dates using the following command:

npm install native-dates --save

Usage

All you need to do is to import Native-Dates into your react native component and easily use it. Example:

import React, {Component} from 'react';  
import {View, StyleSheet} from "react-native";  
import NativeDates from 'native-dates';  
  
export default class App extends Component {  
    render() {  
        return (  
            <View style={styles.main}>
                <NativeDates
                   onSelectionChange={(value) => {console.log(value)}}
                />
            </View>  
        );  
    }  
}  
  
const styles = StyleSheet.create({  
    main: {  
        flex:1,  
        width: '100%',  
        height: '100%',  
    }  
})

Props

Native-Dates includes lots of useful props so you can change it anyway you want. Here is a list of Native-Dates props:

Advanced Props

Some extra useful props to make Native-Dates more customizable.

Month

You can use month props to control how a month is displayed in date picker. There are 2 ways you can use month props:

1.Use our predefined month object to customize each month.

<NativeDates
    month={
        {
            header: {
                headerStyle: (Style Object),    // Style of each month whole header
                headerTextStyle: (Style Object),    // Text style of each month header
                weekdaysStyle: (Style Object),    // Style of each month weekdays section
                weekdaysItemStyle: (Style Object),    // Style of each items of each month weekdays section
                weekdaysTextStyle: (Style Object),    // Text style of each month weekdays section
            },
            style: {(Style Object)}    // This style object effects whole each month display.
        }
    }
/>

2.Use our 'monthHeader' function that helps you control everything by yourself. Example:

<NativeDates
    month={
        {
            header: {
                monthHeader: function(year, monthName, weekdaysNames){
                    // Now do everything you want with year , monthName and weekdaysNames
                }
            },
            style:{(Style Object)}    // This style object effects whole each month display.
        }
    }
/>

Note: Using 'monthHeader' function causes all items of header object of method #1 become useless .

Day

You can use day props to control how a day is displayed in date picker. There are 2 ways you can use day props:

1.Use our predefined day object to customize each day.

<NativeDates
    day={
        {
            commonBackColor: (Color),    // Background color of an usual day that is not selected or disabled.
            commonTextColor: (Color),    // Text color of an usual day that is not selected or disabled.
            disabledBackColor: (Color),    // Background color of a disabled day.
            disabledTextColor: (Color),    // Text color of a disabled day.
            selectedBackColor: (Color),    // Background color of a selected day.
            selectedTextColor: (Color),    // Text color of a selected day.
            selectedBorderRadius: (Number),    // Border radius of a selected day.
            todayBorderColor: (Color),    // Border color of today (the day in which we are at the moment).
            todayTextColor: (Color),    // Text color of today (the day in which we are at the moment).
            todayBorderRadius: (Number),    // Border radius of today (the day in which we are at the moment).
            todayBorderWidth: (Number),    // Border width of today (the day in which we are at the moment).
            inRangeBackColor: (Color),    // Background color of the days that are between start and end selected dates (works when rangeSelect is true).
            inRangeTextColor: (Color),    //Text color of the days that are between start and end selected dates (works when rangeSelect is true).
        }
    }
/>

2.Use our 'dayComponent' function that helps you control everything by yourself. Example:

<NativeDates
    day={
        {
            dayComponent: function(date,status,disabled,onDayPress){
                // Now do everything you want with date, status, disabled and onDayPress
            }
        }
    }
/>

Note: Using 'dayComponent' function causes all items of day object of method #1 become useless .

More Screenshots

Contributers

• Mojtaba Izadmehr (Github)