import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  currentDate={
    new DateObject({
      calendar: persian,  
      year: 1399,
      month: 12,
      day: 1
    })
  }
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian:
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  const [date, setDate] = useState(
    new DateObject({ calendar: persian, locale: persian_fa }),
  );

  function update(key, value) {
    date[key] += value;

    setDate(new DateObject(date));
  }

  const style = {
    display: "inline-block",
    width: "90px",
    fontSize: "16px",
  };

  return (
    <div style={{ textAlign: "center" }}>
      <div>
        <button onClick={() => update("month", 1)}>+</button>
        <span style={style}>{date.month.name}</span>
        <button onClick={() => update("month", -1)}>-</button>
      </div>
      <div>
        <button onClick={() => update("year", 1)}>+</button>
        <span style={style}>{date.year}</span>
        <button onClick={() => update("year", -1)}>-</button>
      </div>
      <DatePicker 
        currentDate={date}
        calendarPosition="bottom-center"
        calendar={persian}
        locale={persian_fa}
      />
    </div>
  )
}  

برای تغییر دادن روز شروع هفته میتوانید از پراپرتی weekStartDayIndex استفاده کنید.

برای نمونه اگر میخواهید روز شروع هفته یکشنبه باشد، میبایست مقدار weekStartDayIndex را برابر با ۱ قرار دهید.

مقدار weekStartDayIndex حتما باید عددی بین ۰ تا ۶ باشد.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  weekStartDayIndex={1} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  showOtherDays 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  monthYearSeparator="|" 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  highlightToday={false}
  onOpenPickNewDate={false}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  displayWeekNumbers
  weekNumber="ش.ه" 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

استفاده از این پراپ، مقدار fixMainPosition را در هنگام scroll کردن true میکند.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  scrollSensitive={false} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar 
  fullYear 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  hideOnScroll 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePickers
  format="Date:YYYY/MM/DD, Time:HH:mm:ss"
  formattingIgnoreList={["Date", "Time"]}
  plugins={[
    <TimePicker position="bottom" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  inputMode="none"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

این ویژگی فقط بر input در حالت منفرد تأثیر می گذارد.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  editable={false}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  placeholder="click to open"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  disableYearPicker 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  disableMonthPicker 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  hideYear 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  hideMonth 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  hideWeekDays 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  value={new Date()} 
  readOnly
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

پراپ های readOnly و disabled هر دو باعث میشوند که کاربر دیگر نتواند تاریخ جدیدی را انتخاب کند، با این تفاوت که در حالت readOnly، هدر تقویم همچنان فعال میماند ولی در حالت disabled هدر calendar نیز غیر فعال میشود.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar
  value={[
    new DateObject({ calendar: persian }).toFirstOfWeek(),
    new DateObject({ calendar: persian }).toLastOfWeek(),
  ]}
  range
  readOnly
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar 
  value={new DateObject()} 
  disabled 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  disabled 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>