react-native-jalali-datepicker

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/MohamadKh75/react-native-jalali-datepicker/pulls) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier) [![npm version](https://badge.fury.io/js/%40mohamadkh75%2Freact-native-jalali-datepicker.svg)](https://badge.fury.io/js/%40mohamadkh75%2Freact-native-jalali-datepicker) [![DUB](https://img.shields.io/dub/l/vibe-d.svg)](https://github.com/MohamadKh75/react-native-jalali-datepicker/blob/master/LICENSE)

Help Needed!

Sadly, I am too busy to maintain this project anymore. Please contact me if you are interested in contributing and maintaining this package (contact info on my profile)

Preview

Install

Package Manager	Command
yarn	`yarn add @mohamadkh75/react-native-jalali-datepicker`
npm	`npm i --save @mohamadkh75/react-native-jalali-datepicker`

Usage

import DatePicker from '@mohamadkh75/react-native-jalali-datepicker';

<DatePicker
  style={{
    width: '95%',
    height: '80%',
    alignSelf: 'center',
    backgroundColor: '#1e272e',
    borderWidth: 1,
    borderColor: '#4bcffa',
    borderRadius: 10,
    elevation: 4
  }}
  selected='1399/1/18'
  dateSeparator='/'
  minDate='1398/1/18'
  maxDate='1400/1/18'
  headerContainerStyle={{ height: '15%' }}
  yearMonthBoxStyle={{
    width: '30%',
    height: '75%',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 10
  }}
  yearMonthTextStyle={{ fontSize: 22, color: '#4bcffa' }}
  iconContainerStyle={{ width: `${100 / 7}%` }}
  backIconStyle={{
    width: 20,
    height: 20,
    resizeMode: 'center',
    tintColor: '#808e9b'
  }}
  nextIconStyle={{
    width: 20,
    height: 20,
    resizeMode: 'center',
    tintColor: '#4bcffa'
  }}
  eachYearStyle={{
    width: 110,
    height: 82,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4bcffa',
    marginTop: '1.5%',
    marginBottom: 5,
    marginHorizontal: '1.5%',
    borderRadius: 10,
    elevation: 3
  }}
  eachYearTextStyle={{
    fontSize: 16,
    color: 'white'
  }}
  eachMonthStyle={{
    width: `${88 / 3}%`,
    height: `${88 / 4}%`,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4bcffa',
    marginBottom: '3%',
    borderRadius: 10,
    elevation: 3
  }}
  eachMonthTextStyle={{ fontSize: 16, color: 'white' }}
  weekdaysContainerStyle={{ height: '10%' }}
  weekdayStyle={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }}
  weekdayTextStyle={{
    fontSize: 16,
    color: '#808e9b',
    marginBottom: 5
  }}
  borderColor='#4bcffa'
  dayStyle={{
    width: `${100 / 7}%`,
    justifyContent: 'center',
    alignItems: 'center',
    aspectRatio: 1 / 1
  }}
  selectedDayStyle={{
    width: '70%',
    aspectRatio: 1 / 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 100
  }}
  selectedDayColor='#4bcffa'
  dayTextStyle={{ fontSize: 18 }}
  selectedDayTextColor='white'
  dayTextColor='#4bcffa'
  disabledTextColor='#4bcffa66'
  onDateChange={date => console.warn(date)}
/>;

Properties

Prop	Default	Type
style	see `Props.js`	`ViewStyle`
selected	today	`string`
dateSeparator	`/`	`string`
minDate	last year	`string`
maxDate	next year	`string`
onDateChange	date => console.warn(date)	`Function`
headerContainerStyle	see `Props.js`	`ViewStyle`
yearMonthBoxStyle	see `Props.js`	`ViewStyle`
yearMonthTextStyle	{ fontSize: 22, color: 'black' }	`TextStyle`
iconContainerStyle	see `Props.js`	`ViewStyle`
backIconStyle	see `Props.js`	`ImageStyle`
nextIconStyle	see `Props.js`	`ImageStyle`
eachYearStyle	see `Props.js`	`ViewStyle`
eachYearTextStyle	{ fontSize: 16, color: 'white' }	`TextStyle`
eachMonthStyle	see `Props.js`	`ViewStyle`
eachMonthTextStyle	{ fontSize: 16, color: 'white' }	`TextStyle`
weekdaysContainerStyle	see `Props.js`	`ViewStyle`
weekdayStyle	see `Props.js`	`ViewStyle`
weekdayTextStyle	{ fontSize: 16, color: 'black', marginBottom: 5 }	`TextStyle`
borderColor	`coral`	`string`
dayStyle	see `Props.js`	`ViewStyle`
selectedDayStyle	see `Props.js`	`ViewStyle`
selectedDayColor	`coral`	`string`
dayTextStyle	{ fontSize: 18 }	`TextStyle`
selectedDayTextColor	`#FFFFFF`	`string`
dayTextColor	`#111111`	`string`
disabledTextColor	`#999999`	`string`

Example

Take a look at example:

git clone https://github.com/MohamadKh75/react-native-jalali-datepicker.git

cd example

yarn

react-native run-android

# OR

react-native run-ios

Acknowledgements

I used Vazir font by Saber Rastikerdar in example app!

License

MIT

MoKhajavi75 / react-native-jalali-datepicker

readme