React Native Date Picker is an inline datepicker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.

Overview

React Native Date Picker npm Build status npm

This is a React Native Date Picker with following main features:

📱 Supporting iOS and Android
🕑 3 different modes: Time, Date, DateTime
🌍 Multiple languages
🎨 Customizable

iOS
React Native Date Picker
Android
Choose from 2 different variants
React Native Date Picker Android React Native Datepicker
androidVariant="iosClone" androidVariant="nativeAndroid"

Installation

  1. npm install react-native-date-picker or yarn add react-native-date-picker
  2. (cd ios && pod install) (If you're using CocoaPods)
  3. Rebuild the project (e.g. react-native run-android or react-native run-ios)

If you're having troubles after following these steps, there might be a linking issue or you're using Expo.

Requirements

  • Xcode >= 11.6

Minimal Example

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {

  const [date, setDate] = useState(new Date())

  return (
    <DatePicker
      date={date}
      onDateChange={setDate}
    />
  )
}

Properties

Prop Description Screenshots iOS Screenshot Android
date The currently selected date.
onDateChange Date change handler
fadeToColor Android picker is fading towards this background color. {color, 'none'}
maximumDate Maximum selectable date.
Example: new Date("2021-12-31")
minimumDate Minimum selectable date.
Example: new Date("2021-01-01")
androidVariant Choose from 2 android style variants. {'iosClone', 'nativeAndroid'} (default: 'iosClone') Datepicker ios clone variantDatepicker android native variant
minuteInterval The interval at which minutes can be selected. Date picker minute interval IOS Date picker minute interval Android
mode The date picker mode. {'datetime', 'date', 'time'} React native date time pickerReact native datepickerReact native time picker react native date time picker androidreact native datepicker androidreact native time picker android
locale The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. React Native Date picker locale language ios React Native Date picker locale language android
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. react native datepicker text color background color ios Text color background color android
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')

Linking

This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as descripted above). Then rebuild the project by running react-native run-ios, react-native run-android or start the build from within Xcode/Android Studio. If you'running a React Native version below 0.60 or your setup is having issues with automatic linking, you can run npx react-native link react-native-date-picker and rebuild. In some occations you'll have to manually link the package. Instructions in this issue.

About

📅   React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.

FAQ

How do I change the divider color?

The color of the divider, separator (or whatever you choose to call it) can only be changed on android for the androidNative variant. To change it, add the following to your android AppTheme. The theme is often found in styles.xml.

<item name="colorControlNormal">#ff0000</item>

Can I use expo?

Unfortunately, expo does not support this date picker at the moment. Upvote this feature request if you would like to have it included.

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 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 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?

This is unfortunately not possible due to the limitation in DatePickerIOS. You should be able to create your own month-year picker with for instance https://github.com/TronNatthakorn/react-native-wheel-pick.

Why does the Android app crash in production?

If you have enabled Proguard for Android you might need to ignore some classes to get the the picker to work propery in android production/release mode. Add these lines to you proguard file (often called proguard-rules.pro):

-keep public class net.time4j.android.ApplicationStarter
-keep public class net.time4j.PrettyTime

Two different Android variants

On Android there are two design variants to choose from:

iOS clone Native Android
date time picker date time picker
The so called "iOS clone" looks and works similar to the ios version. It shows normaly 5 lines of dates. It is enabled by default. The "Android Native" version looks more like a standard native implementation on Android. The divider color can be changed by adding the following to you Android theme:
<item name="colorControlNormal">#03b6fc</item>
androidVariant="iosClone"
androidVariant="nativeAndroid"

Three different modes

Here are some more info about the three different picker modes that are available.

Date time picker

Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this.

iOS Android
date time picker date time picker

Add the optional datetime mode property to use this mode. Since datetime is default this could also be exclude.

<DatePicker
  ...
  mode="datetime"
/>

Datepicker

The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:

iOS Android
datepicker ios datepicker

Just add the value date to mode property:

<DatePicker
  ...
  mode="date"
/>

Time picker

