Please add props to change theme color of the picker.

[ajaykumar97]

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.

[slorber]

+1 would be great!

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

[mwss1996]

+1, i realy love if it was implemented

[jerryheir]

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

[robertherber]

+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.

[guilleSequeiraWolox]

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.

[robertherber]

@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).

[slorber]

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.

[robertherber]

@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 :)

[mikehardy]

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

[mikehardy]

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

[mikehardy]

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

[teamzz111]

Agree, we needs this feature.

[bsor-dev]

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?

[pie6k]

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;
            }
          }}
        />

[NozhenkoD]

@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

[vonovak]

@NozhenkoD please open a separate issue, thank you.

[ws333]

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

[jamesl1001]

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.

[ChathuraPrabhash]

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

[biskis]

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

[whalemare]

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

[Silventino]

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

[harveyconnor]

Would like to see this as a prop rather than an xml change. Would be cool to dynamically change this with user based themes within our apps.

[ASakkeer]

You can try this step, It is worked for me (Android)

https://medium.com/@dexiouz/step-by-step-guide-on-how-to-change-background-and-text-color-of-android-date-time-picker-in-react-fbf1a7dea17e

[robertherber]

I managed to style the DatePicker as a Config Plugin (working with Expo Managed - but of course it requires an updated EAS Build). It could serve as a basis for adding it to react-native-datetimepicker and I'm sure it can help someone else in the meantime:

android-datepicker-color-config-plugin.js

/** @type {import('@expo/config-plugins')} */
const {
  AndroidConfig,
  withAndroidStyles,
} = require('@expo/config-plugins');

const { assignStylesValue, getAppThemeLightNoActionBarGroup, setStylesItem } = AndroidConfig.Styles;

const DIALOG_PICKER_THEME_NAME = 'DialogDatePicker.Theme';
const TIME_PICKER_THEME_NAME = 'DialogTimePicker.Theme';

const ACCENT_COLOR = '#662C69';

/** @type {import('@expo/config-plugins').ConfigPlugin} */
const withTheme = (config) => withAndroidStyles(config, (config) => {
  const dialogDateParent = { name: DIALOG_PICKER_THEME_NAME, parent: 'Theme.AppCompat.Light.Dialog' };
  const dialogTimeParent = { name: TIME_PICKER_THEME_NAME, parent: 'Theme.AppCompat.Light.Dialog' };

  config.modResults = setStylesItem({
    parent: dialogDateParent,
    xml: config.modResults,
    item: {
      $: {
        name: 'colorAccent',
      },
      _: ACCENT_COLOR,
    },
  });

  config.modResults = setStylesItem({
    parent: dialogTimeParent,
    xml: config.modResults,
    item: {
      $: {
        name: 'colorAccent',
      },
      _: ACCENT_COLOR,
    },
  });

  config.modResults = assignStylesValue(config.modResults, {
    add: true,
    parent: getAppThemeLightNoActionBarGroup(),
    name: 'android:datePickerDialogTheme',
    value: `@style/${DIALOG_PICKER_THEME_NAME}`,
  });

  config.modResults = assignStylesValue(config.modResults, {
    add: true,
    parent: getAppThemeLightNoActionBarGroup(),
    name: 'android:timePickerDialogTheme',
    value: `@style/${TIME_PICKER_THEME_NAME}`,
  });

  return config;
});

module.exports = withTheme;

Add it to your app.json like this:

{
  "expo": {
    "plugins": ["./android-datepicker-color-config-plugin.js"]
  }
}

BUT for some reason it does not apply the changes to the TimePicker. The resulting styles.xml looks like this:

styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    <item name="android:timePickerDialogTheme">@style/DialogTimePicker.Theme</item>
  </style>
  <style name="ResetEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">@android:color/black</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splashscreen</item>
  </style>
  <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#662C69</item>
  </style>
  <style name="DialogTimePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#662C69</item>
  </style>
</resources>

Can someone figure out why the TimePicker color doesn't take? I think it looks similar to previous examples in this Issue..

[bombillazo]

Managed Expo builds/creates native apps on the spot, hence why you don't usually commit those files to the repo, the build commands ensure you have a fresh native project setup every time you run build or delete the native folders generated.

This poses a big challenge when it comes to modifying native code in managed Expo. You'd have to go off the trodden path and start version controlling/patching the setup that Expo generates.

Unless a pure JS implementation of a datetimepicker is created, or the colors are exposed through the RN bridge API, it'll be hard to dynamically change colors at runtime.

[iway1]

adding a config plugin based on what @robertherber to this package has created seems like a great idea (hopefully we can figure out how to get it to apply to the time picker too).

[LTAbhirup]

Hi i am having issue on Android 13 Samsung device.Tried the above code in styles.xml but didn't work.
It is showing the same teal color as in default.
Code:

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



<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.DayNight.Dialog">
        <!-- bg colour change -->
        <item name="android:windowBackground">#181818</item>
        <!-- my app primary blue colour -->
        <item name="colorAccent">#68B7FC</item>
    </style>

[brunohkbx]

Hello everyone. Here's a proposal to address this issue #801, I created a plugin that makes it possible to style both DatePickerDialog and TimePickerDialog.
I'd appreciate your review 🙂

[jose1937JS]

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.

it works for me, thank you so much

[Haukez]

Is it so hard to add it as props ? Its several years now that people need this feature and this is the most advertised library. I don't get how unelegant it is to use considering how many people needing it

[mikehardy]

"Hi 👋 My name is @Haukez and I have a huge sense of entitlement! I haven't proposed a PR but I sure do wish someone would do it for me so I can use their free work. Also, insults! Cheers"

[Haukez]

@mikehardy why so insecure? who is insulting who? had a rough day ???

[mikehardy]

There are people who self reflect and notice their entitled behavior and there are people who don't 😂🤷

[Haukez]

Ok you prove to be a social justice warrior

[mikehardy]

@Haukez this article spells it out nicely: https://medium.com/hackernoon/i-thought-i-understood-open-source-i-was-wrong-cf54999c097b

I am a warrior for open source. And I advocate for people to realize that if they use open source libraries they are the developer of that library. There are no users of open source libraries because that's not how open source works. If you use the library and you need a thing, you need to make that thing or wait quietly until someone else does.

Complaining a thing doesn't exist in an open source library is entitled behavior, and there is nothing about it related to social justice. It's about recognizing your place in this open source world. You should think about that.

Anyone that needs this feature - before typing up a comment expressing your wish, think about opening up that code editor instead and making the change you want.

That's open source, that's how it moves forward.

Cheers

[olarcher]

This is how I got it to work with a config plugin in the Expo managed workflow: https://stackoverflow.com/q/77703362/4350421
(Does not address the issue of changing the color at runtime though.)

[iusama46]

Datetimepicker v7.6.3, React native 0.73.6

This code is working for android

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
     <item name="android:forceDarkAllowed">false</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
</style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/primary_color</item>
</style>

<style name="ClockTimePickerDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/primary_color</item>
</style>

[emil-malmgaard-rasmussen]

Hoping for a future solution, until then, thanks for the suggestions in the thread here, and thanks for all the hard work put into this library @mikehardy - It's contribution like this, to the community, that makes it a joy to create React Native apps.

Cheers!

[vonovak]

🎉 This issue has been resolved in version 8.2.0 🎉

If this package helps you, consider sponsoring us! 🚀