Skip to content

Instantly share code, notes, and snippets.

@MRezaSafari
Last active July 11, 2020 14:20
Show Gist options
  • Save MRezaSafari/40ec9e98cc0e2bbb645948318319d055 to your computer and use it in GitHub Desktop.
Save MRezaSafari/40ec9e98cc0e2bbb645948318319d055 to your computer and use it in GitHub Desktop.
antd jalali date picker
import React from 'react';
import ReactDOM from 'react-dom';
import {ConfigProvider} from 'antd';
import moment from 'moment-jalaali';
import fa from 'moment/locale/fa';
import App from './App';
moment.locale('fa', fa);
moment.loadPersian();
const MainApp = () => {
return (
<ConfigProvider direction="rtl">
<App/>
</ConfigProvider>
)
}
ReactDOM.render(
<MainApp/>, document.getElementById('root'));

--install these packages

yarn add moment-jalaali

import React from 'react';
import {DatePicker} from 'antd';
import moment from 'moment-jalaali';
export default function PersianDatePicker() {
var locale = {
"lang": {
locale: 'fa_IR',
today: 'امروز',
now: 'اکنون',
backToToday: 'بازگشت به امروز',
ok: 'باشه',
clear: 'پاک کردن',
month: 'ماه',
year: 'سال',
timeSelect: 'انتخاب زمان',
dateSelect: 'انتخاب تاریخ',
monthSelect: 'یک ماه را انتخاب کنید',
yearSelect: 'یک سال را انتخاب کنید',
decadeSelect: 'یک دهه را انتخاب کنید',
yearFormat: 'jYYYY',
dateFormat: 'jM/jD/jYYYY',
dayFormat: 'jD',
dateTimeFormat: 'jM/jD/jYYYY HH:mm:ss',
monthBeforeYear: true,
previousMonth: 'ماه قبل (PageUp)',
nextMonth: 'ماه بعد (PageDown)',
previousYear: 'سال قبل (Control + left)',
nextYear: 'سال بعد (Control + right)',
previousDecade: 'دهه قبل',
nextDecade: 'دهه بعد',
previousCentury: 'قرن قبل',
nextCentury: 'قرن بعد'
},
"timePickerLocale": {
"placeholder": "انتخاب زمان"
},
"dateFormat": "jYYYY-jMM-jDD",
"dateTimeFormat": "jYYYY-jMM-jDD HH:mm:ss",
"weekFormat": "jYYYY-wo",
"monthFormat": "jYYYY-MM"
}
return <DatePicker locale={locale} format={"jYYYY/jMM/jDD"} defaultValue={moment()}/>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment