Calendar systems
The date picker supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:
- Gregorian - it is included by default
- Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
- Hijri - it is included in the Arabic language pack
Interested in localization? Explore this example →
Demo
JSXTSX
import { Datepicker, hijriCalendar, jalaliCalendar, localeAr, localeFa, setOptions } from '@mobiscroll/react';
setOptions({
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker controls={['date']} display="inline" />
<Datepicker controls={['date']} display="inline" calendarSystem={jalaliCalendar} locale={localeFa} />
<Datepicker controls={['date']} display="inline" calendarSystem={hijriCalendar} locale={localeAr} />
</div>
);
}
export default App;
import { Datepicker, hijriCalendar, jalaliCalendar, localeAr, localeFa, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker controls={['date']} display="inline" />
<Datepicker controls={['date']} display="inline" calendarSystem={jalaliCalendar} locale={localeFa} />
<Datepicker controls={['date']} display="inline" calendarSystem={hijriCalendar} locale={localeAr} />
</div>
);
export default App;