Unable to change color of confirm button

[jesshanta]

Issue

I cannot change the color of the confirm button using the custom styles. The color is set under btnTextText. I tried changing the style for that, but it doesn't work. My custom styling for dateInput works for me. I've tried changing color for all the other btn styles, but nothing is working. What property should i be changing?

Code

<DatePicker
            date={this.state.date}
            onDateChange={this.setDate}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            iconComponent={calIcon}
            customStyles={{
              btnTextText: {
                color: color.navBarIcon,
                fontSize:40,
              },
              dateInput: {
                borderWidth: 0,
                alignItems: 'left'
              }
            }}
          />

[valarun]

You can change the color of the confirm button by setting the color of btnTextConfirm inside customStyles.

Example:

<DatePicker
            date={this.state.date}
            onDateChange={this.setDate}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            iconComponent={calIcon}
            customStyles={{
              btnTextText: {
                color: color.navBarIcon,
                fontSize:40,
              },
              dateInput: {
                borderWidth: 0,
                alignItems: 'left'
              },
              btnTextConfirm: {
                color: 'pink'                 <-------
              }
            }}
          />

[Natelegreat1]

@valarun I have tried everything in custom styles yet I cannot get it to change from the default (red for some reason)

        customStyles={{
          btnTextText: {
            color: '#000000',
          },
          btnTextConfirm: {
            color: 'green',
          },
          btnTextCancel: {
            color: 'pink',
          }
        }}

[jenskuhrjorgensen]

@Natelegreat1 According to the docs btnTextConfirm is only available on iOS.

[Ligia-Andreica]

• On iOS, the library uses DatePickerIOS component that can be styled by setting btnTextConfirm and btnTextCancel props
• On Android, the library uses DatePickerAndroid and TimePickerAndroid components. In order to style them, you need to add the following in your RN app in android/app/src/main/res/values/styles.xml:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/MyDatePicker</item>
        <!--<item name="android:colorAccent">@color/your_custom_color</item>-->
    </style>
    <style name="MyDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="SpinnerTimePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:timePickerStyle">@style/MyTimePicker</item>
    </style>
    <style name="MyTimePicker" parent="android:Widget.Material.TimePicker">
        <item name="android:timePickerMode">spinner</item>
    </style>

Uncomment

<!--<item name="android:colorAccent">@color/your_custom_color</item>-->

in order to override the default color.

[nabetse28]

What I have to do if I want to change the color of the text inside the "modal" where is the confirm button and the cancel button??

[fkrajcar]

What I have to do if I want to change the color of the text inside the "modal" where is the confirm button and the cancel button??

I added following code to android/app/src/main/res/values/styles.xml

<style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
     <item name="android:datePickerStyle">@style/MyDatePicker</item>
     <item name="android:colorAccent">@color/black</item>
</style>

<style name="MyDatePicker" parent="android:Widget.Material.DatePicker">
     <item name="android:datePickerMode">spinner</item>
</style>

[meirav-s]

@fkrajcar it's not working to me. any idea how can I change the confirm & cancel buttons text color? (for android) its urgent to me.

[RiyaNainwani]

@meirav-s same issue

[meet-shekhat]

confirm button color still not change

[RiyaNainwani]

@meet-shekhat Try this:

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#000000</color>              //<--- any color you want
</resources>

styles.xml: <item name="android:datePickerDialogTheme">@style/Dialog.Theme</item> //<--- inside the style tag of AppTheme

also add the following snippet in styles.xml inside ,

<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#F14436</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CalendarDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">calendar</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@color/transparent</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/primary</item>
    </style>

    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/primary</item>
    </style>