add is24hourSource prop (#231)

README.md

@@ -76,7 +76,7 @@ export default () => {
 | textColor               | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher.                                                                                                                                                                                 | <img src="docs/colors-ios.png" alt="react native datepicker text color background color ios" height="120px" />                                                                                                                           | <img src="docs/colors-android.png" alt="Text color background color android" height="120px" />                                                                                                                                                                     |
 | timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone)                                                                                                                                                                                                                                                               |
 | dividerHeight | Change the divider height (only supported for iosClone)                                                                                                                                                                                                                                                               |
-
+| is24hourSource | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device')                                                                                                                                                                                                                                                   |
 
 ## About
 
@@ -96,11 +96,11 @@ Unfortunately, expo does not support this date picker at the moment. Upvote
 
 ### How do i change the date order? (To YYYY-MM-DD etc)
 
-The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the France preference.
+The order is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference.
 
 ### How do i change the 12/24h or AM/PM format?
 
-On iOS the 12/24h preference is determined by the `locale` prop. Set for instance `locale='fr'`to get the France preference. On Android the 12/24h format is determined by the device setting. When using 12h mode the AM/PM part of the picker will be displayed.
+On iOS the 12/24h preference is determined by the `locale` prop. Set for instance `locale='fr'`to get the french preference. On Android the 12/24h format is determined by the device setting by default. Add `is24hourSource="locale"` to let the locale determine the device setting on android as well. When using 12h mode the AM/PM part of the picker will be displayed. It is NOT recommended to force any specific 12/24h format, but this can be achieved by, choosing a locale which has the desired 24h preference and add `is24hourSource="locale"`.
 
 ### Is it possible to show only month and year?
 

android/src/main/java/com/henninghall/date_picker/DatePickerManager.java

@@ -8,6 +8,7 @@ import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
 import com.henninghall.date_picker.props.DividerHeightProp;
+import com.henninghall.date_picker.props.Is24hourSourceProp;
 import com.henninghall.date_picker.props.VariantProp;
 import com.henninghall.date_picker.props.DateProp;
 import com.henninghall.date_picker.props.FadeToColorProp;
@@ -44,7 +45,7 @@ public class DatePickerManager extends SimpleViewManager  {
 
   @ReactPropGroup(names = { DateProp.name, ModeProp.name, LocaleProp.name, MaximumDateProp.name,
           MinimumDateProp.name, FadeToColorProp.name, TextColorProp.name, UtcProp.name, MinuteIntervalProp.name,
-          VariantProp.name, DividerHeightProp.name
+          VariantProp.name, DividerHeightProp.name, Is24hourSourceProp.name
   })
   public void setProps(PickerView view, int index, Dynamic value) {
     updateProp("setProps", view, index, value);

android/src/main/java/com/henninghall/date_picker/DerivedData.java

@@ -1,14 +1,18 @@
 package com.henninghall.date_picker;
 
+import android.text.format.DateFormat;
 import android.util.Log;
 
 import com.henninghall.date_picker.models.Mode;
 import com.henninghall.date_picker.models.Variant;
 import com.henninghall.date_picker.models.WheelType;
 
+import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Arrays;
 
+import static com.henninghall.date_picker.models.Is24HourSource.*;
+
 public class DerivedData {
     private final State state;
 
@@ -38,7 +42,7 @@ public class DerivedData {
                 break;
             }
         }
-        if((mode == Mode.time || mode == Mode.datetime) && Utils.usesAmPm()){
+        if((mode == Mode.time || mode == Mode.datetime) && state.derived.usesAmPm()){
             visibleWheels.add(WheelType.AM_PM);
         }
         return visibleWheels;
@@ -110,7 +114,11 @@ public class DerivedData {
             case iosClone: return R.layout.ios_clone;
             default: return R.layout.ios_clone;
         }
+    }
 
+    public boolean usesAmPm(){
+        if(state.getIs24HourSource() == locale) return LocaleUtils.localeUsesAmPm(state.getLocale());
+        return Utils.deviceUsesAmPm();
     }
 
 }

android/src/main/java/com/henninghall/date_picker/LocaleUtils.java

@@ -56,4 +56,9 @@ public class LocaleUtils {
         return locale;
     }
 
+    public static boolean localeUsesAmPm(Locale locale){
+        DateFormat df = DateFormat.getTimeInstance(DateFormat.FULL, locale);
+        return df instanceof SimpleDateFormat && ((SimpleDateFormat) df).toPattern().contains("a");
+    }
+
 }

android/src/main/java/com/henninghall/date_picker/PickerView.java

@@ -4,6 +4,7 @@ import android.widget.RelativeLayout;
 
 import com.facebook.react.bridge.Dynamic;
 import com.henninghall.date_picker.props.DividerHeightProp;
+import com.henninghall.date_picker.props.Is24hourSourceProp;
 import com.henninghall.date_picker.props.MaximumDateProp;
 import com.henninghall.date_picker.props.MinimumDateProp;
 import com.henninghall.date_picker.props.MinuteIntervalProp;
@@ -44,7 +45,7 @@ public class PickerView extends RelativeLayout {
             uiManager.updateTextColor();
         }
 
-        if (didUpdate(ModeProp.name, VariantProp.name)) {
+        if (didUpdate(ModeProp.name, VariantProp.name, Is24hourSourceProp.name)) {
             uiManager.updateWheelVisibility();
         }
 
@@ -56,7 +57,7 @@ public class PickerView extends RelativeLayout {
             uiManager.updateDividerHeight();
         }
 
-        if (didUpdate(ModeProp.name, LocaleProp.name, VariantProp.name)) {
+        if (didUpdate(ModeProp.name, LocaleProp.name, VariantProp.name, Is24hourSourceProp.name)) {
             uiManager.updateWheelOrder();
         }
 

android/src/main/java/com/henninghall/date_picker/State.java

@@ -1,9 +1,11 @@
 package com.henninghall.date_picker;
 
 import com.facebook.react.bridge.Dynamic;
+import com.henninghall.date_picker.models.Is24HourSource;
 import com.henninghall.date_picker.models.Mode;
 import com.henninghall.date_picker.models.Variant;
 import com.henninghall.date_picker.props.DividerHeightProp;
+import com.henninghall.date_picker.props.Is24hourSourceProp;
 import com.henninghall.date_picker.props.VariantProp;
 import com.henninghall.date_picker.props.DateProp;
 import com.henninghall.date_picker.props.FadeToColorProp;
@@ -36,6 +38,7 @@ public class State {
     private final HeightProp heightProp = new HeightProp();
     private final VariantProp variantProp = new VariantProp();
     private final DividerHeightProp dividerHeightProp = new DividerHeightProp();
+    private final Is24hourSourceProp is24hourSourceProp = new Is24hourSourceProp();
 
     private final HashMap props = new HashMap<String, Prop>() {{
         put(DateProp.name, dateProp);
@@ -50,6 +53,7 @@ public class State {
         put(HeightProp.name, heightProp);
         put(VariantProp.name, variantProp);
         put(DividerHeightProp.name, dividerHeightProp);
+        put(Is24hourSourceProp.name, is24hourSourceProp);
     }};
     public DerivedData derived;
 
@@ -120,7 +124,12 @@ public class State {
         return variantProp.getValue();
     }
 
-    public int getDividerHeightProp() {
+    public int getDividerHeight() {
         return dividerHeightProp.getValue();
     }
+
+    public Is24HourSource getIs24HourSource() {
+        return is24hourSourceProp.getValue();
+    }
+
 }

android/src/main/java/com/henninghall/date_picker/Utils.java

@@ -18,7 +18,7 @@ import java.util.TimeZone;
 
 public class Utils {
 
-    public static boolean usesAmPm(){
+    public static boolean deviceUsesAmPm(){
         return !DateFormat.is24HourFormat(DatePickerManager.context);
     }
 

android/src/main/java/com/henninghall/date_picker/models/Is24HourSource.java

@@ -0,0 +1,5 @@
+package com.henninghall.date_picker.models;
+
+public enum Is24HourSource {
+    device, locale
+}

android/src/main/java/com/henninghall/date_picker/props/Is24hourSourceProp.java

@@ -0,0 +1,13 @@
+package com.henninghall.date_picker.props;
+
+import com.facebook.react.bridge.Dynamic;
+import com.henninghall.date_picker.models.Is24HourSource;
+
+public class Is24hourSourceProp extends Prop<Is24HourSource> {
+    public static final String name = "is24hourSource";
+
+    @Override
+    public Is24HourSource toValue(Dynamic value){
+        return Is24HourSource.valueOf(value.asString());
+    }
+}

android/src/main/java/com/henninghall/date_picker/ui/Wheels.java

@@ -83,7 +83,7 @@ public class Wheels {
     }
 
     void updateDividerHeight() {
-        int height = state.getDividerHeightProp();
+        int height = state.getDividerHeight();
         applyOnAll(new SetDividerHeight(height));
     }
 
@@ -137,7 +137,7 @@ public class Wheels {
         hourWheel.picker.setOnValueChangeListenerInScrolling(new Picker.OnValueChangeListenerInScrolling() {
             @Override
             public void onValueChangeInScrolling(Picker picker, int oldVal, int newVal) {
-                if(Utils.usesAmPm()){
+                if(state.derived.usesAmPm()){
                     String oldValue = hourWheel.getValueAtIndex(oldVal);
                     String newValue = hourWheel.getValueAtIndex(newVal);
                     boolean passingNoonOrMidnight = (oldValue.equals("12") && newValue.equals("11")) || oldValue.equals("11") && newValue.equals("12");

android/src/main/java/com/henninghall/date_picker/wheels/AmPmWheel.java

@@ -32,7 +32,7 @@ public class AmPmWheel extends Wheel {
 
     @Override
     public boolean visible() {
-        return Utils.usesAmPm() && state.getMode() != Mode.date;
+        return state.derived.usesAmPm() && state.getMode() != Mode.date;
     }
 
     @Override
@@ -42,7 +42,7 @@ public class AmPmWheel extends Wheel {
 
     @Override
     public String getFormatPattern() {
-        return Utils.usesAmPm() ? " a " : "";
+        return state.derived.usesAmPm() ? " a " : "";
     }
 
     @Override

android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java

@@ -20,7 +20,7 @@ public class HourWheel extends Wheel {
     public ArrayList<String> getValues() {
         Calendar cal = Calendar.getInstance();
         ArrayList<String> values = new ArrayList<>();
-        int numberOfHours = Utils.usesAmPm() ? 12 : 24;
+        int numberOfHours = state.derived.usesAmPm() ? 12 : 24;
 
         for(int i=0; i<numberOfHours; i++) {
             values.add(format.format(cal.getTime()));
@@ -41,7 +41,7 @@ public class HourWheel extends Wheel {
 
     @Override
     public String getFormatPattern() {
-        return Utils.usesAmPm() ? "h": "HH";
+        return state.derived.usesAmPm() ? "h": "HH";
     }
 
     @Override

android/src/main/java/com/henninghall/date_picker/wheels/MinutesWheel.java

@@ -47,7 +47,7 @@ public class MinutesWheel extends Wheel {
 
     @Override
     public Paint.Align getTextAlign() {
-        return Utils.usesAmPm() ? Paint.Align.RIGHT: Paint.Align.LEFT;
+        return state.derived.usesAmPm() ? Paint.Align.RIGHT: Paint.Align.LEFT;
     }
 
 }

src/defaultProps.js

@@ -2,4 +2,5 @@ export default {
   mode: 'datetime',
   minuteInterval: 1,
   androidVariant: 'iosClone',
+  is24hourSource: 'device',
 }

src/index.d.ts

@@ -73,6 +73,12 @@ export interface DatePickerProps extends ViewProps {
    * Changes the divider height of the android variant iosClone
    */
   dividerHeight?: number
+
+  /**
+   * Changes if 24/12-hour format should be determined from the locale or device setting.
+   * "device" is default on android and "locale" on iOS. On iOS this cannot be changed.
+   */
+  is24hourSource?: 'locale' | 'device'
 }
 
 export default class DatePicker extends Component<DatePickerProps> {}

src/propTypes.js

@@ -5,6 +5,7 @@ const androidProptypes = {
   fadeToColor: PropTypes.string,
   androidVariant: PropTypes.oneOf(['iosClone', 'nativeAndroid']),
   dividerHeight: PropTypes.number,
+  is24hourSource: PropTypes.oneOf(['locale', 'device']),
 }
 
 const DateType = PropTypes.instanceOf(Date)