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

Question

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.

it would be more efficient if you'd provide a real working example instead of pasting a screenshot. — falinsky, Aug 21 '18 at 07:44

score 13 · Accepted Answer · answered Aug 21 '18 at 07:43

13

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

answered Aug 21 '18 at 07:43

falinsky

7,229
3
32
56

1

Plus One to the BullsEye Solution... Thank you So Much – OM The Eternity Aug 21 '18 at 07:53

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

1 Answers1