├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── remobile │ └── datetimepicker │ ├── DatePicker.java │ ├── RCTDateTimePicker.java │ ├── RCTDateTimePickerPackage.java │ └── TimePicker.java ├── index.js ├── libs ├── DateTimePicker.js ├── android │ └── DateTimePicker.js └── ios │ ├── DateTimePicker.js │ └── overlay.js ├── package.json └── screencasts ├── android ├── 1.png └── 2.png └── ios ├── 1.png ├── 2.png └── 3.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.[aod] 2 | *.DS_Store 3 | .DS_Store 4 | *Thumbs.db 5 | .gradle 6 | *.iml 7 | .idea 8 | npm-debug.log 9 | /android/build 10 | /ios/**/*xcuserdata* 11 | /ios/**/*xcshareddata* 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .DS_Store 3 | *Thumbs.db 4 | .gradle 5 | .idea 6 | *.iml 7 | npm-debug.log 8 | node_modules 9 | /android/build 10 | /ios/**/*xcuserdata* 11 | /ios/**/*xcshareddata* 12 | 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | (The MIT License) 2 | 3 | Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com> 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | 'Software'), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native FileTransfer (remobile) 2 | A datetime-picker for react-native support for android and ios 3 | 4 | ## Installation 5 | ```sh 6 | npm install @remobile/react-native-datetime-picker --save 7 | ``` 8 | 9 | ### Installation (iOS) 10 | * not need install, on ios use js write 11 | 12 | ### Installation (Android) 13 | ```gradle 14 | ... 15 | include ':react-native-datetime-picker' 16 | project(':react-native-datetime-picker').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-datetime-picker/android') 17 | ``` 18 | 19 | * In `android/app/build.gradle` 20 | 21 | ```gradle 22 | ... 23 | dependencies { 24 | ... 25 | compile project(':react-native-datetime-picker') 26 | } 27 | ``` 28 | 29 | * register module (in MainActivity.java) 30 | 31 | ```java 32 | import com.remobile.datetimepicker.*; // <--- import 33 | 34 | public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { 35 | ...... 36 | @Override 37 | protected void onCreate(Bundle savedInstanceState) { 38 | super.onCreate(savedInstanceState); 39 | mReactRootView = new ReactRootView(this); 40 | 41 | mReactInstanceManager = ReactInstanceManager.builder() 42 | .setApplication(getApplication()) 43 | .setBundleAssetName("index.android.bundle") 44 | .setJSMainModuleName("index.android") 45 | .addPackage(new MainReactPackage()) 46 | .addPackage(new RCTDateTimePickerPackage()) // <------ add here 47 | .setUseDeveloperSupport(BuildConfig.DEBUG) 48 | .setInitialLifecycleState(LifecycleState.RESUMED) 49 | .build(); 50 | 51 | mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); 52 | 53 | setContentView(mReactRootView); 54 | } 55 | 56 | ...... 57 | } 58 | ``` 59 | 60 | ### Screencasts 61 | * ios 62 |
63 | ![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/1.png) 64 | ![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/2.png) 65 | ![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/3.png) 66 |
67 | * android 68 |
69 | ![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/android/1.png) 70 | ![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/android/2.png) 71 | 72 | 73 | ## Usage 74 | use as follows: 75 | ```js 76 | {this.picker=picker}}/> 77 | ... 78 | this.picker.showDatePicker(...) 79 | this.picker.showTimePicker(...) 80 | ``` 81 | * on ios, make sure must on topest view 82 | 83 | ### Example 84 | ```js 85 | 'use strict'; 86 | 87 | var React = require('react-native'); 88 | var { 89 | StyleSheet, 90 | TouchableOpacity, 91 | View, 92 | Text, 93 | } = React; 94 | 95 | var DateTimePicker = require('@remobile/react-native-datetime-picker'); 96 | var Button = require('@remobile/react-native-simple-button'); 97 | 98 | module.exports = React.createClass({ 99 | getInitialState() { 100 | return { 101 | date: new Date(), 102 | } 103 | }, 104 | showDatePicker() { 105 | var date = this.state.date; 106 | this.picker.showDatePicker(date, (d)=>{ 107 | this.setState({date:d}); 108 | }); 109 | }, 110 | showTimePicker() { 111 | var date = this.state.date; 112 | this.picker.showTimePicker(date, (d)=>{ 113 | this.setState({date:d}); 114 | }); 115 | }, 116 | render() { 117 | return ( 118 | 119 | 120 | {this.state.date.toString()} 121 | 122 | 123 | 124 | 125 | 126 | {this.picker=picker}}/> 127 | 128 | ); 129 | }, 130 | }); 131 | 132 | var styles = StyleSheet.create({ 133 | container: { 134 | flex: 1, 135 | justifyContent: 'center', 136 | paddingTop:20, 137 | }, 138 | }); 139 | ``` 140 | 141 | ### Methods 142 | 143 | * showDatePicker(date, callback(date)) 144 | * showTimePicker(date, callback(date)) 145 | 146 | ### Caution 147 | * don't need set any props for 148 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.1" 6 | 7 | defaultConfig { 8 | minSdkVersion 16 9 | targetSdkVersion 22 10 | versionCode 1 11 | versionName "1.0" 12 | } 13 | buildTypes { 14 | release { 15 | minifyEnabled false 16 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 17 | } 18 | } 19 | } 20 | 21 | dependencies { 22 | compile fileTree(dir: 'libs', include: ['*.jar']) 23 | compile 'com.android.support:appcompat-v7:23.0.1' 24 | compile 'com.facebook.react:react-native:0.16.+' 25 | } 26 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/java/com/remobile/datetimepicker/DatePicker.java: -------------------------------------------------------------------------------- 1 | package com.remobile.datetimepicker; 2 | 3 | import android.app.DatePickerDialog; 4 | import android.app.Dialog; 5 | import android.app.DialogFragment; 6 | import android.content.Context; 7 | import android.os.Bundle; 8 | import android.util.Log; 9 | 10 | import java.util.Calendar; 11 | 12 | import com.facebook.react.bridge.Callback; 13 | import com.facebook.react.bridge.ReadableMap; 14 | 15 | 16 | public class DatePicker extends DialogFragment implements DatePickerDialog.OnDateSetListener { 17 | 18 | private Callback callback; 19 | private int year, month, day; 20 | 21 | public DatePicker(ReadableMap options, Callback callback) { 22 | final Calendar c = Calendar.getInstance(); 23 | this.callback = callback; 24 | year = options.hasKey("year") ? options.getInt("year") : c.get(Calendar.YEAR); 25 | month = options.hasKey("month") ? options.getInt("month") : c.get(Calendar.MONTH); 26 | day = options.hasKey("day") ? options.getInt("day") : c.get(Calendar.DAY_OF_MONTH); 27 | } 28 | 29 | @Override 30 | public Dialog onCreateDialog(Bundle savedInstanceState) { 31 | Dialog picker = new RCTDatePickDialog(getActivity(), this, year, month, day); 32 | return picker; 33 | } 34 | 35 | @Override 36 | public void onDateSet(android.widget.DatePicker datePicker, int year, int month, int day) { 37 | callback.invoke(year, month, day); 38 | } 39 | 40 | class RCTDatePickDialog extends DatePickerDialog { 41 | public RCTDatePickDialog(Context context, OnDateSetListener callBack, 42 | int year, int monthOfYear, int dayOfMonth) { 43 | super(context, callBack, year, monthOfYear, dayOfMonth); 44 | } 45 | 46 | @Override 47 | protected void onStop() { 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /android/src/main/java/com/remobile/datetimepicker/RCTDateTimePicker.java: -------------------------------------------------------------------------------- 1 | package com.remobile.datetimepicker; 2 | 3 | import android.app.Activity; 4 | import android.app.DialogFragment; 5 | 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 8 | import com.facebook.react.bridge.ReactMethod; 9 | import com.facebook.react.bridge.Callback; 10 | import com.facebook.react.bridge.ReadableMap; 11 | 12 | public class RCTDateTimePicker extends ReactContextBaseJavaModule { 13 | private Activity activity; 14 | 15 | public RCTDateTimePicker(ReactApplicationContext reactContext, Activity activity) { 16 | super(reactContext); 17 | this.activity = activity; 18 | } 19 | 20 | @Override 21 | public String getName() { 22 | return "DateTimePicker"; 23 | } 24 | 25 | @ReactMethod 26 | public void showDatePicker(ReadableMap options, Callback callback) { 27 | DialogFragment datePicker = new DatePicker(options, callback); 28 | datePicker.show(activity.getFragmentManager(), "datePicker"); 29 | } 30 | 31 | @ReactMethod 32 | public void showTimePicker(ReadableMap options, Callback callback) { 33 | DialogFragment timePicker = new TimePicker(options, callback); 34 | timePicker.show(activity.getFragmentManager(), "timePicker"); 35 | } 36 | } -------------------------------------------------------------------------------- /android/src/main/java/com/remobile/datetimepicker/RCTDateTimePickerPackage.java: -------------------------------------------------------------------------------- 1 | package com.remobile.datetimepicker; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.Collections; 10 | import java.util.List; 11 | import java.util.ArrayList; 12 | 13 | import android.app.Activity; 14 | 15 | public class RCTDateTimePickerPackage implements ReactPackage { 16 | 17 | private Activity activity; 18 | private RCTDateTimePicker mModuleInstance; 19 | 20 | public RCTDateTimePickerPackage(Activity activity) { 21 | super(); 22 | this.activity = activity; 23 | } 24 | 25 | @Override 26 | public List createNativeModules( 27 | ReactApplicationContext reactContext) { 28 | List modules = new ArrayList<>(); 29 | 30 | modules.add(new RCTDateTimePicker(reactContext, activity)); 31 | 32 | return modules; 33 | } 34 | 35 | public List> createJSModules() { 36 | return Collections.emptyList(); 37 | } 38 | 39 | @Override 40 | public List createViewManagers(ReactApplicationContext reactContext) { 41 | return Collections.emptyList(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /android/src/main/java/com/remobile/datetimepicker/TimePicker.java: -------------------------------------------------------------------------------- 1 | package com.remobile.datetimepicker; 2 | 3 | import android.app.DatePickerDialog; 4 | import android.app.DialogFragment; 5 | import android.app.TimePickerDialog; 6 | import android.app.Dialog; 7 | import android.content.Context; 8 | import android.os.Bundle; 9 | 10 | import java.util.Calendar; 11 | 12 | import com.facebook.react.bridge.Callback; 13 | import com.facebook.react.bridge.ReadableMap; 14 | 15 | import android.text.format.DateFormat; 16 | 17 | public class TimePicker extends DialogFragment implements TimePickerDialog.OnTimeSetListener { 18 | 19 | private Callback callback; 20 | private int hour, minute; 21 | 22 | public TimePicker(ReadableMap options, Callback callback) { 23 | final Calendar c = Calendar.getInstance(); 24 | this.callback = callback; 25 | hour = options.hasKey("hour") ? options.getInt("hour") : c.get(Calendar.HOUR_OF_DAY); 26 | minute = options.hasKey("minute") ? options.getInt("minute") : c.get(Calendar.MINUTE); 27 | } 28 | 29 | @Override 30 | public Dialog onCreateDialog(Bundle savedInstanceState) { 31 | return new RCTTimePickerDialog(getActivity(), this, hour, minute, DateFormat.is24HourFormat(getActivity())); 32 | } 33 | 34 | @Override 35 | public void onTimeSet(android.widget.TimePicker datePicker, int hour, int minute) { 36 | callback.invoke(hour, minute); 37 | } 38 | 39 | class RCTTimePickerDialog extends TimePickerDialog { 40 | public RCTTimePickerDialog(Context context, OnTimeSetListener listener, int hourOfDay, int minute, 41 | boolean is24HourView) { 42 | super(context, listener, hourOfDay, minute, is24HourView); 43 | } 44 | 45 | @Override 46 | protected void onStop() { 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (The MIT License) 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com> 4 | * @providesModule DateTimePicker 5 | * @flow-weak 6 | */ 7 | 'use strict'; 8 | const DateTimePicker = require('./libs/DateTimePicker.js'); 9 | 10 | module.exports = DateTimePicker; 11 | -------------------------------------------------------------------------------- /libs/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const React = require('react-native'); 4 | const { 5 | Platform, 6 | } = React; 7 | 8 | const DateTimePickerAndroid = require('./android/DateTimePicker.js'); 9 | const DateTimePickerIOS = require('./ios/DateTimePicker.js'); 10 | const DateTimePicker = (Platform.OS === 'android') ? DateTimePickerAndroid : DateTimePickerIOS; 11 | 12 | module.exports = DateTimePicker; 13 | -------------------------------------------------------------------------------- /libs/android/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const React = require('react-native'); 4 | const { 5 | View, 6 | NativeModules, 7 | } = React; 8 | 9 | const RCTDateTimePicker= NativeModules.DateTimePicker; 10 | 11 | 12 | 13 | module.exports = React.createClass({ 14 | showDatePicker(date, callback) { 15 | date = date || new Date(); 16 | const options = {year:date.getFullYear(), month:date.getMonth(), day:date.getDate()}; 17 | RCTDateTimePicker.showDatePicker(options, function (year, month, day) { 18 | date.setFullYear(year); 19 | date.setMonth(month); 20 | date.setDate(day); 21 | callback(date); 22 | }); 23 | }, 24 | showTimePicker(date, callback) { 25 | date = date || new Date(); 26 | const options = {hour:date.getHours(), minute:date.getMinutes()}; 27 | RCTDateTimePicker.showTimePicker(options, function (hour, minute) { 28 | date.setHours(hour); 29 | date.setMinutes(minute); 30 | callback(date); 31 | }); 32 | }, 33 | render() { 34 | return ( 35 | null 36 | ) 37 | } 38 | }); 39 | -------------------------------------------------------------------------------- /libs/ios/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (The MIT License) 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com> 4 | * @providesModule ActionSheet1 5 | * @flow-weak 6 | */ 7 | 'use strict'; 8 | 9 | const React = require('react-native'); 10 | const { 11 | StyleSheet, 12 | View, 13 | DatePickerIOS, 14 | TouchableOpacity, 15 | Navigator, 16 | Text, 17 | } = React; 18 | 19 | const Overlay = require('./overlay.js'); 20 | const Button = require('@remobile/react-native-simple-button'); 21 | 22 | module.exports = React.createClass({ 23 | getInitialState() { 24 | return { 25 | visible: false, 26 | mode: 'date', 27 | date: new Date(), 28 | }; 29 | }, 30 | showDatePicker(date, callback) { 31 | this.callback = callback; 32 | date = date || new Date(); 33 | 34 | this.setState({ 35 | mode: 'date', 36 | visible: true, 37 | date: date, 38 | }); 39 | }, 40 | showTimePicker(date, callback) { 41 | this.callback = callback; 42 | date = date || new Date(); 43 | 44 | this.setState({ 45 | mode: 'time', 46 | visible: true, 47 | date: date, 48 | }); 49 | }, 50 | onClose() { 51 | this.setState({ 52 | visible: false, 53 | }); 54 | }, 55 | onComplete() { 56 | this.setState({ 57 | visible: false, 58 | }); 59 | this.callback(this.state.date); 60 | }, 61 | onDateChange(date) { 62 | this.setState({date: date}); 63 | }, 64 | render() { 65 | return this.state.visible && ( 66 | 67 | 68 | 72 | 78 | 79 | 82 | 86 | 87 | 88 | ); 89 | }, 90 | }); 91 | 92 | const sr = app.Screen; 93 | const styles = StyleSheet.create({ 94 | actionSheetContainer: { 95 | height: sr.h-Navigator.NavigationBar.Styles.General.TotalNavHeight, 96 | justifyContent: "center", 97 | backgroundColor: 'rgba(0, 0, 0, 0.5)', 98 | }, 99 | datePicker: { 100 | backgroundColor: 'white', 101 | }, 102 | touchableOpacity: { 103 | flex: 1, 104 | }, 105 | button: { 106 | paddingVertical: 10, 107 | backgroundColor: 'white', 108 | }, 109 | separator: { 110 | height: 1, 111 | backgroundColor: '#CCC' 112 | }, 113 | }); 114 | -------------------------------------------------------------------------------- /libs/ios/overlay.js: -------------------------------------------------------------------------------- 1 | /* 2 | * (The MIT License) 3 | * Copyright (c) 2015-2016 YunJiang.Fang <42550564@qq.com> 4 | */ 5 | 'use strict'; 6 | 7 | const React = require('react-native'); 8 | const { Animated, StyleSheet, View, Dimensions} = React; 9 | 10 | const DEFAULT_ANIMATE_TIME = 200; 11 | 12 | module.exports = React.createClass({ 13 | getInitialState() { 14 | return { 15 | fadeAnim: new Animated.Value(0), 16 | }; 17 | }, 18 | componentWillMount() { 19 | return Animated.timing(this.state.fadeAnim, { 20 | toValue: this.props.visible ? 1 : 0, 21 | duration: DEFAULT_ANIMATE_TIME 22 | }).start(); 23 | }, 24 | render() { 25 | return ( 26 | 27 | {this.props.children} 28 | 29 | ); 30 | } 31 | }); 32 | 33 | const styles = StyleSheet.create({ 34 | overlay: { 35 | top: 0, 36 | bottom: 0, 37 | left: 0, 38 | right: 0, 39 | backgroundColor: 'transparent', 40 | position: 'absolute' 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@remobile/react-native-datetime-picker", 3 | "version": "1.0.4", 4 | "description": "A datetime-picker for react-native support for android and ios", 5 | "main": "index.js", 6 | "author": { 7 | "name": "YunJiang.Fang", 8 | "email": "42550564@qq.com" 9 | }, 10 | "license": "MIT", 11 | "keywords": [ 12 | "react-native", 13 | "react-component", 14 | "ios", 15 | "android", 16 | "datetime-picker", 17 | "picker", 18 | "datetime", 19 | "date", 20 | "time", 21 | "remobile", 22 | "mobile" 23 | ], 24 | "homepage": "https://github.com/remobile/react-native-datetime-picker", 25 | "bugs": { 26 | "url": "https://github.com/remobile/react-native-datetime-picker/issues" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "git://github.com/remobile/react-native-datetime-picker.git" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /screencasts/android/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remobile/react-native-datetime-picker/4ad31bd9ca03d61f4012a30cf6bc4d587627adb5/screencasts/android/1.png -------------------------------------------------------------------------------- /screencasts/android/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remobile/react-native-datetime-picker/4ad31bd9ca03d61f4012a30cf6bc4d587627adb5/screencasts/android/2.png -------------------------------------------------------------------------------- /screencasts/ios/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remobile/react-native-datetime-picker/4ad31bd9ca03d61f4012a30cf6bc4d587627adb5/screencasts/ios/1.png -------------------------------------------------------------------------------- /screencasts/ios/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remobile/react-native-datetime-picker/4ad31bd9ca03d61f4012a30cf6bc4d587627adb5/screencasts/ios/2.png -------------------------------------------------------------------------------- /screencasts/ios/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remobile/react-native-datetime-picker/4ad31bd9ca03d61f4012a30cf6bc4d587627adb5/screencasts/ios/3.png --------------------------------------------------------------------------------