Search code examples
cssreactjsreact-datepicker

React-Datepicker: How can I change the navigation arrows?

I have a situation, where I am supposed to change the navigation arrows available by default in react-datepicker component.

What did I found and tried?

I found the datepicker uses a button tags and uses the class to apply the icons as below:

<button type="button" class="react-datepicker__navigation react-datepicker__navigation--previous react-datepicker__navigation--previous--disabled"></button>
<button type="button" class="react-datepicker__navigation react-datepicker__navigation--next"></button>

I tried implementing the background with an expected image on right/next navigation button as:

.react-datepicker__navigation--next {
    background: url(../images/rightArrow.png) no-repeat !important;
    right: 10px;
    width: 15px;
}

But it doesn't work.

Can anyone help me up in how to change the image on navigation images?

NOTE: I checked the react-datepicker documentations and other SO queries, but nowhere found any relevant help on this so far.

Solution

  • If you're talking about this datepicker component - they build arrows using borders. So to use custom images for arrows it'd be enough to set appropriate width and height for particular arrow button and eliminate border.

    Using your example it seems that next would work:

    .react-datepicker__navigation--next {
    background: url(../images/rightArrow.png) no-repeat;
    width: 15px;
    height: 15px;
    border: none;
}