[Solved]-Airbnb react-dates calendar with non-English locale-Reactjs

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 component 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.