farhoudshapouran / react-native-ui-datepicker

Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales.
https://farhoudshapouran.github.io/react-native-ui-datepicker/
MIT License
271 stars 28 forks source link

Issue with Locale Language Change in Calendar Component: Month Names Remain in English. #85

Open Guerrita opened 1 month ago

Guerrita commented 1 month ago

When attempting to change the locale language for the calendar component in my React Native project, I encountered an issue where the month names remain in English irrespective of the selected language. This problem persists even on the library website, where the language doesn't change as expected. It would also be beneficial to provide an option to display the months as numbers in addition to their names when changing the locale language.

image

Code: <DateTimePicker locale="es" mode="range" // Set mode to "range" for range calendar startDate={startDate} endDate={endDate} onChange={handleDateChange} minDate={new Date('2015-01-01')} // Set minimum selectable date maxDate={new Date()} // Set maximum selectable date (today) firstDayOfWeek={0} // Start week on Sunday displayFullDays={false} // Show previous and next month's days in the current calendar view initialView="day" // Initial view to display (day, month, year, time) height={undefined} // Height of the calendar view weekDaysContainerStyle={{ display: "none" }} />

image

jurcun commented 1 month ago

I had the same issue so I made some researches and I found in the ReadMe of dayjs these lines :

I18n

Day.js has great support for internationalization.

But none of them will be included in your build unless you use it.

import 'dayjs/locale/es' // load on demand

dayjs.locale('es') // use Spanish locale globally

dayjs('2018-05-05').locale('zh-cn').format() // use Chinese Simplified locale in a specific instance

📚Internationalization

So, to use others languages, you have to import the locales inside your project. You can find an example in react-native-ui-datepicker/example/src/App.tsx from line 16 to 20 with these imports : import 'dayjs/locale/en'; import 'dayjs/locale/de'; import 'dayjs/locale/es'; import 'dayjs/locale/fr'; import 'dayjs/locale/tr';