React-dates: next and prev navigation classes

Created on 27 Jun 2018  路  6Comments  路  Source: airbnb/react-dates

Using DayPickerSingleDateController it seems the prev does not have a specific class associated to the button. For example, the next button has DayPickerNavigation_rightButton__horizontalDefault, wouldn't the prev button have DayPickerNavigation_leftButton__horizontalDefault? I see this defined in the styles, but it doesn't seem to be getting applied. Is there something I'm missing?

This is previous button:

<button class="DayPickerNavigation_button DayPickerNavigation_button_1 DayPickerNavigation_button__horizontal DayPickerNavigation_button__horizontal_2" type="button" aria-label="Move backward to switch to the previous month."><div>prev</div></button>

and next button:

<button class="DayPickerNavigation_button DayPickerNavigation_button_1 DayPickerNavigation_button__default DayPickerNavigation_button__default_2 DayPickerNavigation_button__horizontal DayPickerNavigation_button__horizontal_3 DayPickerNavigation_button__horizontalDefault DayPickerNavigation_button__horizontalDefault_4 DayPickerNavigation_rightButton__horizontalDefault DayPickerNavigation_rightButton__horizontalDefault_5" type="button" aria-label="Move forward to switch to the next month."><svg class="DayPickerNavigation_svg__horizontal DayPickerNavigation_svg__horizontal_1" viewBox="0 0 1000 1000"><path d="M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z"></path></svg></button>

I can use DayPickerNavigation_button__horizontal_2 to specifically target the prev button, but just seems like perhaps I'm missing something here. Thank you!

Most helpful comment

I'm interested in this as well. I'd like to swap out the prevNav/nextNav svg arrows for another set. Setting these properties to an img node causes the containing buttons to lose their styles. Those containing button styles are useful for aligning the DayPickerNavigation_button with the CalendarMonth_caption.

All 6 comments

Ok, so I guess when defining custom content to the buttons navPrev and navNext this actually changes the containing buttons styles. Is there a way when defining these to specify a custom class for the actual button itself?

Which version of react-dates are you using @btmdave? The answer kind of depends because we made a major change in v17!

@majapw Thanks, using 17.0.0

I'm interested in this as well. I'd like to swap out the prevNav/nextNav svg arrows for another set. Setting these properties to an img node causes the containing buttons to lose their styles. Those containing button styles are useful for aligning the DayPickerNavigation_button with the CalendarMonth_caption.

I am also having this issue. When setting custom navigation components the elements lose the class names which correctly position/align them.

Any update about that?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

krissalvador27 picture krissalvador27  路  3Comments

Daniel15 picture Daniel15  路  3Comments

prztrz picture prztrz  路  3Comments

AsasinCree picture AsasinCree  路  3Comments

sag1v picture sag1v  路  3Comments