The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the timeInterval to only display the time with for instance 15min intervals. The react native time picker look like this:

iOS Android
react native time picker react native time picker android

Set mode property to time to show the time picker:

<DatePicker
  ...
  mode="time"
/>

Why another React Native datepicker?

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 seperate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.

If you want to use these pickers you can combile 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.

Issues
  • Issue with AndroidX compatibility

    Issue with AndroidX compatibility

    Hi, I'm using the latest Android SDK as well the new RN0.59.8 , it seems your package is not compatible with this versions.

    I'm getting this errors

    > Task :react-native-date-picker:compileReleaseJavaWithJavac FAILED
    /Users/jglr/project/app/node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java:3: error: package android.support.annotation does not exist
    import android.support.annotation.Nullable;
    

    thanks,

    opened by eggybot 24
  • Native component for RNDatePicker does not exist

    Native component for RNDatePicker does not exist

    Hi, after installation steps, I get that error capture d ecran 2018-11-21 a 12 48 24 pm

    i didn't use expo

    opened by issamabdelkrim 21
  • Crash Android with `IllegalArgumentException`

    Crash Android with `IllegalArgumentException`

    Describe the bug My some Android devices crash when render DatePicker

    java.lang.IllegalArgumentException: Unterminated quote
        at java.text.SimpleDateFormat.compile(SimpleDateFormat.java:884)
        at java.text.SimpleDateFormat.initialize(SimpleDateFormat.java:684)
        at java.text.SimpleDateFormat.<init>(SimpleDateFormat.java:623)
        at com.henninghall.date_picker.wheels.Wheel.<init>(Wheel.java:35)
        at com.henninghall.date_picker.wheels.YearWheel.<init>(YearWheel.java:21)
        at com.henninghall.date_picker.ui.Wheels.<init>(Wheels.java:50)
        at com.henninghall.date_picker.ui.UIManager.<init>(UIManager.java:27)
        at com.henninghall.date_picker.PickerView.<init>(PickerView.java:27)
        at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:40)
        at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:25)
        at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:139)
        at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:83)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:270)
        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:180)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:987)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:958)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1039)
        at android.view.Choreographer.doCallbacks(Choreographer.java:847)
        at android.view.Choreographer.doFrame(Choreographer.java:771)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1027)
        at android.os.Handler.handleCallback(Handler.java:809)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:166)
        at android.app.ActivityThread.main(ActivityThread.java:7555)
        at java.lang.reflect.Method.invoke(Method.java)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:469)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:963)
    

    Expected behavior Render DatePicker ok

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { tempDate: new Date() }
    
      render = () =>
        <DatePicker
           mode={mode}
           date={tempDate}
           collapsable
           minuteInterval={1}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           locale="vi"
           style={{ alignSelf: 'center' }}
           onDateChange={this.onDateChange}
        />
    
    }
    

    Smartphone (please complete the following information):

    • OS: [Android or iOS] Android (only)
    • React Native version [e.g. 0.59.4]: 0.62.2
    • react-native-date-picker version [e.g. 2.5.1]: 2.7.9
    opened by tiendn 21
  • IOS 13 current date not there/visible - urgent help please

    IOS 13 current date not there/visible - urgent help please

    Describe the bug NOW I saw it is only when ios13 dark mode is set!

    Current date is not visible - or it is white not sure on IOS 13 the same code was working fine on IOS 12. On image you can see it's only current date I moved year down and even not in focus it's still white/not there. unnamed

    Expected behavior That current date is visible.

    To Reproduce

    <DatePicker
                    maximumDate={this.props.maximumDate}
                    textColor={this.props.pickerColor}
                    style={{width: this.props.screenWidth}}
                    date={this.state.date}
                    mode={this.props.mode}
                    locale={this.state.locale}
                    onDateChange={this.dateChanged}
                  />
    

    Smartphone (please complete the following information):

    • OS: IOS 13, android work fine
    • React Native version [e.g. 0.59.10]
    • react-native-date-picker version 2.7.0
    bug 
    opened by vvusts 20
  • [Android] Allow setting the 24 hour format instead follow user locale

    [Android] Allow setting the 24 hour format instead follow user locale

    I am really grateful this date picker has the consistent UI and behavior across the ios and android platform and this is what I need for my project. Really appreciate the effort and hard work of doing this. 😄

    Understand that for the android platform, the 24 format is following the user locale setting set in the phone. Is it possible to override user locale setting by adding a prop called is24Format?

    feature request 
    opened by richardtks 18
  • Loading is slow on Android

    Loading is slow on Android

    Hi Henning,

    Thanks for this great library, just what we've been looking for!

    We've tried implementing this in our app, but it seems to load slow on Android. After some debugging we've located the issue in PickerView.java

    Both in setMode and setLocale you call the applyOnAllWheels method, and we've measured this to take between 200 and 400 milliseconds each time on the emulator. They are of course faster on a device, but its still too slow in a production build. If commenting these out, the view loads fast (except it won't work of course). I'm not sure how to solve that, but maybe you have an idea?

    feature request 
    opened by kimhafr 18
  • IllegalArgumentException crash on Android

    IllegalArgumentException crash on Android

    Describe Since upgrading to RN 0.64 we encounter following crash on Android

    The weird part here is that in our project we use react-native-gesture-handle in other components but when we scroll to change the date from DatePickerField it starts to crash on Android and the log points out crash because of react-native-gesture-handler. I am not sure that i am right if i post this issue in here but in fact there are maybe related things between DatePickerField with this crash.

    Crash log:

    IllegalArgumentException. Unable to find JSIModule for class UIManager

    java.lang.IllegalArgumentException: 
      at com.facebook.react.bridge.JSIModuleRegistry.getModule (JSIModuleRegistry.java:39)
      at com.facebook.react.bridge.CatalystInstanceImpl.getJSIModule (CatalystInstanceImpl.java:2)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManager (UIManagerHelper.java:81)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManager (UIManagerHelper.java:1)
      at com.facebook.react.uimanager.UIManagerHelper.getUIManagerForReactTag (UIManagerHelper.java:4)
      at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent (NativeAnimatedNodesManager.java:17)
      at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch (NativeAnimatedNodesManager.java:6)
      at com.facebook.react.uimanager.events.EventDispatcherImpl.dispatchEvent (EventDispatcherImpl.java:27)
      at com.facebook.react.uimanager.JSTouchDispatcher.handleTouchEvent (JSTouchDispatcher.java:58)
      at com.facebook.react.ReactRootView.dispatchJSTouchEvent (ReactRootView.java:49)
      at com.facebook.react.ReactRootView.onInterceptTouchEvent (ReactRootView.java)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2753)
      at com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView.dispatchTouchEvent (RNGestureHandlerEnabledRootView.java:12)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3222)
      at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:2845)
      at com.android.internal.policy.DecorView.superDispatchTouchEvent (DecorView.java:697)
      at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent (PhoneWindow.java:1879)
      at android.app.Activity.dispatchTouchEvent (Activity.java:3487)
      at androidx.appcompat.view.WindowCallbackWrapper.dispatchTouchEvent (WindowCallbackWrapper.java:2)
      at com.android.internal.policy.DecorView.dispatchTouchEvent (DecorView.java:655)
      at android.view.View.dispatchPointerEvent (View.java:13732)
      at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent (ViewRootImpl.java:6131)
      at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess (ViewRootImpl.java:5909)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl$InputStage.onDeliverToNext (ViewRootImpl.java:5411)
      at android.view.ViewRootImpl$InputStage.forward (ViewRootImpl.java:5377)
      at android.view.ViewRootImpl$AsyncInputStage.forward (ViewRootImpl.java:5536)
      at android.view.ViewRootImpl$InputStage.apply (ViewRootImpl.java:5385)
      at android.view.ViewRootImpl$AsyncInputStage.apply (ViewRootImpl.java:5593)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl$InputStage.onDeliverToNext (ViewRootImpl.java:5411)
      at android.view.ViewRootImpl$InputStage.forward (ViewRootImpl.java:5377)
      at android.view.ViewRootImpl$InputStage.apply (ViewRootImpl.java:5385)
      at android.view.ViewRootImpl$InputStage.deliver (ViewRootImpl.java:5358)
      at android.view.ViewRootImpl.deliverInputEvent (ViewRootImpl.java:8420)
      at android.view.ViewRootImpl.doProcessInputEvents (ViewRootImpl.java:8353)
      at android.view.ViewRootImpl.enqueueInputEvent (ViewRootImpl.java:8306)
      at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent (ViewRootImpl.java:8535)
      at android.view.InputEventReceiver.dispatchInputEvent (InputEventReceiver.java:198)
      at android.os.MessageQueue.nativePollOnce (MessageQueue.java)
      at android.os.MessageQueue.next (MessageQueue.java:326)
      at android.os.Looper.loop (Looper.java:181)
      at android.app.ActivityThread.main (ActivityThread.java:7050)
      at java.lang.reflect.Method.invoke (Method.java)
      at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:494)
      at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)
    

    Smartphone

    • OS: Android
    • React Native version: 0.64.0
    • react-native-date-picker: 3.2.10
    • react-native-gesture-handler: 1.10.3
    opened by Trex28 17
  • 3.4.1 does not compile

    3.4.1 does not compile

    Describe the bug A clear and concise description of what the bug is.

    Does not compile:

    > Task :react-native-date-picker:compileReleaseJavaWithJavac FAILED
    
    node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/pickers/
    AndroidNative.java:56: error: cannot find symbol
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    
    symbol:   variable Q
    location: class VERSION_CODES
    
    node_modules/react-native-date-picker/android/src/main/java/com/henninghall/date_picker/pickers/
    AndroidNative.java:57: error: incompatible types: int cannot be converted to String
                setTextColor(color);
    
    compileSdk = 30
    buildTools = "30.0.2"
    minSdk = 22
    targetSdk = 30
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version 0.65.1
    • react-native-date-picker version 3.4.1
    opened by tapz 16
  • Android app crash when open the datepicker

    Android app crash when open the datepicker

    Describe the bug When open the screen contains the date picker in App in Android, the app will instantly crash and exit

    Expected behavior The app should display the date picker without crashing

    To Reproduce Add example code that reproduces the behavior.

            <ReactDatePicker
              mode={mode}
              date={tempMomentValue.toDate()}
              onDateChange={(date) => {
                setTempMomentValue(moment(date))
              }}/>
    
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version :0.61.5
    • react-native-date-picker version : 2.7.6

    Error Log This is the error log in android studio

    2020-02-19 11:19:20.605 11528-11528/com.billiapprn6 E/AndroidRuntime: FATAL EXCEPTION: main Process: com.billiapprn6, PID: 11528 java.lang.NoClassDefFoundError: Failed resolution of: Lnet/time4j/android/ApplicationStarter; at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:32) at com.henninghall.date_picker.DatePickerManager.createViewInstance(DatePickerManager.java:16) at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:139) at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:82) at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:269) at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:179) at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:972) at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:943) at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:28) at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:174) at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947) at android.view.Choreographer.doCallbacks(Choreographer.java:761) at android.view.Choreographer.doFrame(Choreographer.java:693) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:214) at android.app.ActivityThread.main(ActivityThread.java:7050) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965) Caused by: java.lang.ClassNotFoundException: Didn't find class "net.time4j.android.ApplicationStarter" on path: DexPathList[[zip file "/data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/base.apk"],nativeLibraryDirectories=[/data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/lib/arm64, /data/app/com.billiapprn6-jfs-cyvifH4UlZBlt6kj0Q==/base.apk!/lib/arm64-v8a, /system/lib64, /system/vendor/lib64]] at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:134) at java.lang.ClassLoader.loadClass(ClassLoader.java:379) at java.lang.ClassLoader.loadClass(ClassLoader.java:312)

    opened by sindu12jun 16
  • RCTRootView cancelTouches]` is deprecated and will be deleted soon.

    RCTRootView cancelTouches]` is deprecated and will be deleted soon.

    Describe the bug This warning appears when the roller moves once

    To Reproduce Add example code that reproduces the behavior.

    
    
        <DatePicker
                   style={styles.item}
                   mode={'time'}
                   date={date}
                   locale='fr'
                   onDateChange={setDate}
                 />
    
    **Smartphone (please complete the following information):**
     - OS: [Android and iOS]
     - React Native version [ 0.62.2]
     - react-native-date-picker version [ 3.0.0]
    
    opened by Master-gg-02 0
  • Question: how to select in mode='time' a minimum before midnight and a maximum after midnight

    Question: how to select in mode='time' a minimum before midnight and a maximum after midnight

    Describe the bug I want to configure a time-input going from 16:00 till 4:00 after midnight:

    let minDate: Date = new Date();
    minDate.setDate(minDate.getDate() -1) //Subtract one day (without this, the date input flashes completely jumping from min to max)
    minDate.setHours(16, 0, 0);
    let maxDate: Date = new Date();
    maxDate.setHours(4, 0, 0);
    <DatePicker style={styles.clockView}
                            mode='time'
                            minimumDate={minDate}
                            maximumDate={maxDate}/>
    

    With this implementation I can select hours from 16:00h till 23:59. When selecting > 00:00, it will automatically jump to 16:00. Date is not relevant for me. I only want to set a time-window for the time that a person goes to bed. I'm probably missing something really basic.

    Expected behavior I can select a time between 16:00 and 04:00

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { 
        date: new Date() 
      }
    
      render () {
        let minDate: Date = new Date();
        minDate.setDate(minDate.getDate() -1);
        minDate.setHours(16, 0, 0);
        let maxDate: Date = new Date();
        maxDate.setHours(4, 0, 0);
        return (
          <DatePicker
            date={this.state.date}
            minimumDate={minDate}
            maximumDate={maxDate}
            onDateChange={date => this.setState({ date })}
          />
        );
      }
    }
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version: 0.63.4
    • react-native-date-picker version: 4.1.1
    opened by ThomasStubbe 2
  • Fix missing import related to issue #437

    Fix missing import related to issue #437

    #437

    opened by gustavoggs 9
  • Expo EAS compilation error (iOS only)

    Expo EAS compilation error (iOS only)

    Describe the bug Since updating to the latest version (4.1.3) I can't compile for iOS anymore. Android still compiles without error.

    (node_modules/react-native-date-picker/ios/RNDatePicker/DatePicker.m:15:29)
    
      13 | @interface DatePicker ()
      14 | 
    > 15 | @property (nonatomic, copy) RCTBubblingEventBlock onChange;
         |                             ^ declaration of 'RCTBubblingEventBlock' must be imported from module 'React.RCTComponent' before it is required
      16 | @property (nonatomic, assign) NSInteger reactMinuteInterval;
      17 | 
      18 | @end 
    

    Expected behavior Should compile.

    To Reproduce Create Project Install react-native-date-picker 4.1.3 eas build --profile development

    Smartphone:

    • OS: iOS
    • React Native version 0.64.12
    • react-native-date-picker version 4.1.3
    opened by VolkerLieber 6
  • Android: DatePicker androidVariant={'nativeAndroid'} does not work with API Level 23

    Android: DatePicker androidVariant={'nativeAndroid'} does not work with API Level 23

    Describe the bug The Picker isnt visible with androidVariant={'nativeAndroid'}. I tried it with modal and inline.

    Its only visible with androidVariant={'iosClone'}

    Expected behavior The Picker is visible in nativeAndroid VariantTo Reproduce Add example code that reproduces the behavior.

    <DatePicker
            androidVariant={"nativeAndroid"}
            is24hourSource={'locale'}
            locale="de-DE"
            modal
            open={datePickerIsOpen}
            date={editTask.dueDate ? new Date(editTask.dueDate) : new Date()}
            onConfirm={(date: { toISOString: () => any }) => {
    	        // do what you have to do
            }}
            onCancel={() => {
    	        // setDatePickerIsOpen(false);
            }}
            onDateChange={(date) => {
            // this Function has to be set but it has no usability on modal
            }}
            confirmText={'CONFIRM'}
            cancelText={'CANCEL'}
    />
    

    Smartphone (please complete the following information):

    • OS:Android Pixel 2 emulator and Samsung Galaxy A5 API Level 23 Real Device
    • React Native version 0.63.4
    • react-native-date-picker version 4.1.0

    See Screenshot (sry, had to hide some stuff because of Data Privacy) Bildschirmfoto 2021-12-13 um 16 47 06

    opened by Finneah 1
  • Android crash RangeError: Date value out of bounds.

    Android crash RangeError: Date value out of bounds.

    Describe the bug I added the DatePicker with date mode component and used date as state, when the component is rendered the app crashes with RangeError: Date value out of bounds. Source Error: DatePickerAndroid.js retrun addMinutes(...)

    Expected behavior I expect the app not to crash.

    To Reproduce Add example code that reproduces the behavior.

    <DatePicker
                  date={date}
                  androidVariant="iosClone"
                  onDateChange={responseDate => {
                    setDate(new Date(responseDate));
                  }}
                  mode={'date'}
                  textColor={Color.PINK}
                />
    

    Smartphone (please complete the following information):

    • OS: [Android]
    • React Native version [e.g. 0.65.1]
    • react-native-date-picker version [e.g. ^4.1.0]
    opened by LucacelRazvan 3
  • [Android] Datepicker closes only the second time

    [Android] Datepicker closes only the second time

    react-native-date-picker version is 4.1.1.

    Describe the bug After selecting a date and clicking on "Confirm" the modal window closes and opens again. You must click "Confirm" again to close it permanently.

    In this video I open datepicker and then click "Confirm":

    To Reproduce

    export const App = () => {
      const [showDatePicker, setShowDatePicker] = useState(false);
      const [birthdate, setBirthdate] = useState(new Date());
    
      return (
        <>
          <Button title="Open" onPress={() => setShowDatePicker(true)} />
    
          <DatePicker
            modal
            open={showDatePicker}
            date={birthdate}
            mode="date"
            onConfirm={(date) => {
              setBirthdate(date);
              setShowDatePicker(false);
            }}
            onCancel={() => {
              setShowDatePicker(false);
            }}
          />
        </>
      );
    };
    

    I thinks this is happening because two setState are called in one time inside onConfirm handler. This bug is solved with wrapping setState calls in unstable_batchedUpdates:

    import { unstable_batchedUpdates } from 'react-native';
    
    onConfirm={(date) => {
      unstable_batchedUpdates(() => {
        setBirthdate(date);
        setShowDatePicker(false);
      });
    }}
    

    Smartphone (please complete the following information):

    • OS: Android
    • react-native info:
      System:
        OS: macOS 12.0.1
        CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
        Memory: 36.68 MB / 16.00 GB
        Shell: 5.8 - /bin/zsh
      Binaries:
        Node: 14.17.0 - /usr/local/bin/node
        Yarn: 1.22.10 - /usr/local/bin/yarn
        npm: 6.14.13 - /usr/local/bin/npm
        Watchman: 2021.09.13.00 - /usr/local/bin/watchman
      Managers:
        CocoaPods: 1.11.2 - /usr/local/bin/pod
      SDKs:
        iOS SDK:
          Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
        Android SDK: Not Found
      IDEs:
        Android Studio: 2020.3 AI-203.7717.56.2031.7678000
        Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
      Languages:
        Java: javac 17 - /usr/bin/javac
      npmPackages:
        @react-native-community/cli: Not Found
        react: 17.0.2 => 17.0.2 
        react-native: 0.66.0 => 0.66.0 
        react-native-macos: Not Found
      npmGlobalPackages:
        *react-native*: Not Found
    
    opened by fedorov-xyz 5
  • Android: Picker does not show correctly when the mode prop changes

    Android: Picker does not show correctly when the mode prop changes

    Describe the bug On Android, when the mode prop changes, the UI shows a blank space with only the separator.

    Expected behavior When the mode prop changes, the UI should show the correct picker for that mode.

    Screenshots In the video below, the switch toggles the mode prop between "date" and "datetime". The initial value for mode is "date", which shows correctly. But when the mode prop is changed to "datetime", it shows blank.

    https://user-images.githubusercontent.com/4929170/138826099-26e774f8-e0e3-44bc-86e4-3a4a00229435.mp4

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { date: new Date(), mode:  "date"}
      
      render = () => 
      <View>
        <Button title="Toggle" onPress={() => {
          if (this.state.mode === "date") {
            this.setState({ mode: "datetime" })
          } else {
            this.setState({ mode: "date" })
          }
        }} />
        <DatePicker
          mode={this.state.mode}
          date={this.state.date}
          onDateChange={date => this.setState({ date })}
        />
      <View>
    
    }
    

    Smartphone (please complete the following information):

    • OS: Android
    • React Native version: 0.63.4
    • react-native-date-picker version: 4.1.1
    opened by phamhoaivu911 1
  • Installation error

    Installation error

    Describe the bug I just installed the latest version from npm but i am getting this error while running app Could not find com.github.henninghall:numberpickerview:v1.1.5.

    Smartphone (please complete the following information):

    • OS: [Android]
    • React Native version [e.g. 0.64]
    • react-native-date-picker version [e.g. 4.0.0]
    opened by Lekhrajk 1
  • In android onDateChange event is not fired when we select minimum / current date

    In android onDateChange event is not fired when we select minimum / current date

    Describe the bug In Android onDateChange event not fired

    Expected behavior onDateChange event need to fire on current date or minimum date.

    To Reproduce Add example code that reproduces the behavior.

    export default class App extends Component {
    
      state = { date: new Date() }
    
      render = () =>
       <DatePicker
                date={this.state.date}
                onDateChange={(date) => this.setState({ date: date })}
                mode={'date'}
                locale={I18nManager.isRTL ? 'ar-LY' : 'en-IN'}
                minimumDate={new Date()}
                maximumDate={this.props.maxdate}
                style={style.datePickerStyle}
              /> 
    
    }
    

    Smartphone (please complete the following information):

    • OS: [Android or iOS]
    • React Native version [e.g. 0.59.4]
    • react-native-date-picker version [e.g. 2.5.1]
    opened by Dsudhirkumar 3
