add showDateTimePicker

README.md

@@ -43,7 +43,7 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
       .setBundleAssetName("index.android.bundle")
       .setJSMainModuleName("index.android")
       .addPackage(new MainReactPackage())
-      .addPackage(new RCTDateTimePickerPackage())              // <------ add here
+      .addPackage(new RCTDateTimePickerPackage(this))              // <------ add here
       .setUseDeveloperSupport(BuildConfig.DEBUG)
       .setInitialLifecycleState(LifecycleState.RESUMED)
       .build();
@@ -63,11 +63,13 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
 ![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)
+![image](https://github.com/cnjon/react-native-datetime-picker/blob/master/screencasts/ios/4.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)
+![image](https://github.com/cnjon/react-native-datetime-picker/blob/master/screencasts/android/3.png)
 
 
 ## Usage
@@ -77,6 +79,7 @@ use as follows:
 ...
 this.picker.showDatePicker(...)
 this.picker.showTimePicker(...)
+this.picker.showDateTimePicker(...)
 ```
 * on ios, make sure <DateTimePicker> must on topest view
 
@@ -113,6 +116,12 @@ module.exports = React.createClass({
             this.setState({date:d});
         });
     },
+    showDateTimePicker() {
+        var date = this.state.date;
+        this.picker.showDateTimePicker(date, (d)=>{
+            this.setState({date:d});
+        });
+    },
     render() {
         return (
             <View style={styles.container}>
@@ -123,6 +132,8 @@ module.exports = React.createClass({
                 <Button onPress={this.showDatePicker}>showDatePicker</Button>
                 <View style={{height:40}} />
                 <Button onPress={this.showTimePicker}>showTimePicker</Button>
+                <View style={{height:40}} />
+                <Button onPress={this.showDateTimePicker}>showDateTimePicker</Button>
                 <DateTimePicker ref={(picker)=>{this.picker=picker}}/>
             </View>
         );
@@ -142,6 +153,7 @@ var styles = StyleSheet.create({
 
 * showDatePicker(date, callback(date))
 * showTimePicker(date, callback(date))
+* showDateTimePicker(date, callback(date))
 
 ### Caution
 * don't need set any props for <DateTimePicker>

android/src/main/java/com/remobile/datetimepicker/DateTimePicker.java

@@ -0,0 +1,113 @@
+package com.remobile.datetimepicker;
+
+import android.app.Activity;
+import android.app.Dialog;
+import android.app.DialogFragment;
+import android.content.DialogInterface;
+import android.widget.DatePicker;
+import android.widget.DatePicker.OnDateChangedListener;
+import android.widget.TimePicker;
+import android.widget.TimePicker.OnTimeChangedListener;
+import android.content.Context;
+import android.os.Bundle;
+import android.util.Log;
+
+import android.app.AlertDialog;
+import android.widget.LinearLayout;
+import android.widget.EditText;
+
+import java.util.Calendar;
+import android.text.format.DateFormat;
+
+import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.ReadableMap;
+
+
+public class DateTimePicker extends DialogFragment implements OnDateChangedListener,OnTimeChangedListener,DialogInterface.OnClickListener
+{
+    static final String TAG = DateTimePicker.class.getSimpleName();
+    private Callback callback;
+    private int year, month, day;
+    private int hour, minute;
+
+    private LinearLayout dateTimeLayout;
+    private DatePicker datePicker;
+    private TimePicker timePicker;
+    private AlertDialog ad;
+
+    private String currentDateTime;
+
+    public DateTimePicker(ReadableMap options, Callback callback) {
+        final Calendar c = Calendar.getInstance();
+        this.callback = callback;
+        year = options.hasKey("year") ? options.getInt("year") : c.get(Calendar.YEAR);
+        month = options.hasKey("month") ? options.getInt("month") : c.get(Calendar.MONTH);
+        day = options.hasKey("day") ? options.getInt("day") : c.get(Calendar.DAY_OF_MONTH);
+        hour = options.hasKey("hour") ? options.getInt("hour") : c.get(Calendar.HOUR_OF_DAY);
+        minute = options.hasKey("minute") ? options.getInt("minute") : c.get(Calendar.MINUTE);
+    }
+
+    private void setCurrentDatetime(){
+        currentDateTime = year +"/"+(month+1)+"/"+day+" "+hour+":"+minute;
+        datePicker.init(year, month, day, this);
+        timePicker.setCurrentHour(hour);
+        timePicker.setCurrentMinute(minute);
+    }
+
+    @Override
+    public Dialog onCreateDialog(Bundle savedInstanceState) {
+        if (datePicker == null){
+            datePicker = new DatePicker(this.getActivity());
+            datePicker.setCalendarViewShown(false);
+        }
+        if (timePicker == null){
+            timePicker = new TimePicker(this.getActivity());
+            timePicker.setIs24HourView(DateFormat.is24HourFormat(getActivity()));
+            timePicker.setOnTimeChangedListener(this);
+        }
+        if (dateTimeLayout == null){
+            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
+                LinearLayout.LayoutParams.WRAP_CONTENT,
+                LinearLayout.LayoutParams.WRAP_CONTENT
+            );
+            dateTimeLayout = new LinearLayout(this.getActivity());
+            dateTimeLayout.setLayoutParams(params);
+            dateTimeLayout.setOrientation(LinearLayout.VERTICAL);
+            dateTimeLayout.addView(datePicker);
+            dateTimeLayout.addView(timePicker);
+        }
+        setCurrentDatetime();
+        ad = new AlertDialog.Builder(this.getActivity())
+            .setTitle(currentDateTime)
+            .setView(dateTimeLayout)
+            .setPositiveButton("设置", this)
+            .setNegativeButton("取消", new DialogInterface.OnClickListener() {
+                public void onClick(DialogInterface dialog, int whichButton) {}
+            }).show();
+        return ad;
+    }
+
+    public void onClick(DialogInterface dialog, int whichButton) {
+        this.callback.invoke(this.year, this.month, this.day, this.hour, this.minute);
+    }
+
+    private void setTitle(){
+        if (ad != null){
+            currentDateTime = year +"/"+(month+1)+"/"+day+" "+hour+":"+minute;
+            ad.setTitle(currentDateTime);
+        }
+    }
+
+    public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
+        this.year = year;
+        this.month = monthOfYear;
+        this.day = dayOfMonth;
+        setTitle();
+    }
+
+    public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
+        this.hour = hourOfDay;
+        this.minute = minute;
+        setTitle();
+    }
+}

android/src/main/java/com/remobile/datetimepicker/RCTDateTimePicker.java

@@ -33,4 +33,10 @@ public void showTimePicker(ReadableMap options, Callback callback) {
         DialogFragment timePicker = new TimePicker(options, callback);
         timePicker.show(activity.getFragmentManager(), "timePicker");
     }
+
+    @ReactMethod
+    public void showDateTimePicker(ReadableMap options, Callback callback) {
+        DialogFragment datetimePicker = new DateTimePicker(options, callback);
+        datetimePicker.show(activity.getFragmentManager(), "datetimePicker");
+    }
 }

libs/android/DateTimePicker.js

@@ -30,6 +30,18 @@ module.exports =  React.createClass({
             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

libs/ios/DateTimePicker.js

@@ -14,6 +14,7 @@ var {
     TouchableOpacity,
     Navigator,
     Text,
+    Dimensions
 } = React;
 
 var Overlay = require('./overlay.js');
@@ -29,24 +30,34 @@ module.exports =  React.createClass({
     },
     showDatePicker(date, callback) {
         this.callback = callback;
-        date = date || new Date();
+        date = (date || new Date());
 
         this.setState({
             mode: 'date',
             visible: true,
-            date: date,
+            date: new Date(),
         });
     },
     showTimePicker(date, callback) {
         this.callback = callback;
-        date = date || new Date();
+        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,
@@ -59,6 +70,8 @@ module.exports =  React.createClass({
         this.callback(this.state.date);
     },
     onDateChange(date) {
+        console.log('onDateChange');
+        console.log(date);
         this.setState({date: date});
     },
     render() {
@@ -89,10 +102,11 @@ module.exports =  React.createClass({
     },
 });
 
-var sr = app.Screen;
+const Screen = Dimensions.get('window');
+
 var styles = StyleSheet.create({
     actionSheetContainer: {
-        height: sr.h-Navigator.NavigationBar.Styles.General.TotalNavHeight,
+        height: Screen.height-Navigator.NavigationBar.Styles.General.TotalNavHeight,
         justifyContent: "center",
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@remobile/react-native-datetime-picker",
-        "version": "1.0.3",
+        "version": "1.0.4",
         "description": "A datetime-picker for react-native support for android and ios",
         "main": "index.js",
         "author": {