چند راه برای وارد کردن زبان در این پکیج وجود داره.

1- استفاده از پراپ های months، weekDays و digits.

2- ایمپورت کردن لوکال آماده از پکیج date-object و وارد کردن آن با استفاده از پراپ locale.

3- ساخت یک آبجکت لوکال و وارد کردن آن به دیتپیکر.

به غیر از روش دوم که آبجکت لوکال، خارج ار کامپوننت ایمپورت میشه، برای روش های اول و سوم، تا اونجا که ممکنه آبجکت ها و آرایه های لوکال خودتون رو خارج از کامپوننت اصلی تعریف کنید تا در هنکام ری رندر شدن کامپوننت اصلی، از اجرا شدن افکت های داخلی دیت پیکر خود داری بشه.

در ادامه برای هر کدام از اینها مثال های جداگانه ای قرار داده شده است.

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

در این مثال، ارقام پیش فرض با اعداد تایلندی جایگزین شده اند.

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const digits = ["๐", "๑", "๒", "๓", "๔", "๕", "๖", "๗", "๘", "๙"]

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

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

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const weekDays = ["ش", "ی", "د", "س", "چ", "پ", "ج"]

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

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const weekDays = ["شن", "یک", "دو", "سه", "چه", "پن", "جم"]

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

همانند دو مثال بالا میتونید برای نمایش نام ماه ها هم مقادیر دلخواه خودتون رو جایگزین کنید:

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const months = ["فر","ار","خرد","تیر","مر","شه","مه","آبا","آذ","دی","بهم","اسف",]

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

به جای تایپ نام کوتاه ماه ها ، می توانید آنها را از DateObject استخراج کنید:

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const months = new DateObject({ calendar: persian, locale: persian_fa }).months.map(month => month.shortName)

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

برای دیدن نامهای سفارشی خودتان در input دیت پیکر ، مانند مثال زیر عمل کنید. (این روش فقط برای DatePicker قابل استفاده است).

* استایل ، formattingIgnoreList و فرمت اختیاری هستند.

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"

//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
const months = [
  ["فر", "ف"], //[["نام","نام کوتاه"], ... ]
  ["ارد", "ا"],
  ["خرد", "خ"],
  ["تیر", "ت"],
  ["مر", "م"],
  ["شه", "ش"],
  ["مهر", "م"],
  ["آبا", "آ"],
  ["آذر", "آ"],
  ["دی", "د"],
  ["بهم", "ب"],
  ["اسف", "ا"]
]
const weekDays = [
  ["شنبه", "ش"], //[["نام","نام کوتاه"], ... ]
  ["یکشنبه", "ی"],
  ["دوشنبه", "د"],
  ["سه شنبه", "س"],
  ["چهارشنبه", "چ"],
  ["پنجشنبه", "پ"],
  ["جمعه", "ج"]
]

export default function Example() {
  return (
    <DatePicker
      months={months}
      weekDays={weekDays}
      format="نام هفته: ddd (dddd), نام ماه: MMM (MMMM) از سال YYYY"
      containerStyle={{ width: "100%" }}
      style={{ 
        width: "100%", 
        height: "26px", 
        boxSizing: "border-box" 
      }}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

import DatePicker from "react-multi-date-picker"
import gregorian_ar from "react-date-object/locales/gregorian_ar"

export default function Example() {
  return (
    <DatePicker 
      locale={gregorian_ar}
    />
  )
}

اگر هیچ کدوم از روش های بالا جواب نداد میتونید خودتون یک فایل لوکال دستی بسازید.

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

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

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

در صورت تمایل اگر فایل لوکال رو برای زبان خاصی تغییر دادید و حس کردید میتونه به درد دیگران هم بخوره، میتونید فایلتون رو به همین مخزن pull request بدید تا دیگران هم بتونن ازش استفاده کنن.

برای مثال در اینجا من فایل لوکال انگلیسی تقویم میلادی رو از این آدرس برداشته، و تمام مقدار های آن را به حروف کوچک تغییر میدم:

const gregorian_en_lowercase = {
  name: "gregorian_en_lowercase",
  months: [
    ["january", "jan"],
    ["february", "feb"],
    ["march", "mar"],
    ["april", "apr"],
    ["may", "may"],
    ["june", "jun"],
    ["july", "jul"],
    ["august", "aug"],
    ["september", "sep"],
    ["october", "oct"],
    ["november", "nov"],
    ["december", "dec"],
  ],
  weekDays: [
    ["saturday", "sat"],
    ["sunday", "sun"],
    ["monday", "mon"],
    ["tuesday", "tue"],
    ["wednesday", "wed"],
    ["thursday", "thu"],
    ["friday", "fri"],
  ],
  digits: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
  meridiems: [
    ["AM", "am"],
    ["PM", "pm"],
  ],
};

export default gregorian_en_lowercase;

import DatePicker from "react-multi-date-picker"
import gregorian_en_lowercase from "./gregorian_en_lowercase"

export default function Example() {
  return (
    <DatePicker 
      locale={gregorian_en_lowercase} 
    />
  )
}