I am trying to use airbnb react-dates with non-English locale (Persian) and everything is working fine, except for the first day of the month.

The months do not start from the first day in Persian (Jalaali) calendar to the 30th day, they start from the 10th day of the month and continue to the 10th day of the next month.

This problem even exists in their example. I was wondering if there is any way to deal with this issue.

I am trying to use airbnb react-dates with non-English locale (Persian) and everything is working fine, except for the first day of the month.

The months do not start from the first day in Persian (Jalaali) calendar to the 30th day, they start from the 10th day of the month and continue to the 10th day of the next month.

This problem even exists in their example. I was wondering if there is any way to deal with this issue.

• javascript
• reactjs
• react-dates

Share Improve this question Follow edited Feb 5, 2018 at 9:30 Vikas Yadav 3,35422 gold badges2323 silver badges2222 bronze badges asked Feb 3, 2018 at 8:37 Moji IzadmehrMoji Izadmehr 2,5341515 silver badges1919 bronze badges 1

• 1 there is an open issue about this – Sagiv b.g Commented Feb 3, 2018 at 9:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +50

I have been dealing with this issue in a project,this problem is currently an open issue in airbnb react-dates. In order to solve this, I have forked the original project so that it works with jalali moment and the months start from the correct day,the link to the github and npm repositories are:

• github
• npm

how to use:

• import momentJalali from 'moment-jalaali'

• in the constructor of the ponent in which you want to use datepicker set the appropriate locale :

  momentJalali.locale('fa')

• import the datepicker from the forked repository:

import {SingleDatePicker,DateRangePicker} from "react-dates-jalali";

• in render section use the singdatepicker in the following way:

  <SingleDatePicker
        date={date} //momentDate if you have not set this property,it automatically sets to today
        focused={this.onFocusChange}//function change focused:open-close
        onFocusChange={.../function}
        showClearDate={true}
        required={true}
        isRTL={true}
        monthFormat={monthFormat}//for persian:'jMMMM jYYYY', for english :'MMMM YYYY'
        onDateChange={this.onDateChange}//function set your date Change
   />
  

• in render section use the daterangepicker in the following way:

   <DateRangePicker
    startDate={startDate} //moment startDate if you have not set this property,it automatically sets to today
    endDate={endDate} //moment endDate
    onFocusChange={.../function}
    required={true}
    isRTL={true}
    onDatesChange={this.onDatesChange}//function set startDate and endDate
  focusedInput={focusedInput}//similar to airbnb api-open\close
  showClearDates={true}
    monthFormat={monthFormat}//for persian:'jMMMM jYYYY', for english :'MMMM YYYY'
     />
  

Needless to say,this repositories support all other airbnb react-dates apis which are not mentioned here.

You can also this repository if your site is multilingual and you can change the locale and month format whenever you want.

I just imported moment and locale like this and it worked:

import moment from 'moment';
import 'moment/locale/pt-br';