Feature Request

As the default picker theme is "White & green in android and White in iOS". I think there should be an option/prop to change the theme or color of the Date-Picker?

Why it is needed

This feature is needed so as to match the picker color with the app theme and to make it more useful.

+1 would be great!

Can it be done with a JS api only? or is it required to modify android theme files?

+1, i realy love if it was implemented

This color is the main issue why a lot of people don't use this package to be honest

+1

My main issue is not being able to change the gradient of the Android picker, not possible to make it look good on a non-white background.

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

Thanks soooooo much

On Wed, Oct 23, 2019, 5:29 PM guillesequeira [email protected] wrote:

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i putted:

• colorAccent is the color of header of calendar and selector
• textColor is the color of numbers and text buttons
• extColorPrimary is the color of text of month.

I hope it works for you, regards

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-datetimepicker/issues/20?email_source=notifications&email_token=AHDHZJY3WWEOKKILM5NTQRDQQB3WRA5CNFSM4ISTNG52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECCBPAQ#issuecomment-545527682, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHDHZJ5WWKGP7QURAOSXCMTQQB3WRANCNFSM4ISTNG5Q .

@guilleSequeiraWolox Thanks for the excellent example for how to style it statically. However - being able to set it dynamically is a must if your app supports any kinds of themes (which is a common case in these days of Dark Mode).

Hi,

Unfortunately it will never be possible to change the color of this picker through a prop. The native widget does not allow so, and even android native developers complain about this.

The only way is through xml. If you want to have support for this,asking here won't help, you'd rather complain to google directly.

@slorber I see. Maybe it'd be possible to switch native android themes through this library? Then you'd at least be able to provide a dark and light option to switch between :)

It should be possible to tell the component what theme name to use if my Android skills aren't totally missing. Then yes, you could pass a theme prop in and (in combo with react-native-appearance to fetch current UI mode) set a dark mode correctly

Yes - any PR to do this would alter these calls: https://github.com/react-native-community/react-native-datetimepicker/blob/master/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java#L65

Using this constructor: https://developer.android.com/reference/android/app/DatePickerDialog#DatePickerDialog(android.content.Context,%20int,%20android.app.DatePickerDialog.OnDateSetListener,%20int,%20int,%20int)

To pass in a value that was "somehow passed to Java" (via an API that does not exist yet on the module)

@Swaagie @slorber does that seem like the rough shape of a solution for Android that would work here? It's not great but it seems dictated by the platform

Implementation ideas - for dark mode specifically at least the system already has a named theme for it, so for the "typical" (i.e. "support light and dark mode") use case there's no need to mess with themes even as long as you could pass the theme name in as they do here:

https://www.android-examples.com/change-datepickerdialog-theme-in-android-using-dialogfragment/

But the names themselves have moved across APIs (see update here) https://stackoverflow.com/a/25585029/9910298

Agree, we needs this feature.

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

How to make this happen on expo that not ejected?

A bit hacky, but I've managed to make it 'kinda white' using shadow props

<DateTimePicker
          style={{
            shadowColor: '#fff',
            shadowRadius: 0,
            shadowOpacity: 1,
            shadowOffset: { height: 0, width: 0 },
          }}
          mode="time"
          value={valueDate}
          minuteInterval={10}
          onChange={(event, date) => {
            if (date) {
              onChange(convertDateToMinutes(date));
              return;
            }
          }}
        />

@sbycrosz, @vonovak Guys, I've seen you created textColor feature, but it still doesn't work. I use 2.3.0 version. Please take a look a snack - https://snack.expo.io/@nozhenkod/rndatetimepicker-text-color

@NozhenkoD please open a separate issue, thank you.

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

* colorAccent is the color of header of picker and selector

* textColor is the color of numbers and text buttons

* textColorPrimary is the color of text of month.

I hope it works for you, regards.

Tip for the those using the time picker and would like to change the colors. Change android:datePickerDialogTheme to android:timePickerDialogTheme

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

Is this solution still working for anyone using [email protected]?

My styles.xml file is as follows:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
        <item name="android:timePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/beige</item>
        <item name="android:textColor">#000000</item>
    </style>

    <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/blue</item>
        <item name="android:textColor">@color/blue</item>
        <item name="android:textColorPrimary">@color/blue</item>
    </style>
</resources>

But both pickers are still appearing as the default teal and white colours.

with [email protected] above solution not working. still looking for a solution

On what version is this hack working? I have tried multiple versions and none of them is working for me...

Solution with android theme changes is not ok, because in app we have more than 1 theme (dark, white, custom and etc.), that configured inside React Native, not native part. So, for now we can not use this solution, because colors can be different between themes

Is there any working solution for this?

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

* colorAccent is the color of header of picker and selector

* textColor is the color of numbers and text buttons

* textColorPrimary is the color of text of month.

I hope it works for you, regards.

Tip for the those using the time picker and would like to change the colors. Change android:datePickerDialogTheme to android:timePickerDialogTheme

Works for me, thanks!!

There are many ideas on this thread we can split them in another issues

• Feature Request Support Dark Theme
• Pass theme resource id to DatePickerDialog (Android only)
• If someone has a problem with textColor open another issue (with a reproducible demo)

Feel free to open this issues.

I can help to implement the feature on Android to pass via prop the themeResId to change the theme of the DatePickerDialog

Maybe somebody else is having the same problem as me.

Simply remove display="calendar" from <DateTimePicker> tag.

After that, it worked perfectly. I don't know why if I have display="calendar" the syle is not working anymore

@biskis @Silventino none of the solutions are working for me, can you show all props which is used

Finally found a solution pass display="calendar" in android/app/src/main/res/values/styles.xml i put:

<style name="CalendarDatePickerDialog" parent="Theme.AppCompat.Light.Dialog">
     <item name="colorAccent">@color/red</item>
     <item name="android:textColor">@color/red</item>
     <item name="android:textColorPrimary">@color/red</item>
 </style>

Any update on this issue? Is there any permanent way to only show the light datepicker even in iOS dark mode. My datepicker is completely invisible now(background is white). If anyone knows any workaround. Please help.

Thank you

Any update on this issue? Is there any permanent way to only show the light datepicker even in iOS dark mode. My datepicker is completely invisible now(background is white). If anyone knows any workaround. Please help.

Thank you

Follow this example #204 @2xSamurai