Added AM/PM support.

README.md

@@ -30,7 +30,7 @@ export default class App extends Component {
         <DatePicker
           date={this.state.chosenDate}
           onDateChange={this.setDate}
-          style={styles.picker}
+          style={{ width: 300, height: 170 }}
         />
       </View>
     );
@@ -44,10 +44,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'white',
   },
-  picker: { 
-    width: 300, 
-    height: 170,
-  },
 })
 
 ```

android/build.gradle

@@ -25,4 +25,6 @@ dependencies {
     compile fileTree(include: ['*.jar'], dir: 'libs')
     compile 'com.facebook.react:react-native:+'
     compile 'cn.carbswang.android:NumberPickerView:1.1.1'
+    compile 'org.apache.commons:commons-lang3:3.6'
+
 }

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

@@ -8,7 +8,10 @@ import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import org.apache.commons.lang3.LocaleUtils;
+
 import java.util.Date;
+import java.util.Locale;
 import java.util.Map;
 
 
@@ -33,6 +36,11 @@ public class DatePickerManager extends SimpleViewManager  {
        view.setDate(new Date((long)date));
   }
 
+  @ReactProp(name = "locale")
+  public void setLocale(PickerView view, @Nullable String locale) {
+    view.setLocale(LocaleUtils.toLocale(locale));
+  }
+
   public Map getExportedCustomBubblingEventTypeConstants() {
     return MapBuilder.builder()
             .put("dateChange", MapBuilder.of("phasedRegistrationNames",

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

@@ -1,11 +1,13 @@
 package com.henninghall.date_picker;
 
 import android.view.View;
+import android.view.ViewManager;
 import android.widget.RelativeLayout;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.henninghall.date_picker.wheels.AmPmWheel;
 import com.henninghall.date_picker.wheels.DayWheel;
 import com.henninghall.date_picker.wheels.HourWheel;
 import com.henninghall.date_picker.wheels.MinutesWheel;
@@ -24,6 +26,7 @@ public class PickerView extends RelativeLayout {
     private HourWheel hourWheel;
     private DayWheel dayWheel;
     private MinutesWheel minutesWheel;
+    private AmPmWheel ampmWheel;
 
     public PickerView() {
         super(DatePickerManager.context);
@@ -39,8 +42,12 @@ public class PickerView extends RelativeLayout {
         NumberPickerView minutePicker = (NumberPickerView) rootView.findViewById(R.id.minutes);
         minutesWheel = new MinutesWheel(minutePicker, onWheelChangeListener, locale);
 
+        NumberPickerView ampmPicker = (NumberPickerView) rootView.findViewById(R.id.ampm);
+        ampmWheel = new AmPmWheel(ampmPicker, onWheelChangeListener, locale);
+
         dateFormat = new SimpleDateFormat(getDateFormatTemplate(), locale);
 
+        ((ViewManager) ampmPicker.getParent()).removeView(ampmPicker);
     }
 
     WheelChangeListener onWheelChangeListener = new WheelChangeListener(){
@@ -48,8 +55,7 @@ public class PickerView extends RelativeLayout {
         public void onChange() {
             WritableMap event = Arguments.createMap();
             try {
-                String dateString = dayWheel.getValue() + " " + hourWheel.getValue() + " " + minutesWheel.getValue();
-                Date date = dateFormat.parse(dateString);
+                Date date = dateFormat.parse(getDateString());
                 event.putDouble("date", date.getTime());
             } catch (ParseException e) {
                 e.printStackTrace();
@@ -60,13 +66,30 @@ public class PickerView extends RelativeLayout {
 
 
     private String getDateFormatTemplate() {
-        return dayWheel.getFormatTemplate() + " " + hourWheel.getFormatTemplate() + " " + minutesWheel.getFormatTemplate();
+        return dayWheel.getFormatTemplate() + " "
+                + hourWheel.getFormatTemplate() + " "
+                + minutesWheel.getFormatTemplate() + " "
+                + ampmWheel.getFormatTemplate();
+    }
+
+    private String getDateString() {
+        return dayWheel.getValue()
+                + " " + hourWheel.getValue()
+                + " " + minutesWheel.getValue()
+                + " " + ampmWheel.getValue();
     }
 
     public void setDate(Date date) {
         dayWheel.setValue(date);
         hourWheel.setValue(date);
         minutesWheel.setValue(date);
+        ampmWheel.setValue(date);
     }
 
+    public void setLocale(Locale locale) {
+        dayWheel.setLocale(locale);
+        hourWheel.setLocale(locale);
+        minutesWheel.setLocale(locale);
+        ampmWheel.setLocale(locale);
+    }
 }

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

@@ -1,55 +0,0 @@
-package com.henninghall.date_picker;
-
-import android.support.annotation.Nullable;
-import android.view.View;
-
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.Callback;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
-import com.facebook.react.uimanager.SimpleViewManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
-import com.facebook.react.views.image.ReactImageView;
-
-import java.util.Date;
-import java.util.Map;
-
-import static java.security.AccessController.getContext;
-
-
-public class RCTDatePickerManager extends SimpleViewManager<View>  {
-
-  public static final String REACT_CLASS = "RCTDatePickerManager";
-  public static ThemedReactContext context;
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  public PickerView createViewInstance(ThemedReactContext reactContext) {
-    RCTDatePickerManager.context = reactContext;
-    return new PickerView();
-  }
-
-  @ReactProp(name = "date")
-  public void setDate(PickerView view, @Nullable double date) {
-       view.setDate(new Date((long)date));
-  }
-
-  public Map getExportedCustomBubblingEventTypeConstants() {
-    return MapBuilder.builder()
-            .put("dateChange", MapBuilder.of("phasedRegistrationNames",
-                    MapBuilder.of("bubbled", "onChange")
-                    )
-            ).build();
-  }
-
-}
-
-

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

@@ -1,34 +0,0 @@
-package com.henninghall.date_picker;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.JavaScriptModule;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-
-/**
- * Created by heng on 16/9/5.
- */
-
-public class RCTDatePickerPackage implements ReactPackage {
-
-    @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-        return Collections.emptyList();
-    }
-
-    @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Arrays.<ViewManager> asList(
-                new RCTDatePickerManager()
-        );
-    }
-}

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

@@ -0,0 +1,16 @@
+package com.henninghall.date_picker;
+
+
+import java.text.DateFormat;
+import java.text.SimpleDateFormat;
+import java.util.Locale;
+
+public class Utils {
+
+    public static boolean usesAmPm(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/wheels/AmPmWheel.java

@@ -0,0 +1,37 @@
+package com.henninghall.date_picker.wheels;
+
+import com.henninghall.date_picker.Utils;
+import com.henninghall.date_picker.WheelChangeListener;
+
+import java.util.ArrayList;
+import java.util.Calendar;
+import java.util.Locale;
+
+import cn.carbswang.android.numberpickerview.library.NumberPickerView;
+
+
+public class AmPmWheel extends Wheel {
+
+    public AmPmWheel(NumberPickerView p, WheelChangeListener listener, Locale locale){
+        super(p, listener, locale);
+    }
+
+    @Override
+    void init() {
+        values.add("AM");
+        values.add("PM");
+
+        picker.setDisplayedValues(values.toArray(new String[0]));
+
+        picker.setMinValue(0);
+        picker.setMaxValue(1);
+        picker.setValue(0);
+    }
+
+    @Override
+    public String getFormatTemplate() {
+        return Utils.usesAmPm(locale) ? "a" : "";
+    }
+
+
+}

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

@@ -12,10 +12,8 @@ import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 
 public class DayWheel extends Wheel {
 
-    private static String DAY_FORMAT_TEMPLATE = "yy EEE d MMM";
-
     public DayWheel(NumberPickerView p, WheelChangeListener listener, Locale locale){
-        super(p, listener, DAY_FORMAT_TEMPLATE, locale);
+        super(p, listener, locale);
     }
 
     @Override
@@ -43,7 +41,10 @@ public class DayWheel extends Wheel {
 
     }
 
-
+    @Override
+    public String getFormatTemplate() {
+        return "yy EEE d MMM";
+    }
 
 
 }

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

@@ -1,5 +1,6 @@
 package com.henninghall.date_picker.wheels;
 
+import com.henninghall.date_picker.Utils;
 import com.henninghall.date_picker.WheelChangeListener;
 import java.util.Calendar;
 import java.util.Locale;
@@ -10,12 +11,13 @@ import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 public class HourWheel extends Wheel {
 
     public HourWheel(NumberPickerView p, WheelChangeListener listener, Locale locale){
-        super(p, listener, "HH", locale);
+        super(p, listener, locale);
     }
 
     @Override
     void init() {
-        int numberOfHours= 24;
+        int numberOfHours = Utils.usesAmPm(locale) ? 12 : 24;
+
 
         for(int i=0; i<numberOfHours; i++) {
             values.add(format.format(cal.getTime()));
@@ -26,6 +28,9 @@ public class HourWheel extends Wheel {
         picker.setMaxValue(numberOfHours - 1);
     }
 
-
+    @Override
+    public String getFormatTemplate() {
+        return Utils.usesAmPm(locale) ? "hh": "HH";
+    }
 
 }

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

@@ -11,10 +11,8 @@ import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 
 public class MinutesWheel extends Wheel {
 
-    private static String FORMAT_TEMPLATE = "mm";
-
     public MinutesWheel(NumberPickerView p, WheelChangeListener listener, Locale locale){
-        super(p, listener, FORMAT_TEMPLATE , locale);
+        super(p, listener, locale);
     }
 
     @Override
@@ -28,6 +26,10 @@ public class MinutesWheel extends Wheel {
         picker.setMaxValue(59);
     }
 
+    @Override
+    public String getFormatTemplate() {
+        return "mm";
+    }
 
 
 }

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

@@ -1,5 +1,7 @@
 package com.henninghall.date_picker.wheels;
 
+import android.view.ViewManager;
+
 import com.henninghall.date_picker.WheelChangeListener;
 
 import java.text.SimpleDateFormat;
@@ -14,8 +16,8 @@ import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 public abstract class Wheel {
 
     abstract void init();
+    abstract String getFormatTemplate();
 
-    private String formatTemplate;
     ArrayList<String> values;
     NumberPickerView picker;
     Locale locale;
@@ -23,14 +25,13 @@ public abstract class Wheel {
     Calendar cal = Calendar.getInstance();
 
 
-    Wheel(NumberPickerView picker, final WheelChangeListener listener, String formatTemplate, Locale locale){
-        this.formatTemplate = formatTemplate;
+    Wheel(NumberPickerView picker, final WheelChangeListener listener, Locale locale){
         this.locale = locale;
         this.picker = picker;
-        values = new ArrayList<>();
-        format = new SimpleDateFormat(formatTemplate, locale);
+        this.values = new ArrayList<>();
+        this.format = new SimpleDateFormat(getFormatTemplate(), locale);
+        refresh();
 
-        init();
         picker.setOnValueChangedListener(new NumberPickerView.OnValueChangeListener() {
             @Override
             public void onValueChange(NumberPickerView picker, int oldVal, int newVal) {
@@ -40,20 +41,22 @@ public abstract class Wheel {
 
     }
 
-    public String getFormatTemplate() {
-        return formatTemplate;
-    }
-
     public String getValue() {
         return values.get(picker.getValue());
     }
 
     public void setValue(Date date) {
-        picker.setValue(values.indexOf(format.format(date)));
+        int index = values.indexOf(format.format(date));
+        if(index > -1) picker.setValue(index);
     }
 
-    public void updateLocale(Locale locale) {
-        this.locale = locale;
+    public void setLocale(Locale locale) {
+        this.locale =locale;
+        refresh();
+    }
+
+    private void refresh() {
+        this.format = new SimpleDateFormat(getFormatTemplate(), locale);
         init();
     }
 

android/src/main/res/layout/datepicker_view.xml

@@ -69,6 +69,25 @@
             app:npv_ItemPaddingHorizontal="3dp"
             android:gravity="center"
             />
+
+        <cn.carbswang.android.numberpickerview.library.NumberPickerView
+            android:id="@+id/ampm"
+            android:layout_width="wrap_content"
+            android:layout_height="160dp"
+            android:layout_toEndOf="@+id/minutes"
+            android:layout_toRightOf="@+id/minutes"
+            android:background="#FFFFFF"
+            app:npv_DividerColor="#cccccc"
+            app:npv_RespondChangeOnDetached="false"
+            app:npv_ShowCount="5"
+            app:npv_TextColorNormal="#aaaaaa"
+            app:npv_TextColorSelected="#000000"
+            app:npv_TextSizeNormal="18sp"
+            app:npv_TextSizeSelected="21sp"
+            app:npv_WrapSelectorWheel="true"
+            app:npv_ItemPaddingHorizontal="3dp"
+            android:gravity="center"
+            />
     </RelativeLayout>
 
     <ImageView