0.0.1

.npmignore

@@ -0,0 +1,34 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log

DateTime.android.js

@@ -0,0 +1,56 @@
+/**
+ * Created by CnJon on 16/1/21.
+ */
+'use strict';
+
+import React,{
+    Component,
+    View,
+    NativeModules
+} from 'react-native';
+
+const RCTDateTimePicker = NativeModules.DateTimePicker;
+
+export default class DateTimePicker extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    showDatePicker(date, callback) {
+        date = date || new Date();
+        var options = {year:date.getFullYear(), month:date.getMonth(), day:date.getDate()};
+        RCTDateTimePicker.showDatePicker(options, function (year, month, day) {
+            date.setFullYear(year);
+            date.setMonth(month);
+            date.setDate(day);
+            callback(date);
+        });
+    }
+
+    showTimePicker(date, callback) {
+        date = date || new Date();
+        var options = {hour:date.getHours(), minute:date.getMinutes()};
+        RCTDateTimePicker.showTimePicker(options, function (hour, minute) {
+            date.setHours(hour);
+            date.setMinutes(minute);
+            callback(date);
+        });
+    }
+
+    showDateTimePicker(date, callback) {
+        date = date || new Date();
+        var options = {year:date.getFullYear(), month:date.getMonth(), day:date.getDate(), hour:date.getHours(), minute:date.getMinutes()};
+        RCTDateTimePicker.showDateTimePicker(options, function (year, month, day, hour, minute) {
+            date.setFullYear(year);
+            date.setMonth(month);
+            date.setDate(day);
+            date.setHours(hour);
+            date.setMinutes(minute);
+            callback(date);
+        });
+    }
+
+    render() {
+        return null;
+    }
+}

DateTime.ios.js

