[pickers] The calendar component displays an error in Korean.

[hngyfjy]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Package version: "@date-io/date-fns": "1.3.13", "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "date-fns": "2.29.3",

Code: import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers'; import DateFnsUtils from '@date-io/date-fns'; import koLocale from 'date-fns/locale/ko';

function App() { return ( <MuiPickersUtilsProvider utils={DateFnsUtils} locale={koLocale}> <KeyboardDatePicker variant="inline" inputVariant="outlined" label={'date'} fullWidth={'100%'} /> </MuiPickersUtilsProvider> ); }

export default App;

Current behavior 😯

Calendar pop-up page: 2022 화, 12월 15

Expected behavior 🤔

Correct format: Correction: 2022년 12월 15일 목요일 or 2022, 목, 12월 15일

Context 🔦

The company's website is incorrectly displayed in Korean and can easily mislead consumers. please help me thank you~

[flaviendelangle]

Hi,

The picker you are using is very outdated, @material-ui/pickers was not maintained by the MUI teams and has been deprecated since January 2020.

If you reproduce the problem on the new versions, we will of course fix it :+1:

[hngyfjy]

Excuse me, is the latest version of the mui translation accurate? "@mui/material": "^5.11.0", "date-fns": "2.29.3", "dayjs": "^1.11.7"

[flaviendelangle]

The version I'm interested in here is the @mui/x-date-pickers version (or @mui/lab / @material-ui/pickers is you are using outdated versions).

Your @mui/material version seems very recent yes.

[LukasTy]

@hngyfjy Could you provide a codesandbox with your minimal setup and specify what do you think is wrong? Here is an example codesandbox. Do you think that the toolbar format is incorrect with this adapter for the expected format (shortdate, i.e.: Dec 20)? Don't forget that you can specify the format you need for the toolbar specifically as suggested by the commented line in the linked codesandbox.

[hngyfjy]

"@mui/x-date-pickers": "^5.0.10",

[hngyfjy]

import * as React from 'react'; import dayjs, { Dayjs } from 'dayjs'; import 'dayjs/locale/ko'; import TextField from '@mui/material/TextField'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

const isWeekend = (date) => { const day = date.day();

return day === 0 || day === 6; };

function App() { const [value, setValue] = React.useState(dayjs('2022-12-20'));

return ( <div style={{width: '500px'}}> <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'ko'}> <StaticDatePicker orientation="landscape" openTo="day" value={value} shouldDisableDate={isWeekend} onChange={(newValue) => { setValue(newValue); }} renderInput={(params) => <TextField {...params} />} />

[alexfauquette]

That problem comes from the adapter.

For the toolbar, we use the normalDate format which for dayJs is defined as follows

normalDate: "D MMMM",

https://github.com/dmtrKovalenko/date-io/blob/8deea4ab5eee24530515114bb4699a44563cbc77/packages/dayjs/src/dayjs-utils.ts#L30

You can use toolbarFormat prop to correct this behavior

Here is an example https://codesandbox.io/s/cool-drake-t15fi4?file=/demo.tsx