این پکیج به صورت پیشفرض از تقویم میلادی و زبان انگلیسی استفاده میکنه، در نتیجه اگر میخواید از تقویم و زبان پیشفرض استفاده کنید احتیاج به ایمپورت کردن زبان و تقویم خاصی رو ندارید، ولی برای استفاده از تقویم ها و زبان های دیگر باید هرکدام از اونها رو به صورت جداگانه ایمپورت کنید.

تقویم ها و زبان ها داخل پکیج react-date-object نگهداری میشن که همزمان با این پکیج نصب میشه.

در دو جدول زیر به ترتیب تمام تقویم ها و زبان هایی که میشه ازشون استفاده کرد به همراه ادرس آنها آورده شده و در ادامه مثال هایی از نحوه ایمپورت کردن هر کدام از آنها اورده شده است.

import favorite_calendar from "react-date-object/calendars/favorite_calendar"

قاعده ایمپورت کردن زبان ها هم مثل تقویم ها میمونه، با این تفاوت که به جای استفاده از پوشه calendars از پوشه locales استفاده میکنید.

یه دلیل اینکه هر کدام از تقویم ها دارای فایل های زبان جداگانه خودشون هستند، نحوه نامگذاری فایل های موجود در پوشه locales به صورت 'نام تقویم_نام زبان' انتخاب شده.

برای مثال اگر میخواید از تقویم میلادی با زبان فارسی استفاده کنید لازمه که فایل gregorian_fa و همینطور اگر میخواید از تقویم شمسی و زبان فارسی استفاده کنید باید فایل persian_fa رو ایمپورت کنید.

در زیر چند مثال از ایمپورت کردن تقویم و زبان های مختلف آورده شده است.

<Calendar /> 

<DatePicker /> 

import React 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() {
  return (
    <Calendar
      calendar={persian}
      locale={persian_fa}
    />
  )
}

این پکیج به صورت پیشفرض از تقویم میلادی و زبان انگلیسی استفاده میکنه و direction پیشفرضش هم چپ به راست در نظر گرفته شده. به همین دلیل در صفحاتی که direction آن راست به چپ هست، باید مقدار calendarPosition را برابر با bottom-right قرار بدید.

فرمت پیشفرض نمایش تاریخ در input به صورت YYYY/MM/DD تعریف شده. در صورت نیاز و در صفحات راست به چپ، میتونید مقدار format رو به DD/MM/YYYY تفییر بدید.

import React from "react"
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 (
    <div style={{ direction: "rtl" }}>
      <DatePicker
        calendar={persian}
        locale={persian_fa}
        calendarPosition="bottom-right"
      />
    </div>
  )
}

import React from "react"
import { Calendar } from "react-multi-date-picker"
import arabic from "react-date-object/calendars/arabic"
import arabic_ar from "react-date-object/locales/arabic_ar"

export default function Example() {
  return (
    <Calendar
      calendar={arabic}
      locale={arabic_ar}
    />
  )
}

import React from "react"
import { Calendar } from "react-multi-date-picker"
import indian from "react-date-object/calendars/indian"
import indian_hi from "react-date-object/locales/indian_hi"

export default function Example() {
  return (
    <Calendar
      calendar={indian}
      locale={indian_hi}
    />
  )
}

import React from "react"
import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_en from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      calendar={persian}
      locale={persian_en}
      calendarPosition="bottom-right"
    />
  )
}

با به کار بردن روشی که در ادامه توضیح میدم میتونید اکثر تقویم های 12 ماهه رو برای دیت پیکر خودتون شخصی سازی کنید.

متاسفانه تقویم های 13 ماهه (مثل تقویم چینی یا عبری که در سال کبیسه دارای 13 ماه هستن) در حال حاضر پشتیبانی نمیشن.

در ادامه نحوه ایجاد تقویم thai رو برای دیت پیکر توضیح میدم.

دلیل انتخاب تقویم thai شباهت زیادش به تقویم میلادی هست. در حقیقت تقویم تای، 543 سال از تقویم میلادی جلوتره.

برای ساخت یک تقویم ابتدا به پوشه calendars موجود در مخرن date-object برید و فایل gregorian.js رو دانلود کرده و در یک فایل با نام دلخواه خودتون ذخیره کنید .

در هنگام نام گذاری فایل سعی کنید که نام فایل با نام تقویم مورد علاقه شما و همچنین با پراپرتی name موجود در آبجکت تقویم یکی باشه. همچنین به این نکته توجه داشته باشید که تمامی پراپرتی های موجود در آبجکت تقویم اجباریه و حذف کردن هر کدوم از پراپرتی ها باعث بروز خطا در عملکرد تقویم میشه. پس اگر نمیخواید پراپرتی ای رو تغییر بدید، حذفش نکنید و بزارید مقدارش همون مقدار پیشفرض قبلی باشه.

برای مثال من فایل gregorian.js را دانلود کرده و به اسم thai.js ذخیره کردم:

