import { useState } from "react"
import { Calendar } 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 [value, setValue] = useState(new Date())

  return (
    <Calendar
      value={value}
      onChange={setValue}
      calendar={persian}
      locale={fa}
    >
      <button
        style={{ margin: "5px" }}
        onClick={() => setValue(undefined)}
      >
        لغو انتخاب
      </button>
      <button
        style={{ margin: "5px" }}
        onClick={() => setValue(new Date())}
      >
        امروز
      </button>
    </Calendar>
  )
}

import DatePicker 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() {
  return (
    <DatePicker
      calendar={persian}
      locale={fa}
      calendarPosition="bottom-right"
    >
      <button
        style={{ margin: "5px 0" }}
        onClick={() => alert("کلیک شد")}
      >
        کلیک کنید
      </button>
    </DatePicker>
  )
}