طریقه وارد کردن ref به تقویم یا دیت پیکر به صورت زیر میباشد:

import React, { useRef } from "react"
import { Calendar } from "react-multi-date-picker"

export default function Example() {
  const calendarRef = useRef()

  return (
    <Calendar ref={calendarRef} />
  )
}

دو فانکشن openCalendar و closeCalendar به وسیله datepicker، و یک فانکشن refreshPosition هم به وسیله elementpopper به ref اضافه میشوند .

همچنین پراپرتی isOpen هم از طرف datepicker به ref اضافه میشود .

اگر بخواهید تقویم را به صورت دستی را باز و بسته کنید ، میتوانید مانند این مثال از فانکشن های openCalendar و closeCalendar استفاده کنید.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const datePickerRef = useRef()
.
.
.
<div>
  <button
    onClick={() => datePickerRef.current.openCalendar()}
  >
    باز کردن
  </button>
  <DatePicker 
    ref={datePickerRef} 
    calendar={persian}
    locale={persian_fa}
    calendarPosition="bottom-right"
  >
    <button
      style={{ margin: "5px" }}
      onClick={() => datePickerRef.current.closeCalendar()}
    >
      بستن
    </button>
  </DatePicker>
</div>

در مواقعی که ممکن است تقویم باز باشد و موقعیت input تغییر کند، به دلیل اینکه element popper به click گوش نمیدهد، موقعیت تقویم ثابت میماند.

در این مواقع میتوانید فانکشن refreshPosition که در ref دیتپیکر قرار دارد استفاده کنید.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const ref = useRef()
const ref2 = useRef()
const [visible, setVisible] = useState(false)
const [visible2, setVisible2] = useState(false)
const [shouldCloseCalendar, setShouldCloseCalendar] = useState(false)
const [shouldCloseCalendar2, setShouldCloseCalendar2] = useState(false)
.
.
.
<div>
  <h2>Example 1 (without using refresh position) :</h2>
  {visible && <span>یک متن نمایشی تا دیتپیکر را مجبور به حرکت کند!</span>}
  <DatePicker
    value={{}}
    placeholder="اول اینجا را کلیک کنید"
    ref={ref}
    onOpen={() => setShouldCloseCalendar(false)}
    onClose={() => shouldCloseCalendar}
    calendar={persian}
    locale={persian_fa}
    calendarPosition="bottom-right"
  />
  <button
    onClick={() => {
      if (!visible) {
        setVisible(true)
      } else {
        setVisible(false)
        setShouldCloseCalendar(true)
        setTimeout(() => {
          ref.current.closeCalendar()
        }, 20);
      }
    }}
  >
    {visible ? "رفرش و بستن تقویم" : "سپس اینجا را کلیک کنید"}
  </button>
  <h2>Example 2 (with using refresh position) :</h2>
  {visible2 && <span>یک متن نمایشی تا دیتپیکر را مجبور به حرکت کند!</span>}
  <DatePicker
    value={{}}
    placeholder="اول اینجا را کلیک کنید"
    ref={ref2}
    onOpen={() => setShouldCloseCalendar2(false)}
    onClose={() => shouldCloseCalendar2}
    calendar={persian}
    locale={persian_fa}
    calendarPosition="bottom-right"
  />
  <button
    onClick={() => {
      if (!visible2) {
        setVisible2(true)
        setTimeout(() => {
          ref2.current.refreshPosition()
        }, 20);
      } else {
        setVisible2(false)
        setShouldCloseCalendar2(true)
        setTimeout(() => {
          ref2.current.closeCalendar()
        }, 20);
      }
    }}
  >
    {visible2 ? "رفرش و بستن تقویم" : "سپس اینجا را کلیک کنید"}      
  </button>
</div>

Example 1 (without using refresh position) :

Example 2 (with using refresh position) :

روشی برای تغییر دستی ماه و سال در تقویم وجود دارد که در مثال زیر آورده شده است.

فقط توجه داشته باشید که این ویژگی فقط در تقویم کار می کند.

برای تنظیم دستی ماه و سال در دیتپیکر، روی این لینک کلیک کنید.

import React, { useRef, useState } from "react";
import { Calendar, 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 }));

  const calendarRef = useRef();

  function update(key, value) {
    let date = calendarRef.current.date;

    calendarRef.current.set(key, 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>
      <Calendar 
        ref={calendarRef}
        calendar={persian}
        locale={persian_fa}
      />
    </div>
  )
}