const thai = {
  name: "thai",
  startYear: 1,
  yearLength: 365,
  epoch: 1721424,
  century: 20,
  weekStartDayIndex: 1,
  getMonthLengths(isLeap) {
    return [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  },
  isLeap(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  },
  getLeaps(currentYear) {
    if (currentYear === 0) return;

    let year = currentYear > 0 ? 1 : -1;

    let leaps = [],
      condition = () =>
        currentYear > 0 ? year <= currentYear : currentYear <= year,
      increase = () => (currentYear > 0 ? year++ : year--);

    while (condition()) {
      if (this.isLeap(year)) leaps.push(year);

      increase();
    }

    return leaps;
  },
  getDayOfYear({ year, month, day }) {
    let monthLengths = this.getMonthLengths(this.isLeap(year));

    for (let i = 0; i < month.index; i++) {
      day += monthLengths[i];
    }

    return day;
  },
  getAllDays(date) {
    const { year } = date;

    return (
      this.yearLength * (year - 1) +
      this.leapsLength(year) +
      this.getDayOfYear(date)
    );
  },
  leapsLength(year) {
    return (
      (((year - 1) / 4) | 0) +
      (-((year - 1) / 100) | 0) +
      (((year - 1) / 400) | 0)
    );
  },
  guessYear(days, currentYear) {
    let year = ~~(days / 365.24);

    return year + (currentYear > 0 ? 1 : -1);
  },
};

export default thai;

const julianDay = new DateObject().toJulianDay();

console.log(julianDay); // 2459407 (Monday, July 12 2021)

const days = new DateObject().add(543, "years").toDays();

console.log(days); // 936310 (Monday, July 12 2564)

// delta_t = t - t0
const epoch = julianDay - days

console.log(epoch) // 1523097

const thai = {
  name: "thai",
  startYear: 1,
  yearLength: 365,
  epoch: 1523097,
  century: 25,
  weekStartDayIndex: 1,
  getMonthLengths(isLeap) {
    return [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  },
  isLeap(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  },
  getLeaps(currentYear) {
    if (currentYear === 0) return;

    let year = currentYear > 0 ? 1 : -1;

    let leaps = [],
      condition = () =>
        currentYear > 0 ? year <= currentYear : currentYear <= year,
      increase = () => (currentYear > 0 ? year++ : year--);

    while (condition()) {
      if (this.isLeap(year)) leaps.push(year);

      increase();
    }

    return leaps;
  },
  getDayOfYear({ year, month, day }) {
    let monthLengths = this.getMonthLengths(this.isLeap(year));

    for (let i = 0; i < month.index; i++) {
      day += monthLengths[i];
    }

    return day;
  },
  getAllDays(date) {
    const { year } = date;

    return (
      this.yearLength * (year - 1) +
      this.leapsLength(year) +
      this.getDayOfYear(date)
    );
  },
  leapsLength(year) {
    return (
      (((year - 1) / 4) | 0) +
      (-((year - 1) / 100) | 0) +
      (((year - 1) / 400) | 0)
    );
  },
  guessYear(days, currentYear) {
    let year = ~~(days / 365.24);

    return year + (currentYear > 0 ? 1 : -1);
  },
};

export default thai;

import { Calendar } from "react-multi-date-picker"
import thai from "./thai"

export default function Example() {
  return <Calendar calendar={thai} />
}

const thai_th = {
  name: "thai_th",
  months: [
    ["มกราคม", "ม.ค."],
    ["กุมภาพันธ์", "ก.พ."],
    ["มีนาคม", "มี.ค."],
    ["เมษายน", "เม.ย.	"],
    ["พฤษภาคม", "พ.ค."],
    ["มิถุนายน", "มิ.ย."],
    ["กรกฎาคม", "ก.ค."],
    ["สิงหาคม", "ส.ค."],
    ["กันยายน", "ก.ย."],
    ["ตุลาคม", "ต.ค."],
    ["พฤศจิกายน", "พ.ย."],
    ["ธันวาคม", "ธ.ค."],
  ],
  weekDays: [
    ["วันเสาร์", "ส"],
    ["วันอาทิตย์", "อา"],
    ["วันจันทร์", "จ"],
    ["วันอังคาร", "อ"],
    ["วันพุธ", "พ"],
    ["วันพฤหัส", "พฤ"],
    ["วันศุกร์", "ศ"],
  ],
  digits: ["๐", "๑", "๒", "๓", "๔", "๕", "๖", "๗", "๘", "๙"],
  meridiems: [
    ["ก่อนเที่ยง", "เอเอ็ม"],
    ["หลังเที่ยง", "พีเอ็ม"],
  ],
};

export default thai_th

import { Calendar } from "react-multi-date-picker"
import thai from "./thai"
import thai_th from "./thai_th"

export default function Example() {
  return (
    <Calendar 
      calendar={thai} 
      locale={thai_th} 
    />
  )
}