react-native-jalali-calendar-picker
This is the Jalali (and Farsi) version of "react-native-calendar-picker" (https://github.com/stephy/CalendarPicker), Calendar Picker Component for React Native
I have tried to cast the Date
object to moment-jalali
(https://github.com/jalaali/moment-jalaali) but this is somehow ugly.
It was a 5-hour work and there are still many issues (i.e minDate
and maxDate
does not work properly and might raise error)
Following features work at the moment:
- Date picker grid
- Single selection
- Multi selection
Please refer to the original author's README (https://github.com/stephy/CalendarPicker) for more options and examples.
To use the calendar you just need to:
npm install --save react-native-jalali-calendar-picker
How to use it
;;; { superprops; thisstate = selectedStartDate: null ; thisonDateChange = thisonDateChange; } { this; } { const selectedStartDate = thisstate; const startDate = selectedStartDate ? selectedStartDate : ''; return <View style=stylescontainer> <JalaliCalendarPicker onDateChange=thisonDateChange /> <View> <Text>SELECTED DATE: startDate </Text> </View> </View> ; } const styles = StyleSheet;
JalaliCalendarPicker Props
Prop | Type | Description |
---|---|---|
weekdays |
Array |
Optional. List of week days. Eg. ['Mon', 'Tue', ...] Must be 7 days |
months |
Array |
Optional. List of months names. Eg. ['Jan', 'Feb', ...] Must be 12 months |
startFromMonday |
Boolean |
Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is false |
allowRangeSelection |
Boolean |
Optional. Allow to select date ranges. Default is false |
previousTitle |
String |
Optional. Title of button for previous month. Default is Previous |
nextTitle |
String |
Optional. Title of button for next month. Default is Next |
selectedDayColor |
String |
Optional. Color for selected day |
selectedDayTextColor |
String |
Optional. Text color for selected day |
todayBackgroundColor |
String |
Optional. Background color for today. Default is #cccccc |
textStyle |
Object |
Optional. Style overall text. Change fontFamily, color, etc. |
scaleFactor |
Number |
Optional. Default (375) scales to window width |
minDate |
Date |
Optional. Specifies minimum date to be selected |
maxDate |
Date |
Optional. Specifies maximum date to be selected |
initialDate |
Date |
Optional. Date that calendar opens to. Defaults to today. |
width |
Number |
Optional. Width of CalendarPicker's container. Defaults to Dimensions width. |
height |
Number |
Optional. Height of CalendarPicker's container. Defaults to Dimensions height. |
Styles
Some styles will overwrite some won't. For instance:
- If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.
Order of precedence:
- defaultColor => textStyle => selectedDayColor
- defaultTodayBackgroundColor => todayBackgroundColor
- defaultBackgroundColor => selectedDayColor
- defaultTextStyles => textStyle => selectedDayTextColor
Mutli select
;;; { superprops; thisstate = selectedStartDate: null selectedEndDate: null ; thisonDateChange = thisonDateChange; } { if type === 'END_DATE' this; else this; } { const selectedStartDate selectedEndDate = thisstate; const startDate = selectedStartDate ? selectedStartDate : ''; const endDate = selectedEndDate ? selectedEndDate : ''; return <View style=stylescontainer> <JalaliCalendarPicker allowRangeSelection=true todayBackgroundColor="#f2e6ff" selectedDayColor="#7300e6" selectedDayTextColor="#FFFFFF" onDateChange=thisonDateChange /> <View> <Text>SELECTED START DATE: startDate </Text> <Text>SELECTED END DATE: endDate </Text> </View> </View> ; } const styles = StyleSheet;
Suggestions?
Open Issues. Submit PRs.
Running on device
npm start
Running on iOS Simulator
npm run ios