diff --git a/README.md b/README.md
index de52d7d..e33bd85 100644
--- a/README.md
+++ b/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
+
* android
+
## Usage
@@ -77,6 +79,7 @@ use as follows:
...
this.picker.showDatePicker(...)
this.picker.showTimePicker(...)
+this.picker.showDateTimePicker(...)
```
* on ios, make sure 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 (
@@ -123,6 +132,8 @@ module.exports = React.createClass({
+
+
{this.picker=picker}}/>
);
@@ -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
diff --git a/android/src/main/java/com/remobile/datetimepicker/DateTimePicker.java b/android/src/main/java/com/remobile/datetimepicker/DateTimePicker.java
new file mode 100644
index 0000000..0aa4306
--- /dev/null
+++ b/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();
+ }
+}
\ No newline at end of file
diff --git a/android/src/main/java/com/remobile/datetimepicker/RCTDateTimePicker.java b/android/src/main/java/com/remobile/datetimepicker/RCTDateTimePicker.java
index cb0a625..bfd3142 100644
--- a/android/src/main/java/com/remobile/datetimepicker/RCTDateTimePicker.java
+++ b/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");
+ }
}
\ No newline at end of file
diff --git a/libs/android/DateTimePicker.js b/libs/android/DateTimePicker.js
index 16ef27b..0239dd0 100644
--- a/libs/android/DateTimePicker.js
+++ b/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
diff --git a/libs/ios/DateTimePicker.js b/libs/ios/DateTimePicker.js
index bca457d..4fcd973 100644
--- a/libs/ios/DateTimePicker.js
+++ b/libs/ios/DateTimePicker.js
@@ -14,6 +14,7 @@ var {
TouchableOpacity,
Navigator,
Text,
+ Dimensions
} = React;
var Overlay = require('./overlay.js');
@@ -29,17 +30,17 @@ 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',
@@ -47,6 +48,16 @@ module.exports = React.createClass({
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)',
},
diff --git a/package.json b/package.json
index 3160ffd..f2e55c3 100644
--- a/package.json
+++ b/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": {
diff --git a/screencasts/android/3.png b/screencasts/android/3.png
new file mode 100644
index 0000000..690c267
Binary files /dev/null and b/screencasts/android/3.png differ
diff --git a/screencasts/ios/4.png b/screencasts/ios/4.png
new file mode 100644
index 0000000..5e95769
Binary files /dev/null and b/screencasts/ios/4.png differ