The so called "iOS clone" looks and works similar to the ios version. It shows normally 5 lines of dates. It is enabled by default.
@@ -260,8 +309,12 @@ Set mode property to `time` to show the time picker:
/>
```
-## Why another React Native datepicker?
+## About
+
+React Native Date Picker is a cross platform component for iOS and Android. It uses native code from respective platform to get the genuine look and feel the users expect. A strong motivation for creating this picker was the datetime mode on Android. It's quite unique for the platform and avoids two different picker popups, which normally is necessary. Instead, this datetime mode requires fewer user actions and enables a great user-experience.
+
+## Support this package!
-One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seamlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both DatePickerIOS and DatePickerAndroid are present. The reason for this is that the default date picker is implemented in separate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.
+If you like this package and want to support it, you can give it a review or a github star ⭐
-If you want to use these pickers you can combine the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particularly helpful to avoid 2 separate picker dialogs on android.
+Also, PR's are welcome!
diff --git a/android/build.gradle b/android/build.gradle
index 43b8762..f1cc0a2 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -5,11 +5,11 @@ def safeExtGet(prop, fallback) {
}
android {
- compileSdkVersion safeExtGet('compileSdkVersion', 25)
+ compileSdkVersion safeExtGet('compileSdkVersion', 29)
buildToolsVersion safeExtGet('buildToolsVersion', "25.0.3")
defaultConfig {
- minSdkVersion safeExtGet('minSdkVersion', 17)
+ minSdkVersion safeExtGet('minSdkVersion', 18)
targetSdkVersion safeExtGet('targetSdkVersion', 25)
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
diff --git a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java b/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java
index ff7be9a..97ca4eb 100644
--- a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java
+++ b/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java
@@ -1,7 +1,18 @@
package com.henninghall.date_picker;
+import android.app.AlertDialog;
+import android.app.Dialog;
+import android.app.DialogFragment;
+import android.content.DialogInterface;
+import android.os.Bundle;
+import android.view.View;
+import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
+
import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.SimpleViewManager;
@@ -20,7 +31,6 @@ import com.henninghall.date_picker.props.ModeProp;
import com.henninghall.date_picker.props.TextColorProp;
import com.henninghall.date_picker.props.UtcProp;
-import net.time4j.android.ApplicationStarter;
import java.lang.reflect.Method;
import java.util.Map;
@@ -29,7 +39,6 @@ public class DatePickerManager extends SimpleViewManager {
private static final String REACT_CLASS = "DatePickerManager";
private static final int SCROLL = 1;
- public static ThemedReactContext context;
@Override
public String getName() {
@@ -37,10 +46,11 @@ public class DatePickerManager extends SimpleViewManager {
}
@Override
- public PickerView createViewInstance(ThemedReactContext reactContext) {
- DatePickerManager.context = reactContext;
- ApplicationStarter.initialize(reactContext, false); // false = no need to prefetch on time data background tread
- return new PickerView();
+ public PickerView createViewInstance(ThemedReactContext context) {
+ return new PickerView(new LinearLayout.LayoutParams(
+ RelativeLayout.LayoutParams.MATCH_PARENT,
+ RelativeLayout.LayoutParams.MATCH_PARENT
+ ));
}
@ReactPropGroup(names = { DateProp.name, ModeProp.name, LocaleProp.name, MaximumDateProp.name,
diff --git a/android/src/main/java/com/henninghall/date_picker/DatePickerModule.java b/android/src/main/java/com/henninghall/date_picker/DatePickerModule.java
new file mode 100644
index 0000000..3b70fff
--- /dev/null
+++ b/android/src/main/java/com/henninghall/date_picker/DatePickerModule.java
@@ -0,0 +1,111 @@
+package com.henninghall.date_picker;
+
+
+import android.app.AlertDialog;
+import android.content.DialogInterface;
+import android.view.View;
+import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
+
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableMapKeySetIterator;
+
+import net.time4j.android.ApplicationStarter;
+
+public class DatePickerModule extends ReactContextBaseJavaModule {
+
+ DatePickerModule(ReactApplicationContext context) {
+ super(context);
+ ApplicationStarter.initialize(context, false); // false = no need to prefetch on time data background tread
+ }
+
+ @ReactMethod
+ public void addListener(String eventName) {
+ // Keep: Required for RN built in Event Emitter Calls.
+ }
+
+ @ReactMethod
+ public void removeListeners(Integer count) {
+ // Keep: Required for RN built in Event Emitter Calls.
+ }
+
+ @ReactMethod
+ public void openPicker(ReadableMap props){
+ PickerView picker = createPicker(props);
+ AlertDialog dialog = createDialog(props, picker);
+ dialog.show();
+ }
+
+ private AlertDialog createDialog (ReadableMap props, final PickerView picker) {
+ String title = props.getString("title");
+ String confirmText = props.getString("confirmText");
+ final String cancelText = props.getString("cancelText");
+ final View pickerWithMargin = withTopMargin(picker);
+
+ return new AlertDialog.Builder(DatePickerPackage.context.getCurrentActivity())
+ .setTitle(title)
+ .setCancelable(true)
+ .setView(pickerWithMargin)
+ .setPositiveButton(confirmText, new DialogInterface.OnClickListener() {
+ public void onClick(DialogInterface dialog, int id) {
+ Emitter.onConfirm(picker.getDate());
+ dialog.dismiss();
+ }
+ })
+ .setNegativeButton(cancelText, new DialogInterface.OnClickListener() {
+ public void onClick(DialogInterface dialog, int id) {
+ Emitter.onCancel();
+ dialog.dismiss();
+ }
+ })
+ .setOnCancelListener(new DialogInterface.OnCancelListener() {
+ @Override
+ public void onCancel(DialogInterface dialogInterface) {
+ Emitter.onCancel();
+ }
+ })
+ .create();
+ }
+
+ private PickerView createPicker(ReadableMap props){
+ int height = 180;
+ LinearLayout.LayoutParams rootLayoutParams = new LinearLayout.LayoutParams(
+ RelativeLayout.LayoutParams.MATCH_PARENT,
+ Utils.toDp(height));
+ PickerView picker = new PickerView(rootLayoutParams);
+ ReadableMapKeySetIterator iterator = props.keySetIterator();
+ while(iterator.hasNextKey()){
+ String key = iterator.nextKey();
+ Dynamic value = props.getDynamic(key);
+ if(!key.equals("style")){
+ try{
+ picker.updateProp(key, value);
+ } catch (Exception e){
+ // ignore invalid prop
+ }
+ }
+ }
+ picker.update();
+ return picker;
+ }
+
+ private View withTopMargin(PickerView view) {
+ LinearLayout linearLayout = new LinearLayout(DatePickerPackage.context);
+ linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
+ LinearLayout.LayoutParams.MATCH_PARENT,
+ LinearLayout.LayoutParams.WRAP_CONTENT
+ ));
+ linearLayout.addView(view);
+ linearLayout.setPadding(0, Utils.toDp(20),0,0);
+ return linearLayout;
+ }
+
+ @Override
+ public String getName() {
+ return "RNDatePicker";
+ }
+}
\ No newline at end of file
diff --git a/android/src/main/java/com/henninghall/date_picker/DatePickerPackage.java b/android/src/main/java/com/henninghall/date_picker/DatePickerPackage.java
index 349f159..99dd955 100644
--- a/android/src/main/java/com/henninghall/date_picker/DatePickerPackage.java
+++ b/android/src/main/java/com/henninghall/date_picker/DatePickerPackage.java
@@ -10,25 +10,23 @@ import java.util.Arrays;
import java.util.Collections;
import java.util.List;
-/**
- * Created by heng on 16/9/5.
- */
-
public class DatePickerPackage implements ReactPackage {
+ public static ReactApplicationContext context;
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
- return Collections.emptyList();
- }
-
- public List> createJSModules() {
- return Collections.emptyList();
+ context = reactContext;
+ return Arrays.asList(
+ new DatePickerModule(reactContext)
+ );
}
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
+ context = reactContext;
return Arrays. asList(
new DatePickerManager()
);
}
+
}
\ No newline at end of file
diff --git a/android/src/main/java/com/henninghall/date_picker/DerivedData.java b/android/src/main/java/com/henninghall/date_picker/DerivedData.java
index ece342e..ed736a3 100644
--- a/android/src/main/java/com/henninghall/date_picker/DerivedData.java
+++ b/android/src/main/java/com/henninghall/date_picker/DerivedData.java
@@ -2,6 +2,7 @@ package com.henninghall.date_picker;
import android.text.format.DateFormat;
import android.util.Log;
+import android.util.TimeUtils;
import com.henninghall.date_picker.models.Mode;
import com.henninghall.date_picker.models.Variant;
@@ -10,6 +11,7 @@ import com.henninghall.date_picker.models.WheelType;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
+import java.util.Calendar;
import static com.henninghall.date_picker.models.Is24HourSource.*;
@@ -125,4 +127,11 @@ public class DerivedData {
return state.getMode() == Mode.time && !usesAmPm();
}
+
+ public String getLastDate() {
+ Calendar lastSelectedDate = state.getLastSelectedDate();
+ String initialDate = state.getIsoDate();
+ if(lastSelectedDate != null) return Utils.dateToIso(lastSelectedDate);
+ return initialDate;
+ }
}
diff --git a/android/src/main/java/com/henninghall/date_picker/Emitter.java b/android/src/main/java/com/henninghall/date_picker/Emitter.java
new file mode 100644
index 0000000..f388604
--- /dev/null
+++ b/android/src/main/java/com/henninghall/date_picker/Emitter.java
@@ -0,0 +1,40 @@
+package com.henninghall.date_picker;
+
+import android.view.View;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+import java.util.Calendar;
+
+public class Emitter {
+
+ private static RCTEventEmitter eventEmitter(){
+ return DatePickerPackage.context.getJSModule(RCTEventEmitter.class);
+ }
+
+ private static DeviceEventManagerModule.RCTDeviceEventEmitter deviceEventEmitter(){
+ return DatePickerPackage.context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class);
+ }
+
+ public static void onDateChange(Calendar date, String displayValueString, View view) {
+ WritableMap event = Arguments.createMap();
+ String dateString = Utils.dateToIso(date);
+ event.putString("date", dateString);
+ event.putString("dateString", displayValueString);
+ eventEmitter().receiveEvent(view.getId(), "dateChange", event);
+ }
+
+ public static void onConfirm(String date) {
+ WritableMap event = Arguments.createMap();
+ event.putString("date", date);
+ deviceEventEmitter().emit("onConfirm", event);
+ }
+
+ public static void onCancel() {
+ WritableMap event = Arguments.createMap();
+ deviceEventEmitter().emit("onCancel", event);
+ }
+}
diff --git a/android/src/main/java/com/henninghall/date_picker/PickerView.java b/android/src/main/java/com/henninghall/date_picker/PickerView.java
index f71038a..b2ff6da 100644
--- a/android/src/main/java/com/henninghall/date_picker/PickerView.java
+++ b/android/src/main/java/com/henninghall/date_picker/PickerView.java
@@ -1,5 +1,8 @@
package com.henninghall.date_picker;
+import android.view.LayoutInflater;
+import android.view.ViewGroup;
+import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.facebook.react.bridge.Dynamic;
@@ -21,19 +24,24 @@ import java.util.ArrayList;
public class PickerView extends RelativeLayout {
+
+ private final ViewGroup.LayoutParams layoutParams;
private UIManager uiManager;
private State state = new State();
private ArrayList updatedProps = new ArrayList<>();
- public PickerView() {
- super(DatePickerManager.context);
+ public PickerView(ViewGroup.LayoutParams layoutParams) {
+ super(DatePickerPackage.context);
+ this.layoutParams = layoutParams;
}
public void update() {
if (didUpdate(VariantProp.name)) {
this.removeAllViewsInLayout();
- inflate(getContext(), state.derived.getRootLayout(), this);
+ LinearLayout layout = new LinearLayout(getContext());
+ LayoutInflater.from(getContext()).inflate(state.derived.getRootLayout(), layout);
+ this.addView(layout, layoutParams);
uiManager = new UIManager(state, this);
}
@@ -97,6 +105,10 @@ public class PickerView extends RelativeLayout {
uiManager.scroll(wheelIndex, scrollTimes);
}
+ public String getDate() {
+ return state.derived.getLastDate();
+ }
+
private final Runnable measureAndLayout = new Runnable() {
@Override
public void run() {
diff --git a/android/src/main/java/com/henninghall/date_picker/State.java b/android/src/main/java/com/henninghall/date_picker/State.java
index eb50fd2..606fca9 100644
--- a/android/src/main/java/com/henninghall/date_picker/State.java
+++ b/android/src/main/java/com/henninghall/date_picker/State.java
@@ -26,6 +26,7 @@ import java.util.TimeZone;
public class State {
+ private Calendar lastSelectedDate = null;
private final DateProp dateProp = new DateProp();
private final ModeProp modeProp = new ModeProp();
private final LocaleProp localeProp = new LocaleProp();
@@ -57,15 +58,15 @@ public class State {
}};
public DerivedData derived;
- public State(){
+ public State() {
derived = new DerivedData(this);
}
- private Prop getProp(String name){
+ private Prop getProp(String name) {
return (Prop) props.get(name);
}
- void setProp(String propName, Dynamic value){
+ void setProp(String propName, Dynamic value) {
getProp(propName).setValue(value);
}
@@ -89,38 +90,38 @@ public class State {
return (Locale) localeProp.getValue();
}
- public Calendar getMinimumDate(){
+ public Calendar getMinimumDate() {
DateBoundary db = new DateBoundary(getTimeZone(), (String) minimumDateProp.getValue());
return db.get();
}
- public Calendar getMaximumDate(){
+ public Calendar getMaximumDate() {
DateBoundary db = new DateBoundary(getTimeZone(), (String) maximumDateProp.getValue());
return db.get();
}
- public TimeZone getTimeZone(){
+ public TimeZone getTimeZone() {
boolean utc = (boolean) utcProp.getValue();
return utc ? TimeZone.getTimeZone("UTC") : TimeZone.getDefault();
}
- public String getDateString() {
+ public String getIsoDate() {
return (String) dateProp.getValue();
}
public Calendar getDate() {
- return Utils.isoToCalendar(getDateString(), getTimeZone());
+ return Utils.isoToCalendar(getIsoDate(), getTimeZone());
}
public Integer getHeight() {
return (Integer) heightProp.getValue();
}
- public String getLocaleLanguageTag(){
+ public String getLocaleLanguageTag() {
return localeProp.getLanguageTag();
}
- public Variant getVariant(){
+ public Variant getVariant() {
return variantProp.getValue();
}
@@ -132,4 +133,11 @@ public class State {
return is24hourSourceProp.getValue();
}
-}
+ public Calendar getLastSelectedDate() {
+ return lastSelectedDate;
+ }
+
+ public void setLastSelectedDate(Calendar date) {
+ lastSelectedDate = date;
+ }
+}
\ No newline at end of file
diff --git a/android/src/main/java/com/henninghall/date_picker/Utils.java b/android/src/main/java/com/henninghall/date_picker/Utils.java
index d39a9c9..831bab1 100644
--- a/android/src/main/java/com/henninghall/date_picker/Utils.java
+++ b/android/src/main/java/com/henninghall/date_picker/Utils.java
@@ -4,6 +4,7 @@ package com.henninghall.date_picker;
import android.text.format.DateFormat;
import android.text.format.DateUtils;
+import com.facebook.react.bridge.ReactApplicationContext;
import com.henninghall.date_picker.models.WheelType;
import net.time4j.PrettyTime;
@@ -19,7 +20,7 @@ import java.util.TimeZone;
public class Utils {
public static boolean deviceUsesAmPm(){
- return !DateFormat.is24HourFormat(DatePickerManager.context);
+ return !DateFormat.is24HourFormat(DatePickerPackage.context);
}
public static String printToday(Locale locale) {
@@ -100,8 +101,13 @@ public class Utils {
}
public static String getLocalisedStringFromResources(Locale locale, String tagName) {
- int selectedKey = DatePickerManager.context.getResources().getIdentifier(tagName,"string",DatePickerManager.context.getPackageName());
- String localisedText = LocaleUtils.getLocaleStringResource(locale, selectedKey, DatePickerManager.context);
+ ReactApplicationContext context = DatePickerPackage.context;
+ int selectedKey = context.getResources().getIdentifier(tagName,"string", context.getPackageName());
+ String localisedText = LocaleUtils.getLocaleStringResource(locale, selectedKey, context);
return localisedText;
}
+
+ public static int toDp(int pixels){
+ return (int) (pixels * DatePickerPackage.context.getResources().getDisplayMetrics().density);
+ }
}
diff --git a/android/src/main/java/com/henninghall/date_picker/ui/Accessibility.java b/android/src/main/java/com/henninghall/date_picker/ui/Accessibility.java
index 0a9e450..54f65c8 100644
--- a/android/src/main/java/com/henninghall/date_picker/ui/Accessibility.java
+++ b/android/src/main/java/com/henninghall/date_picker/ui/Accessibility.java
@@ -8,20 +8,19 @@ import android.view.accessibility.AccessibilityManager;
import android.accessibilityservice.AccessibilityServiceInfo;
import cn.carbswang.android.numberpickerview.library.NumberPickerView;
-import com.henninghall.date_picker.DatePickerManager;
+import com.henninghall.date_picker.DatePickerPackage;
import com.henninghall.date_picker.State;
import com.henninghall.date_picker.Utils;
import com.henninghall.date_picker.wheelFunctions.WheelFunction;
import com.henninghall.date_picker.wheels.Wheel;
import java.util.Locale;
-import java.util.Arrays;
import java.util.List;
public class Accessibility {
private final static AccessibilityManager systemManager =
- (AccessibilityManager) DatePickerManager.context
+ (AccessibilityManager) DatePickerPackage.context
.getApplicationContext()
.getSystemService(Context.ACCESSIBILITY_SERVICE);
diff --git a/android/src/main/java/com/henninghall/date_picker/ui/UIManager.java b/android/src/main/java/com/henninghall/date_picker/ui/UIManager.java
index 0ab1c11..56f4743 100644
--- a/android/src/main/java/com/henninghall/date_picker/ui/UIManager.java
+++ b/android/src/main/java/com/henninghall/date_picker/ui/UIManager.java
@@ -99,4 +99,8 @@ public class UIManager {
public void updateAccessibilityValues() {
wheels.applyOnAll(new Accessibility.SetAccessibilityDelegate(state.getLocale()));
}
+
+ public void updateLastSelectedDate(Calendar date) {
+ state.setLastSelectedDate(date);
+ }
}
diff --git a/android/src/main/java/com/henninghall/date_picker/ui/WheelChangeListenerImpl.java b/android/src/main/java/com/henninghall/date_picker/ui/WheelChangeListenerImpl.java
index 8e69e6e..4c19f0b 100644
--- a/android/src/main/java/com/henninghall/date_picker/ui/WheelChangeListenerImpl.java
+++ b/android/src/main/java/com/henninghall/date_picker/ui/WheelChangeListenerImpl.java
@@ -2,12 +2,8 @@ package com.henninghall.date_picker.ui;
import android.view.View;
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
-import com.henninghall.date_picker.DatePickerManager;
+import com.henninghall.date_picker.Emitter;
import com.henninghall.date_picker.State;
-import com.henninghall.date_picker.Utils;
import com.henninghall.date_picker.wheels.Wheel;
import java.text.ParseException;
@@ -65,7 +61,10 @@ public class WheelChangeListenerImpl implements WheelChangeListener {
uiManager.updateContentDescription(picker);
- emitDateChangeEvent(selectedDate);
+ String displayData = uiManager.getDisplayValueString();
+
+ uiManager.updateLastSelectedDate(selectedDate);
+ Emitter.onDateChange(selectedDate, displayData, rootView);
}
// Example: Jan 1 returns true, April 31 returns false.
@@ -114,13 +113,4 @@ public class WheelChangeListenerImpl implements WheelChangeListener {
return null;
}
- private void emitDateChangeEvent(Calendar date) {
- WritableMap event = Arguments.createMap();
- String dateString = Utils.dateToIso(date);
- event.putString("date", dateString);
- event.putString("dateString", uiManager.getDisplayValueString());
- DatePickerManager.context.getJSModule(RCTEventEmitter.class)
- .receiveEvent(rootView.getId(), "dateChange", event);
- }
-
}
diff --git a/docs/react-native-date-time-picker-android-inline.gif b/docs/react-native-date-time-picker-android-inline.gif
new file mode 100644
index 0000000..680297b
Binary files /dev/null and b/docs/react-native-date-time-picker-android-inline.gif differ
diff --git a/docs/react-native-date-time-picker-ios-inline.gif b/docs/react-native-date-time-picker-ios-inline.gif
new file mode 100644
index 0000000..c8a78f0
Binary files /dev/null and b/docs/react-native-date-time-picker-ios-inline.gif differ
diff --git a/docs/react-native-datetime-picker-modal-android.gif b/docs/react-native-datetime-picker-modal-android.gif
new file mode 100644
index 0000000..c7538c9
Binary files /dev/null and b/docs/react-native-datetime-picker-modal-android.gif differ
diff --git a/docs/react-native-datetime-picker-modal-ios.gif b/docs/react-native-datetime-picker-modal-ios.gif
new file mode 100644
index 0000000..e76ced8
Binary files /dev/null and b/docs/react-native-datetime-picker-modal-ios.gif differ
diff --git a/examples/detox/android/app/src/main/res/values/styles.xml b/examples/detox/android/app/src/main/res/values/styles.xml
index 01b31e7..79544e8 100644
--- a/examples/detox/android/app/src/main/res/values/styles.xml
+++ b/examples/detox/android/app/src/main/res/values/styles.xml
@@ -2,10 +2,7 @@
-
+
\ No newline at end of file
diff --git a/examples/detox/e2e/init.js b/examples/detox/e2e/init.js
index b083b5d..6c247ad 100644
--- a/examples/detox/e2e/init.js
+++ b/examples/detox/e2e/init.js
@@ -1,14 +1,18 @@
const detox = require('detox')
const config = require('../package.json').detox
const adapter = require('detox/runners/mocha/adapter')
-const { reset } = require("./utils")
+const { reset } = require('./utils')
before(async () => {
await detox.init(config)
})
beforeEach(async function () {
- await reset()
+ try {
+ await reset()
+ } catch (e) {
+ // some tests cannot reset, it's ok.
+ }
await adapter.beforeEach(this)
})
diff --git a/examples/detox/e2e/tests/modal.spec.js b/examples/detox/e2e/tests/modal.spec.js
new file mode 100644
index 0000000..fd27a19
--- /dev/null
+++ b/examples/detox/e2e/tests/modal.spec.js
@@ -0,0 +1,20 @@
+describe('Modal', () => {
+ before(async () => {
+ await device.reloadReactNative()
+ await element(by.text('Modal')).tap()
+ })
+
+ it('can open and close modal', async () => {
+ await element(by.id('openModal')).tap()
+ await expect(element(by.id('day'))).toBeVisible()
+ await expect(element(by.id('minutes'))).toBeVisible()
+ await expect(element(by.id('hour'))).toBeVisible()
+ await expect(element(by.id('ampm'))).toBeVisible()
+ await expect(element(by.id('month'))).not.toExist()
+ await expect(element(by.id('date'))).not.toExist()
+ await expect(element(by.id('year'))).not.toExist()
+
+ await element(by.text('CONFIRM')).tap()
+ await expect(element(by.id('day'))).not.toBeVisible()
+ })
+})
diff --git a/examples/detox/src/App.js b/examples/detox/src/App.js
index 1ca2119..fabf4b5 100644
--- a/examples/detox/src/App.js
+++ b/examples/detox/src/App.js
@@ -1,11 +1,16 @@
import React, { Component } from 'react'
-import { ScrollView, AppRegistry, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import {
+ ScrollView,
+ AppRegistry,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+} from 'react-native'
import examples from './examples'
class App extends Component {
state = {
picker: undefined,
- backgroundColor: '#ffffff',
}
render() {
@@ -25,7 +30,7 @@ class App extends Component {
)
}
- setBackgroundColor = backgroundColor => this.setState({ backgroundColor })
+ setBackgroundColor = (backgroundColor) => this.setState({ backgroundColor })
renderPicker = () => {
const Picker = examples[this.state.picker].component
@@ -39,10 +44,10 @@ class App extends Component {
renderButtons = () =>
Object.keys(examples)
- .filter(key => key !== this.state.picker)
+ .filter((key) => key !== this.state.picker)
.map(this.renderButton)
- renderButton = key => (
+ renderButton = (key) => (
this.setState({ picker: key })}
@@ -52,7 +57,7 @@ class App extends Component {
)
- renderBackButton = key => (
+ renderBackButton = (key) => (
this.setState({ picker: undefined })}
style={{ margin: 10, position: 'absolute', top: 0, left: 10 }}
@@ -81,4 +86,4 @@ const styles = StyleSheet.create({
},
})
-AppRegistry.registerComponent('example', () => App)
\ No newline at end of file
+AppRegistry.registerComponent('example', () => App)
diff --git a/examples/detox/src/examples.js b/examples/detox/src/examples.js
index 869f530..7ed3f7c 100644
--- a/examples/detox/src/examples.js
+++ b/examples/detox/src/examples.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
import Minimal from './examples/Minimal'
+import Modal from './examples/Modal'
import Advanced from './examples/Advanced'
import TimeMode from './examples/TimeMode'
import { EXAMPLE_KEYS } from './exampleKeys'
@@ -22,4 +22,8 @@ export default {
buttonTitle: 'Date mode',
component: DateMode,
},
+ [EXAMPLE_KEYS.MODAL]: {
+ buttonTitle: 'Modal',
+ component: Modal,
+ },
}
diff --git a/examples/detox/src/examples/Modal.js b/examples/detox/src/examples/Modal.js
new file mode 100644
index 0000000..f0432ef
--- /dev/null
+++ b/examples/detox/src/examples/Modal.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Button, View, Text } from 'react-native'
+import DatePicker from 'react-native-date-picker'
+
+export default class ModalExample extends React.Component {
+ state = { date: new Date(), open: false }
+
+ render = () => (
+
+ this.setState({ open: true })}
+ />
+ this.setState({ date, open: false })}
+ onCancel={() => this.setState({ open: false })}
+ androidVariant="nativeAndroid"
+ />
+
+ {this.state.date.toISOString().substr(0, 10)}
+
+
+ {this.state.date.toLocaleTimeString()}
+
+
+ )
+}
diff --git a/index.d.ts b/index.d.ts
index e84b884..6cf7846 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -79,6 +79,27 @@ export interface DatePickerProps extends ViewProps {
* "device" is default on android and "locale" on iOS. On iOS this cannot be changed.
*/
is24hourSource?: 'locale' | 'device'
+
+ /** Enables the built-in modal */
+ modal?: boolean
+
+ /** Modal prop only. Set to true to open the modal */
+ open?: boolean
+
+ /** Modal callback invoked when the user presses the confirm button */
+ onConfirm?: (date: Date) => void
+
+ /** Modal callback invoked when user presses the cancel button or closes the modal by a press outside */
+ onCancel?: () => void
+
+ /** Modal confirm button text */
+ confirmText?: string
+
+ /** Modal cancel button text */
+ cancelText?: string
+
+ /** Modal title. Set to null to remove */
+ title?: string | null
}
export default class DatePicker extends Component {}
diff --git a/ios/RNDatePicker/RNDatePickerManager.m b/ios/RNDatePicker/RNDatePickerManager.m
index 43a8bc8..604280e 100644
--- a/ios/RNDatePicker/RNDatePickerManager.m
+++ b/ios/RNDatePicker/RNDatePickerManager.m
@@ -6,7 +6,9 @@
*/
#import "RNDatePickerManager.h"
+#import
+#import "RCTConvert.h"
#import "DatePicker.h"
@@ -25,6 +27,14 @@ RCT_ENUM_CONVERTER(UIDatePickerMode, (@{
RCT_EXPORT_MODULE()
+RCT_EXPORT_METHOD(addListener : (NSString *)eventName) {
+ // Keep: Required for RN built in Event Emitter Calls.
+}
+
+RCT_EXPORT_METHOD(removeListeners : (NSInteger)count) {
+ // Keep: Required for RN built in Event Emitter Calls.
+}
+
- (UIView *)view
{
return [DatePicker new];
@@ -45,4 +55,91 @@ RCT_CUSTOM_VIEW_PROPERTY(textColor, NSString, DatePicker)
[view setTextColorProp:[RCTConvert NSString:json]];
}
+RCT_EXPORT_METHOD(openPicker:(NSDictionary *) props
+ onConfirm:(RCTResponseSenderBlock) onConfirm
+ onCancel:(RCTResponseSenderBlock) onCancel)
+{
+ dispatch_async(dispatch_get_main_queue(), ^{
+
+ bool iPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
+ UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
+ CGRect rootBounds = rootViewController.view.bounds;
+ NSString * title = [RCTConvert NSString:[props objectForKey:@"title"]];
+ title = [title isEqualToString:@""] ? nil : title;
+ NSString * confirmText = [RCTConvert NSString:[props objectForKey:@"confirmText"]];
+ NSString * cancelText = [RCTConvert NSString:[props objectForKey:@"cancelText"]];
+ DatePicker* picker = [[DatePicker alloc] init];
+ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:title message:nil preferredStyle:UIAlertControllerStyleActionSheet];
+ UIView * alertView = alertController.view;
+
+ // height
+ int heightPx = iPad ? (title ? 300 : 260) : (title ? 370 : 340);
+ NSLayoutConstraint *heigth = [NSLayoutConstraint constraintWithItem:alertView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:heightPx];
+ [alertView addConstraint:heigth];
+
+ CGRect bounds = picker.bounds;
+
+ // picker width
+ int widthPx = iPad ? 320 : alertController.view.bounds.size.width - 15;
+ bounds.size.width = widthPx;
+
+ // top padding
+ bounds.origin.y += iPad ? (title ? 20: 5) : (title ? 30 : 10);
+
+ [picker setFrame: bounds];
+
+ NSDate * _Nonnull date = [RCTConvert NSDate:[props objectForKey:@"date"]];
+ [picker setDate:date];
+
+ NSDate * minimumDate = [RCTConvert NSDate:[props objectForKey:@"minimumDate"]];
+ if(minimumDate) [picker setMinimumDate:minimumDate];
+
+ NSDate * maximumDate = [RCTConvert NSDate:[props objectForKey:@"maximumDate"]];
+ if(maximumDate) [picker setMaximumDate:maximumDate];
+
+ NSString * textColor = [RCTConvert NSString:[props objectForKey:@"textColor"]];
+ if(textColor) [picker setTextColorProp:textColor];
+
+ UIDatePickerMode mode = [RCTConvert UIDatePickerMode:[props objectForKey:@"mode"]];
+ [picker setDatePickerMode:mode];
+
+ NSLocale * locale = [RCTConvert NSLocale:[props objectForKey:@"locale"]];
+ if(locale) [picker setLocale:locale];
+
+ int minuteInterval = [RCTConvert int:[props objectForKey:@"minuteInterval"]];
+ [picker setMinuteInterval:minuteInterval];
+
+ NSTimeZone* timezone = [RCTConvert NSTimeZone:[props valueForKey:@"timeZoneOffsetInMinutes"]];
+ [picker setTimeZone:timezone];
+
+ [alertView addSubview:picker];
+
+ UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:confirmText style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
+ onConfirm(@[@{ @"timestamp": @(picker.date.timeIntervalSince1970 * 1000.0) }]);
+ }];
+ UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:cancelText style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
+ onCancel(@[]);
+ }];
+
+ [alertController addAction:cancelAction];
+ [alertController addAction:confirmAction];
+
+ if (@available(iOS 9.0, *)) {
+ alertController.preferredAction = confirmAction;
+ }
+
+ // ipad needs to display the picker in a popover
+ if (iPad) {
+ UIPopoverPresentationController *popPresenter = [alertController popoverPresentationController];
+ popPresenter.sourceRect = CGRectMake(CGRectGetMidX(rootBounds), CGRectGetMidY(rootBounds),0,0);
+ popPresenter.sourceView = rootViewController.view;
+ popPresenter.presentingViewController.preferredContentSize = CGSizeMake(widthPx, heightPx);
+ [popPresenter setPermittedArrowDirections: (UIPopoverArrowDirection) 0];
+ }
+
+ [rootViewController presentViewController:alertController animated:YES completion:nil];
+ });
+
+}
+
@end
diff --git a/npmREADME.md b/npmREADME.md
index a9f32b6..d2087a6 100644
--- a/npmREADME.md
+++ b/npmREADME.md
@@ -2,23 +2,33 @@
A cross platform react native date picker component for android and ios. It includes 3 different modes: date, time, and datetime. The date picker is customizable and has multiple language support.
-
-
- iOS
+## Modal
+
+The first option is to use the built-in modal.
+
+
-
-
-
- Android
+ iOS Android
+
+
+## Stand-alone
+
+The second option is to use the picker stand-alone. Inlined in a view or a custom made modal.
+
+
-
+
+ iOS Android
diff --git a/package.json b/package.json
index a2fa64c..1b16580 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "react-native-date-picker",
- "version": "3.4.3",
- "description": "A Cross Platform React Native Picker",
+ "version": "4.0.0-3",
+ "description": "A datetime picker for React Native. In-modal or stand-alone. Supports Android and iOS.",
"main": "src/index.js",
"scripts": {
"prepublishOnly": "mv README.md githubREADME.md && mv npmREADME.md README.md",
diff --git a/src/DatePickerAndroid.js b/src/DatePickerAndroid.js
index 6884d75..1994ced 100644
--- a/src/DatePickerAndroid.js
+++ b/src/DatePickerAndroid.js
@@ -1,5 +1,10 @@
import React from 'react'
-import { StyleSheet, requireNativeComponent } from 'react-native'
+import {
+ StyleSheet,
+ requireNativeComponent,
+ NativeModules,
+ NativeEventEmitter,
+} from 'react-native'
function addMinutes(date, minutesToAdd) {
return new Date(date.valueOf() + minutesToAdd * 60 * 1000)
@@ -16,26 +21,54 @@ const timeModeWidth = 240
const defaultWidth = 310
class DatePickerAndroid extends React.PureComponent {
- render() {
- return (
- {
+ ref={(picker) => {
this._picker = picker
}}
- style={[styles.datePickerIOS, props.style]}
- date={props.date ? props.date.getTime() : undefined}
- locale={props.locale ? props.locale : undefined}
- maximumDate={
- props.maximumDate ? props.maximumDate.getTime() : undefined
- }
- minimumDate={
- props.minimumDate ? props.minimumDate.getTime() : undefined
- }
- mode={props.mode}
- minuteInterval={props.minuteInterval}
- timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
onChange={this._onChange}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
- textColor={props.textColor}
+ {...props}
/>
)
}
diff --git a/src/defaultProps.js b/src/defaultProps.js
deleted file mode 100644
index 7d39f02..0000000
--- a/src/defaultProps.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
- mode: 'datetime',
- minuteInterval: 1,
- androidVariant: 'iosClone',
- is24hourSource: 'device',
-}
diff --git a/src/index.js b/src/index.js
index 1c74f2e..6bbe0c7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,6 @@ import { Platform } from 'react-native'
import DatePickerIOS from './DatePickerIOS'
import DatePickerAndroid from './DatePickerAndroid'
import propTypes from './propTypes'
-import defaultProps from './defaultProps'
import { colorToHex } from './colorToHex'
import { throwIfInvalidProps } from './propChecker'
@@ -12,20 +11,38 @@ const DatePicker = Platform.select({
ios: DatePickerIOS,
})
-DatePicker.defaultProps = defaultProps
DatePicker.propTypes = propTypes
-const DatePickerWrapper = props => {
- const { textColor, fadeToColor, innerRef, ...rest } = props
+const DatePickerWrapper = (props) => {
if (__DEV__) throwIfInvalidProps(props)
return (
+ 
+ 
-