@@ -0,0 +1,125 @@
+/**
+ * Created by CnJon on 16/1/21.
+ */
+'use strict';
+
+import React,{
+    Component,
+    StyleSheet,
+    View,
+    DatePickerIOS,
+    TouchableOpacity,
+    Navigator,
+    Text,
+    Dimensions
+} from 'react-native';
+
+const Screen = Dimensions.get('window');
+
+export default class DateTimePicker extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false,
+            mode: 'date',
+            date: new Date()
+        }
+    }
+
+    showDatePicker(date, callback) {
+        this.callback = callback;
+        date = (date || new Date());
+
+        this.setState({
+            mode: 'date',
+            visible: true,
+            date: new Date(),
+        });
+    }
+
+    showTimePicker(date, callback) {
+        this.callback = callback;
+        date = (date || new Date());
+
+        this.setState({
+            mode: 'time',
+            visible: true,
+            date: date,
+        });
+    }
+
+    showDateTimePicker(date, callback) {
+        this.callback = callback;
+        date = (date || new Date());
+
+        this.setState({
+            mode: 'datetime',
+            visible: true,
+            date: date,
+        });
+    }
+
+    onClose() {
+        this.setState({
+            visible: false,
+        });
+    }
+
+    onComplete() {
+        this.setState({
+            visible: false,
+        });
+        this.callback(this.state.date);
+    }
+
+    onDateChange(date) {
+        this.setState({date: date});
+    }
+
+    render() {
+        return this.state.visible && (
+                <View style={styles.actionSheetContainer}>
+                    <TouchableOpacity
+                        style={styles.touchableOpacity}
+                        activeOpacity={1}
+                        onPress={this.onClose} />
+                    <DatePickerIOS
+                        date={this.state.date}
+                        mode={this.state.mode}
+                        onDateChange={this.onDateChange}
+                        style = {styles.datePicker}
+                    />
+                    <View style={styles.separator}/>
+                    <TouchableOpacity
+                        onPress={this.onComplete}
+                        style={styles.button}><Text>完成</Text></TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.touchableOpacity}
+                        activeOpacity={1}
+                        onPress={this.onClose} />
+                </View>
+            );
+    }
+}
+
+const styles = StyleSheet.create({
+    actionSheetContainer: {
+        height: Screen.height,
+        justifyContent: "center",
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    datePicker: {
+        backgroundColor: 'white',
+    },
+    touchableOpacity: {
+        flex: 1,
+    },
+    button: {
+        paddingVertical: 10,
+        backgroundColor: 'white',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: '#CCC'
+    }
+});

README.md

@@ -1 +1,147 @@
-# react-native-datetime
+# React Native DateTime
+A datetime-picker for react-native support for android and ios(base on @remobile/react-native-datetime-picker)
+
+## Installation
+```sh
+npm install react-native-datetime --save
+```
+
+### Installation (iOS)
+* not need install, on ios use js write
+
+### Installation (Android)
+```gradle
+...
+include ':react-native-datetime'
+project(':react-native-datetime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-datetime/android')
+```
+
+* In `android/app/build.gradle`
+
+```gradle
+...
+dependencies {
+    ...
+    compile project(':react-native-datetime')
+}
+```
+
+* register module (in MainActivity.java)
+
+```java
+import com.keyee.datetime.*;  // <--- import
+
+public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
+  ......
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    mReactRootView = new ReactRootView(this);
+
+    mReactInstanceManager = ReactInstanceManager.builder()
+      .setApplication(getApplication())
+      .setBundleAssetName("index.android.bundle")
+      .setJSMainModuleName("index.android")
+      .addPackage(new MainReactPackage())
+      .addPackage(new RCTDateTimePickerPackage())              // <------ add here
+      .setUseDeveloperSupport(BuildConfig.DEBUG)
+      .setInitialLifecycleState(LifecycleState.RESUMED)
+      .build();
+
+    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
+
+    setContentView(mReactRootView);
+  }
+
+  ......
+}
+```
+
+### Screencasts
+* ios
+<br>
+![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/1.png)
+![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/2.png)
+![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/ios/3.png)
+<br>
+* android
+<br>
+![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/android/1.png)
+![image](https://github.com/remobile/react-native-datetime-picker/blob/master/screencasts/android/2.png)
+
+
+## Usage
+use as follows:
+```js
+<DateTimePicker ref={(picker)=>{this.picker=picker}}/>
+...
+this.picker.showDatePicker(...)
+this.picker.showTimePicker(...)
+```
+* on ios, make sure <DateTimePicker> must on topest view
+
+### Example
+```js
+'use strict';
+
+var React = require('react-native');
+var {
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Text,
+} = React;
+
+var DateTimePicker = require('@remobile/react-native-datetime-picker');
+var Button = require('@remobile/react-native-simple-button');
+
+module.exports = React.createClass({
+    getInitialState() {
+        return {
+            date: new Date(),
+        }
+    },
+    showDatePicker() {
+        var date = this.state.date;
+        this.picker.showDatePicker(date, (d)=>{
+            this.setState({date:d});
+        });
+    },
+    showTimePicker() {
+        var date = this.state.date;
+        this.picker.showTimePicker(date, (d)=>{
+            this.setState({date:d});
+        });
+    },
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={{textAlign: 'center'}}>
+                    {this.state.date.toString()}
+                </Text>
+                <View style={{height:40}} />
+                <Button onPress={this.showDatePicker}>showDatePicker</Button>
+                <View style={{height:40}} />
+                <Button onPress={this.showTimePicker}>showTimePicker</Button>
+                <DateTimePicker ref={(picker)=>{this.picker=picker}}/>
+            </View>
+        );
+    },
+});
+
+var styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        paddingTop:20,
+    },
+});
+```
+
+### Methods
+
+* showDatePicker(date, callback(date))
+* showTimePicker(date, callback(date))
+
+### Caution
+* don't need set any props for <DateTimePicker>

android/build.gradle

@@ -0,0 +1,25 @@
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.1'
+    compile 'com.facebook.react:react-native:0.17.+'
+}