There are several ways to enter a locale to the DatePicker.

1- Using months, weekDays, and digits props.

2- Importing the locale from the date-object package and entering it into the locale prop.

3- Creating a local object and pass it into the locale prop.

Except for the second way where the locale object is imported outside the main component, for the first and third ways, as far as possible, define your locale object or arrays outside the main component to avoid running internal date picker effects when the main component is rerendered.

You can use the digits Prop to replace your favorite digits with the default numbers.

In this example, the default digits are replaced with Thai numbers.

import DatePicker from "react-multi-date-picker"

//It is better to put this array outside the main component.
const digits = ["๐", "๑", "๒", "๓", "๔", "๕", "๖", "๗", "๘", "๙"]

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

The following 4 examples are used in case you want the names of months or weekdays to be displayed only in the calendar.

import DatePicker from "react-multi-date-picker"

//It is better to put this array outside the main component.
const weekDays = ["S", "M", "T", "W", "T", "F", "S"]

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

import DatePicker from "react-multi-date-picker"

//It is better to put this array outside the main component.
const weekDays = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"]

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

Like the two examples above, you can enter your own values to display as the names of the months:

import DatePicker from "react-multi-date-picker"

//It is better to put this array outside the main component.
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

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

Instead of typing short names of months, you can extract them from the DateObject:

import DatePicker, { DateObject } from "react-multi-date-picker"

//It is better to put this array outside the main component.
const months = new DateObject().months.map(month => month.shortName)

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

Follow the example below to see the custom names in Datepicker input. (this option is only available for DatePicker).

*format, formattingIgnoreList, and style are optional.

import DatePicker from "react-multi-date-picker"

//It is better to put this array outside the main component.
const months = [
  ["jan", "j"], //[["name","shortName"], ... ]
  ["feb", "f"],
  ["mar", "m"],
  ["apr", "a"],
  ["may", "m"],
  ["jun", "j"],
  ["jul", "j"],
  ["aug", "a"],
  ["sep", "s"],
  ["oct", "o"],
  ["nov", "n"],
  ["dec", "d"],
]
const weekDays = [
  ["sun", "s"], //[["name","shortName"], ... ]
  ["mon", "m"],
  ["tue", "t"],
  ["wed", "w"],
  ["thu", "t"],
  ["fri", "f"],
  ["sat", "s"],
]

export default function Example() {
  return (
    <DatePicker
      months={months}
      weekDays={weekDays}
      format="week day name: ddd (dddd), month name: MMM (MMMM) of YYYY"
      formattingIgnoreList={["week", "day", "name", "month", "of"]}
      containerStyle={{ width: "100%" }}
      style={{ 
        width: "100%", 
        height: "26px", 
        boxSizing: "border-box" 
      }}
    />
  )
}

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}
    />
  )
}

If none of the above examples works, you can create your own custom locale.

The best way to create a custom locale is to opening the locale folder in the date-object repository, download the English locale for the calendar you want, and then modify it as you wish.

All properties in the locale object are required, and deleting any of them will cause the calendar to malfunction. so if you don't want to modify a property, instead of deleting it, leave it as it is.

The convention for naming a local object is: 'name of the calendar_name of the locale' (e.g gregorian_en for Gregorian calendar and English locale), and also the value of the name property in the locale object must be the same as the name of the locale file.

In case you modify the locale file for a specific language, you can send a pull request to the date-object repository so that others can use it.

For example, I copied the gregorian_en file from here, and change all its values ​​to lowercase.

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} 
    />
  )
}