I recently integrated the react-multi-date-picker into my project, utilizing the multiple mode feature. However, I encountered an issue when trying to display the Italian calendar based on the language setting. Despite using locale="it", the calendar was not displaying correctly. After doing some research, I found a solution that involved creating a separate JavaScript file containing Italian months, weekdays, and meridiems. I also referenced the react-date-object library, which provides various locale files. I followed the instructions, created the necessary Italian locale file, and passed it to the DatePicker component. Unfortunately, the output was incorrect as the dates were being set incorrectly.
Below is a snippet of my App.js file showcasing how I implemented the DatePicker:
import DatePicker from "react-multi-date-picker";
import DatePanel from "react-multi-date-picker/plugins/date_panel";
import italian_it from './italianCalendar';
function App() {
return (
<div className="App">
<header className="App-header">
<DatePicker
locale={italian_it}
multiple
format="DD/MM/YYYY"
plugins={[<DatePanel />]}
/>
</header>
</div>
);
}
export default App;
The content of my italianCalendar file is as follows:
module.exports = { name: "italian_it", months: [ ["gennaio", "gennaio"], ["febbraio", "febbraio"], ["marzo", "marzo"], ["aprile", "aprile"], ["maggio", "maggio"], ["giugno", "giugno"], ["luglio", "luglio"], ["agosto", "agosto"], ["settembre", "settembre"], ["ottobre", "ottobre"], ["novembre", "novembre"], ["dicembre", "dicembre"], ], weekDays: [ ["domenica", "dom"], ["lunedì", "lun"], ["martedì", "mar"], ["mercoledì", "mer"], ["giovedì", "gio"], ["venerdì", "ven"], ["sabato", "sab"]], digits: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], meridiems: [ ["am", "am"], ["pm", "pm"], ], }; The displayed output does not match the expected result. Here is a screenshot for reference:
https://i.stack.imgur.com/0ydij.png
If you would like to review the code, it is available on CodeSandbox at the following link: