native-dates v0.0.5

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)