React-dates: Change calendar system to Jalali canendar

Created on 14 Apr 2017  路  10Comments  路  Source: airbnb/react-dates

I want to user react-dates as a Persian datepicker. Persians use another calendar system that called jalali calendar. We have a popular library called moment-jalaali that works perfectly as a moment plug-in.
Now my question is that: How we can use jalali calendar system with react-dates?
I try below code, but it's just change locale and strings not entire calendar system.

import React, { Component } from 'react';
import './App.css';
import moment from 'moment-jalaali';
import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class App extends Component {

  render() {
    moment.loadPersian(); // >>>>>>>>>> This change locale to Persian successfully but how to change calendar system?
    return (
      <div className="App">

        <SingleDatePicker
          date={moment()}
          onDateChange={date => console.log(date)} // PropTypes.func.isRequired
        focused={true}
          onFocusChange={({ focused }) => console.log(focused)} // PropTypes.func.isRequired
        />

      </div>
    );
  }
}

export default App;

This is output screen shot for above code you can see that calendar system is wrong:
jalali_1

Most helpful comment

renderMonth and renderDay fixes the locale problem but the issue with the calendar itself still stands.

calendar

First of the month in the calendar is marked 11, which is 11th of the respective month in Jalali while it should obviously be 1. Am I missing something?

All 10 comments

I think it's related to #259

I added "renderMonth" and a simple example as a start point ( #449 ) for adding Persian calendar. Some small problem still exist in completely support Persian calendar (like days order, ...). But I think we can do this by add some other PR.

Fixed in v10.2.0!

renderMonth and renderDay fixes the locale problem but the issue with the calendar itself still stands.

calendar

First of the month in the calendar is marked 11, which is 11th of the respective month in Jalali while it should obviously be 1. Am I missing something?

@mpourismaiel Have you found any solutions? Why this issue is closed? it sounds like the problem still exists.

@ImanMh They thought the issue was that there was no way to change the locale for month names which actually was another bug.

@ImanMh @mpourismaiel please file a new issue if there鈥檚 still a problem with the jalali calendar :-)

The problem is as the topic says. Calendar is set to Jalali but the display is not correct. Should I create a new task for that?

Yes, that'd be great.

Sounds grate, if this issue is fixed many more people will start replacing their code with this date picker. Please notify people at this thread if this issue is fixed.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aaronvanston picture aaronvanston  路  3Comments

thomasdtucker picture thomasdtucker  路  3Comments

augnustin picture augnustin  路  3Comments

AsasinCree picture AsasinCree  路  3Comments

krissalvador27 picture krissalvador27  路  3Comments