React Native Datepicker by Xgfe
React Native Datepicker by Xgfe
Venkat Nagaram
React Native Datepicker by Xgfe
React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS
Install
|
1 |
npm install react-native-datepicker --save |
Or using react-native-ui-xg, our react-naitve ui kit.
|
1 |
npm install react-native-ui-xg --save |
Example
Check index.android.js in the Example.
Usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span> <span class="pl-k">import</span> <span class="pl-v">DatePicker</span> <span class="pl-k">from</span> <span class="pl-s">'react-native-datepicker'</span> <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">MyDatePicker</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span> <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">date</span>:<span class="pl-s">"2016-05-15"</span><span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">DatePicker</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">width</span>: <span class="pl-c1">200</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">date</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">date</span><span class="pl-kos">}</span> <span class="pl-c1">mode</span><span class="pl-c1">=</span><span class="pl-s">"date"</span> <span class="pl-c1">placeholder</span><span class="pl-c1">=</span><span class="pl-s">"select date"</span> <span class="pl-c1">format</span><span class="pl-c1">=</span><span class="pl-s">"YYYY-MM-DD"</span> <span class="pl-c1">minDate</span><span class="pl-c1">=</span><span class="pl-s">"2016-05-01"</span> <span class="pl-c1">maxDate</span><span class="pl-c1">=</span><span class="pl-s">"2016-06-01"</span> <span class="pl-c1">confirmBtnText</span><span class="pl-c1">=</span><span class="pl-s">"Confirm"</span> <span class="pl-c1">cancelBtnText</span><span class="pl-c1">=</span><span class="pl-s">"Cancel"</span> <span class="pl-c1">customStyles</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">dateIcon</span>: <span class="pl-kos">{</span> <span class="pl-c1">position</span>: <span class="pl-s">'absolute'</span><span class="pl-kos">,</span> <span class="pl-c1">left</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">top</span>: <span class="pl-c1">4</span><span class="pl-kos">,</span> <span class="pl-c1">marginLeft</span>: <span class="pl-c1">0</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">dateInput</span>: <span class="pl-kos">{</span> <span class="pl-c1">marginLeft</span>: <span class="pl-c1">36</span> <span class="pl-kos">}</span> <span class="pl-c">// ... You can check the source to find the other keys.</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">onDateChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-s1">date</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">date</span>: <span class="pl-s1">date</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span> <span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> |
You can check index.js in the Example for detail.
Properties
| Prop | Default | Type | Description |
|---|---|---|---|
| style | – | object |
Specify the style of the DatePicker, eg. width, height… |
| date | – | string | date | Moment instance |
Specify the display date of DatePicker. string type value must match the specified format |
| mode | ‘date’ | enum |
The enum of date, datetime and time |
| androidMode | ‘default’ | enum |
The enum of default, calendar and spinner (only Android) |
| format | ‘YYYY-MM-DD’ | string |
Specify the display format of the date, which using moment.js. The default value change according to the mode. |
| confirmBtnText | ‘确定’ | string |
Specify the text of confirm btn in ios. |
| cancelBtnText | ‘取消’ | string |
Specify the text of cancel btn in ios. |
| iconSource | – | {uri: string} | number |
Specify the icon. Same as the source of Image, always using require() |
| minDate | – | string | date |
Restricts the range of possible date values. |
| maxDate | – | string | date |
Restricts the range of possible date values. |
| duration | 300 | number |
Specify the animation duration of datepicker. |
| customStyles | – | object |
The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput… |
| showIcon | true | boolean |
Controller whether or not show the icon |
| hideText | false | boolean |
Controller whether or not show the dateText |
| iconComponent | – | element |
Set the custom icon |
| disabled | false | boolean |
Controller whether or not disable the picker |
| is24Hour | – | boolean |
Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android |
| allowFontScaling | true | boolean |
Set to false to disable font scaling for every text component |
| placeholder | ” | string |
The placeholder show when this.props.date is falsy |
| onDateChange | – | function |
This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property. |
| onOpenModal | – | function |
This is called when the DatePicker Modal open. |
| onCloseModal | – | function |
This is called when the DatePicker Modal close |
| onPressMask | – | function |
This is called when clicking the ios modal mask |
| modalOnResponderTerminationRequest | – | function |
Set the callback for React Native’s Gesture Responder System‘s call to onResponderTerminationRequest. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases. |
| TouchableComponent | TouchableHighlight |
Component |
Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity |
| getDateStr | – | Function | A function to override how to format the date into a String for display, receives a Date instance |
Property customStyles available keys
- appearance:
dateInput,disabled,dateTouchBody,dateIcon,placeholderText,dateText - ios select panel:
datePickerCon,datePicker,btnConfirm,btnTextConfirm,btnCancel,btnTextCancel
Instance Methods
| Method | Params | Description |
|---|---|---|
| onPressDate | – | Manually open the date picker panel |
| onPressCancel | – | Manually close the date picker panel like, similarly pressing cancel btn |
Source: https://github.com/xgfe/react-native-datepicker
