months are starting based on gregorian calendar

[shahneh]

today is the 17th day of month in Persian calendar but the 17th is showing at the 9th position because it's October 9 in Gregorian calendar

[majapw]

I think this is because we are still using moment instead of moment-jalali to generate the table of dates - https://github.com/airbnb/react-dates/blob/master/src/utils/getCalendarMonthWeeks.js. We would have to figure out a way to plug in a different moment in that helper code.

[FareheSoheil]

Could you solve this issue ?

[ljharb]

@FareheSoheil a PR is welcome.

[hamidpouladi]

hi do you have a plan to solve this issue in future versions? thanks

[mmarkelov]

I worked on this issue, here is my branch. But I'm not sure that it is universal and clear solution. It just more difficult then just change something in https://github.com/airbnb/react-dates/blob/master/src/utils/getCalendarMonthWeeks.js, that @majapw adviced. There couple of changing in some other functions. And API for this purpose is not perfect:

moment.locale('fa');
...
<SingleDatePickerWrapper
        placeholder="تقویم فارسی"
        // You need to redefine initialVisibleMonth with momentJalaali
        initialVisibleMonth={() => momentJalaali(moment())}
        renderMonthText={month => momentJalaali(month).format('jMMMM jYYYY')}
        renderDayContents={day => momentJalaali(day).format('jD')}
        // You need to pass this prop to support Persian Calendar - it is used in utils functions
        // For example: getCalendarMonthWeeks: const firstOfMonth = month.clone().startOf(monthUnit).hour(12);
        monthUnit="jMonth"
        renderCalendarDay={({
          day, month, isOutsideDay, ...props
        }) => (
          <CalendarDay
            day={day}
            {...props}
            // Also You need to redefine isOutsideDay logic here with momentJalaali
            isOutsideDay={
                        !day || day.jMonth() !== momentJalaali(month).jMonth()
                    }
          />
        )}
      />

And you will get something like this:

[hamidpouladi]

@mmarkelov thanks my friend

[mohsensaremi]

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

[mrafei]

@mmarkelov Hi, how can I import your branch in my project? Is it possible to use npm command to import it? Thanks.