Ant-Design Jalali DatePicker

A wrapper for ant-design date picker and calendar to support Jalali calendar type with Day.js and jalaliday

Demo

https://saeedrahimi.github.io/antd-jalali/

Top Features

• Support Ant Design Version 4 and 5
• Support React 16/17/18
• Fix All RTL Issues

Installation

Ant version 5.x.x

npm i antd-jalali@v2.x.x

Ant version 4.x.x

npm i antd-jalali@v1.4.x

Usage

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, ConfigProvider } from "antd";
import { DatePicker as DatePickerJalali, Calendar, JalaliLocaleListener } from "antd-jalali";
import fa_IR from "antd/lib/locale/fa_IR";
import en_US from "antd/lib/locale/en_US";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div>
    Gregorian: 
    <br>
    <br>
    
      
      Jalali: 
      Jalali RangePicker: 
      <br>
      <br>
      
    
  </div>,
  document.getElementById("root")
);

How to set value

You should pass dayjs object with jalali calendar

import dayjs from 'dayjs'
import { DatePicker as DatePickerJalali, Calendar as CalendarJalali, useJalaliLocaleListener } from "antd-jalali";

// You should call this hook in child component of 
// You can also use component helper for this hook 
useJalaliLocaleListener();

// If you want to all new instanses of dayjs use jalali calendar (no matter what is the locale),
// you can set default calendar for dayjs and remove useJalaliLocaleListener hook.
dayjs.calendar('jalali');

const date = dayjs("1403-01-01", {jalali:true});

also you can create a jalali date without changing default calendar

const date = dayjs();
const jalaliDate = date.calendar("jalali");

You can read more information about daysjs jalali on jalaliday repo.

Contributors