Releases(v4.1.3)
  • v4.1.3(Dec 6, 2021)

  • v4.1.2(Nov 26, 2021)

  • v4.1.1(Oct 22, 2021)

  • v4.1.0(Oct 2, 2021)

    • feat: improved spoken feedback https://github.com/henninghall/react-native-date-picker/pull/390 @mika-lindell
    • fix: date changes for all mounted android modal pickers https://github.com/henninghall/react-native-date-picker/pull/399
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Sep 3, 2021)

    ✅ No breaking changes

    • feat: modal https://github.com/henninghall/react-native-date-picker/pull/376
    • fix: talkback read display value on scroll value change https://github.com/henninghall/react-native-date-picker/pull/373
    • fix: android compilation error https://github.com/henninghall/react-native-date-picker/pull/377
    • chore: make date prop required in typescript + move d.ts file to root https://github.com/henninghall/react-native-date-picker/pull/375
    Source code(tar.gz)
    Source code(zip)
  • v3.4.3(Aug 28, 2021)

  • v3.4.2(Aug 24, 2021)

  • v3.4.1(Aug 22, 2021)

  • v3.4.0(Aug 20, 2021)

    • migrate away from jcenter to support React Native 0.65 https://github.com/henninghall/react-native-date-picker/pull/363
    • buxfix: prevent crash when using non-gregorian calendar https://github.com/henninghall/react-native-date-picker/pull/364
    • RTL support https://github.com/henninghall/react-native-date-picker/pull/365
    Source code(tar.gz)
    Source code(zip)
  • v3.3.2(Jun 22, 2021)

    • Added Hebrew screen reader support (#341)
    • Remove unnecessary app_name string (https://github.com/henninghall/react-native-date-picker/pull/347)
    Source code(tar.gz)
    Source code(zip)
  • v3.3.1(Jun 1, 2021)

  • v3.3.0(May 4, 2021)

  • v3.2.10(Feb 20, 2021)

  • v3.2.9(Jan 24, 2021)

  • v3.2.8(Jan 17, 2021)

  • v3.2.7(Dec 28, 2020)

  • v3.2.6(Dec 28, 2020)

  • v3.2.5(Oct 18, 2020)

  • v3.2.4(Oct 12, 2020)

  • v3.2.3(Sep 10, 2020)

  • v3.2.2(Aug 29, 2020)

  • v3.2.1(Aug 23, 2020)

  • v3.2.0(Aug 22, 2020)

    • add is24hourSource prop https://github.com/henninghall/react-native-date-picker/pull/231
    • fix datetime order pattern for vi-vn locale https://github.com/henninghall/react-native-date-picker/pull/228
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Aug 2, 2020)

    • Divider height prop https://github.com/henninghall/react-native-date-picker/pull/220
    • Bugfix: fast scroll flickering https://github.com/henninghall/react-native-date-picker/pull/226
    • Larger touchable area between wheels https://github.com/henninghall/react-native-date-picker/pull/222
    • Removed duplicated meta method UIDatePickerMode https://github.com/henninghall/react-native-date-picker/pull/225
    • Support different color formats https://github.com/henninghall/react-native-date-picker/pull/219
    Source code(tar.gz)
    Source code(zip)
  • v3.0.3(Jul 26, 2020)

    • Add iOS 14 support. https://github.com/henninghall/react-native-date-picker/pull/217
    • Styling fix: Adaptive am/pm width for nativeAndroid variant https://github.com/henninghall/react-native-date-picker/pull/216
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Jul 12, 2020)

  • v3.0.1(Jul 12, 2020)

    • Bugfix: NullpointerException could happen for some languages https://github.com/henninghall/react-native-date-picker/pull/204
    • Bugfix android native wheel stop glitch https://github.com/henninghall/react-native-date-picker/pull/205
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Jul 11, 2020)

  • v3.0.0-beta.0(Jul 11, 2020)

  • v2.7.13(Jul 8, 2020)

