Skip to content

πŸ“… React Native Jalali DatePicker component for both Android and iOS ✨

License

Notifications You must be signed in to change notification settings

MoKhajavi75/react-native-jalali-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

49 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-native-jalali-datepicker

PRs Welcome Β  code style: prettier Β  npm version Β  DUB


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

react-native-jalali-datepicker-example Β  Β  Β  react-native-jalali-datepicker-example

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