Skip to content

Commit e4813da

Browse files
hamidhamid
authored
Update README.md
1 parent a155ae1 commit e4813da

File tree

1 file changed

+182
-2
lines changed

1 file changed

+182
-2
lines changed

‎README.md‎

Lines changed: 182 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,184 @@
11

2-
# react-native-persian-date-picker
3-
a jalali (persian) date picker component for react native
2+
# React-native-persian-date-picker
3+
Jalali (Persian) date picker component for react native
44

5+
6+
7+
8+
this package uses [reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet) and [@react-native-picker/picker](https://github.com/react-native-picker/picker).
9+
10+
11+
<img src="https://user-images.githubusercontent.com/1645233/113412888-a5d9ea00-93ce-11eb-8649-35b567752b39.png" width="350">
12+
|
13+
14+
15+
## Installation
16+
17+
1) Open a Terminal in the project root and run:
18+
19+
```sh
20+
npm i react-native-persian-date-picker2
21+
```
22+
23+
Now we need to install [`native bottom sheet behavior`](https://github.com/osdnk/react-native-reanimated-bottom-sheet) and [`@react-native-picker/picker`](https://github.com/react-native-picker/picker).
24+
25+
2) So run the following:
26+
27+
```sh
28+
npm install reanimated-bottom-sheet react-native-reanimated react-native-gesture-handler @react-native-picker/picker
29+
```
30+
31+
3) the `reanimated-bottom-sheet` uses `react-native-reanimated` and `react-native-gesture-handler` so for more deatils about the installation of these two package visit [`react-native-reanimated install`](https://docs.swmansion.com/react-native-reanimated/docs/installation/) and visit [`install react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation)(you probably have installed this package already, it's a famous package)
32+
33+
## Usage
34+
```javascript
35+
import PersianDatePicker from 'react-native-persian-date-picker2';
36+
...
37+
...
38+
39+
<PersianDatePicker
40+
visible={datePickerVisibility ? true : false }
41+
onConfirm={(value)=>{console.log(value)}}
42+
defaultValue={[1370,7,5]}
43+
startYear={1330}
44+
endYear={1400}
45+
containerStyle={{}}
46+
pickercontainerStyle={{}}
47+
pickerWrapperStyle={{}}
48+
pickerItemStyle={{}}
49+
submitTextStyle={{}}
50+
/>
51+
52+
```
53+
54+
## example
55+
```javascript
56+
import React, { useEffect, useState } from 'react';
57+
import { View,Image,
58+
StyleSheet,TouchableOpacity} from 'react-native';
59+
import PersianDatePicker from 'react-native-persian-date-picker2';
60+
61+
export default function App() {
62+
63+
const [datePickerVisibility, setDatePickerVisibility] = React.useState(false);
64+
const [birthDate, setBirthDate] = React.useState({
65+
string : "",
66+
year:null,
67+
month:null,
68+
day:null
69+
});
70+
71+
const onBirthDatePickerConfirm = (objVal)=>{
72+
let dataString = objVal.value[0] + '/' + objVal.value[1] + '/' + objVal.value[2];
73+
setBirthDate({
74+
string : dataString,
75+
year: objVal.value[0],
76+
month: objVal.value[1],
77+
day: objVal.value[2]
78+
})
79+
setDatePickerVisibility(false);
80+
return true;
81+
}
82+
83+
return (
84+
<>
85+
86+
<TouchableOpacity onPress={()=>{setDatePickerVisibility(true);}} >
87+
{(birthDate.year) ? <View style={[styles.PersianDatePicker]}>
88+
<Text style={styles.PersianDatePickerText}>
89+
{(birthDate.year+"").toFarsiDigits()}
90+
</Text>
91+
<Text style={styles.PersianDatePickerText}>
92+
{(birthDate.month+"").toFarsiDigits()}
93+
</Text>
94+
<Text style={styles.PersianDatePickerText}>
95+
{(birthDate.day+"").toFarsiDigits()}
96+
</Text>
97+
</View>
98+
:
99+
<View style={[styles.PersianDatePicker]}><Text style={styles.PersianDatePickerText} >تاریخ تولد</Text></View>
100+
}
101+
</TouchableOpacity>
102+
103+
<PersianDatePicker
104+
visible={datePickerVisibility}
105+
onConfirm={onBirthDatePickerConfirm}
106+
startYear={1330}
107+
endYear={1400}
108+
containerStyle={{}}
109+
pickercontainerStyle={{}}
110+
pickerWrapperStyle={{}}
111+
pickerItemStyle={{}}
112+
submitTextStyle={{}}
113+
defaultValue={[1370,7,5]}
114+
/>
115+
116+
</>
117+
);
118+
}
119+
120+
const toFarsiDigits = function (str) {
121+
return str.replace(/[0-9]/g, function (w) {
122+
var persian = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
123+
return persian[w];
124+
});
125+
126+
const styles = StyleSheet.create({
127+
PersianDatePicker:{
128+
flexDirection:'row',
129+
justifyContent:'space-between',
130+
padding:7,
131+
paddingRight:1,
132+
paddingLeft:1,
133+
borderWidth:1,
134+
borderColor:'rgba(255,255,255,0.8)',
135+
borderRadius:6,
136+
marginBottom:30,
137+
backgroundColor:'transparent',
138+
marginTop:37,
139+
},
140+
PersianDatePickerText:{
141+
flex:1,
142+
padding:0,
143+
fontSize:14,
144+
textAlign:'center',
145+
color:'rgba(255,255,255,1)',
146+
}
147+
});
148+
149+
```
150+
151+
## Props
152+
153+
| name | required | default | description |
154+
| ------------------------- | -------- | ------- | ------------|
155+
| visible | yes | `true` | visibility of bottom sheet|
156+
| onConfirm | yes |(val)=>{}| the function that call after confirm , the `val` is object that contain : ``{value : [year,month,day]}`` , **> if the function return `false` the bottom sheet will not close |
157+
| defaultValue | no | null | should be array like `[1370,7,5]` |
158+
| startYear | no | `1330` | |
159+
| endYear | no | `1400` | |
160+
| containerStyle | no | null | style object of sheet container |
161+
| pickercontainerStyle | no | null | style object of each three picker container : container > wrapper > picker |
162+
| pickerWrapperStyle | no | null | style object of each three picker wrapper |
163+
| pickerItemStyle | no | null | style object of each three picker item |
164+
| pickerProps | no | null | see [`picker docs`](https://github.com/react-native-picker/picker#props) |
165+
| submitLabel | no | `تایید` | bottom confirm label |
166+
| submitStyle | no | null | style object of submit btn |
167+
| submitTextStyle | no | null | style object of submit text btn |
168+
| borderRadius | no | 20 | border Radius of sheet |
169+
| bottomSheetProps | no | null | see [`sheet docs`](https://github.com/osdnk/react-native-reanimated-bottom-sheet) |
170+
| caption | no | null | simple header caption component ex : `<View><Text>this is caption</Text></View>` |
171+
172+
173+
174+
## Todo
175+
176+
It's not finished and some work has to be done yet.
177+
178+
1. Time picker
179+
2. Default jalali date value with `moment`
180+
3. More config
181+
4. Cleanup code (e.g. measuring of components)
182+
183+
## Contributing
184+
Please share your comment and tests with me by [`@hamid`](http://github.com/hamid) and [`twiiter`](https://twitter.com/hamid_salimian). 😉😌

0 commit comments

Comments
 (0)