React-dates: renderMonthText prop makes the calendar invisible

Created on 14 May 2020 · 6Comments · Source: airbnb/react-dates

react-dates version
[email protected]

Describe the bug
I need the Jalali calendar instead of Gregorian, so based on docs and examples, I came up with the following configuration.

The calendar works perfectly without renderMonthText prop. renderMonthText prop makes the calendar view invisible as you see on the preview below.

Source code (including props configuration)

<DayPickerSingleDateController
  isRTL
  renderMonthText={(month) =>
    momentJalaali(month).format('jMMMM jYYYY')
  }
  renderDayContents={(day) => momentJalaali(day).format('jD')}
/>

Screenshots/Gifs
screen-capture

Desktop (please complete the following information):

OS: Windows 10
Browser Google Chrome
Version 81.0.4044.138

Is the issue reproducible in Storybook?
https://codesandbox.io/s/purple-glade-wb9rx?file=/src/App.js

Additional context
I saw this behavior before with DateRangePicker. In that case, renderMonthText prop makes calendars invisible too.

Source

meness

👍6

Most helpful comment

@meness as workaround it should work with renderMonthElement

<DayPickerSingleDateController
  isRTL
  renderMonthElement={({month}) =>
    momentJalaali(month).format('jMMMM jYYYY')
  }
  renderDayContents={(day) => momentJalaali(day).format('jD')}
/>

mmarkelov on 15 May 2020

👍4 🚀1

All 6 comments

@meness youp, seems like a bug. And I suppose it came from here:
https://github.com/airbnb/react-dates/blob/480b9902d69e64e62a2ef5c2d3b5fc3adef94444/src/components/DayPicker.jsx#L342-L346
Cause comparing two functions will be always return false, it will break UI, I can take a look and try to fix it

mmarkelov on 14 May 2020

👍1

@meness as workaround it should work with renderMonthElement

<DayPickerSingleDateController
  isRTL
  renderMonthElement={({month}) =>
    momentJalaali(month).format('jMMMM jYYYY')
  }
  renderDayContents={(day) => momentJalaali(day).format('jD')}
/>

mmarkelov on 15 May 2020

👍4 🚀1

+1 same issue here. Using the workaround in the meantime

mlp73 on 25 Aug 2020

@mmarkelov & @ljharb The issue still exists.

renderMonthText={(month) =>
              DateUtils.formatDateBasedOnLocale(
                month,
                i18n.locale,
                'MMMM YYYY',
                'jMMMM jYYYY'
              )
            }

meness on 22 Oct 2020

@meness it was not published yet

mmarkelov on 22 Oct 2020

👍1

I have created a fork to fix this.
calendarSystem prop added toDateRangePicker andSingleDatePicker components for supporting JALALI calendar system.

You can see a working range picker here:

https://mohsensaremi.github.io/react-dates/?path=/story/daterangepicker-drp--non-english-locale-persian