Owner
Henning Hall
Henning Hall
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 301 Jan 19, 2022
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Jan 18, 2022
A button React Native component supporting showing different states with animations

React Native Awesome Button An <AwesomeButton /> component that creates a button depicting different states in terms of e.g. color and label text. Whe

Lars Vinter 234 Dec 3, 2021
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

react-native-datepicker React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS Insta

X  Fruit Team 2.1k Jan 13, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 68 Jan 17, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 397 Dec 23, 2021
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 330 Jan 15, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 322 Jan 18, 2022
React Native date and time pickers for Android

react-native-date React Native date and time pickers for Android Installation and How to use Step 1 - NPM Install npm install --save react-native-date

Igor Adrov 45 Apr 10, 2019
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 140 Jan 9, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 537 Jan 3, 2022
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 387 Jan 15, 2022
🔢 React-Native component to input confirmation code for both Android and IOS

rn-verifcode React-Native component to input confirmation code for both Android and IOS customizable fast paste SMS-code copy from clipboard reset cod

Xavier Carpentier 22 Nov 4, 2021
A react-native confirmation code field compatible with IOS, Android

react-native-confirmation-code-field A simple react-native confirmation code field compatible with iOS, Android. Links Documentation Example app Live

David Narbutovich 667 Jan 13, 2022
Country Name & Code List for React Native (Android & IOS)

React Native Countries React Native Countries v1.0.2 will provide you directly native countries list. The names of the countries come in the native la

Talut TASGIRAN 11 Jan 8, 2022
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 73 Jan 5, 2022
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

null 3 Dec 21, 2021