score:3

Accepted answer

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:

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.

score:0

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

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

Related Query

More Query from same tag