Airbnb react-dates calendar with non-English locale

时间:2018-02-03 08:37:50

标签: javascript reactjs react-dates

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.

2 个答案:

答案 0 :(得分:3)

我在一个项目中一直在处理这个问题,这个问题目前是airbnb react-dates中的一个未解决的问题。 为了解决这个问题,我已经分解了原始项目,以便它适用于jalali时刻,并且从正确的一天开始的几个月,到github和npm存储库的链接是:

使用方法:

  • import momentJalali from 'moment-jalaali'

  • 在要使用datepicker的组件的构造函数中设置适当的语言环境:

    momentJalali.locale('fa')

  • 从分叉存储库导入datepicker:

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

    渲染部分中的
  • 以下列方式使用singdatepicker:

    <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
     />
    
  • 渲染部分中的
  • 以下列方式使用daterangepicker:

     <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'
       />
    

毋庸置疑,此存储库支持此处未提及的所有其他airbnb react-date apis。

如果您的网站使用多种语言,您也可以使用此存储库,您可以随时更改区域设置和月份格式。

答案 1 :(得分:0)

我只是这样导入了 moment locale ,并且有效:

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