mui-xmui-x-date-picker

how to custom datepicker actions lable?


<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='zh-cn'>
        <DatePicker
            value={value ? dayjs(value) : null}
            ref={ref}
            {...other}
            onChange={value => {
                setOpen(!open)
                onChange(value.format('YYYY-MM-DD'))
            }}
            slotProps={{
                textField: {
                    InputProps: {
                        endAdornment: <InputAdornment position='end'>
                            {value && <IconButton onClick={() => onChange(null)}><CloseIcon/></IconButton>}
                            <IconButton onClick={() => setOpen(!open)}><CalendarMonthIcon/></IconButton>
                        </InputAdornment>
                    }
                },
                actionBar:{
                    actions:['clear']
                }
            }}
            open={open}
        />
    </LocalizationProvider>

hi,you can see i add actions for actionBar,the actions is array not object, so the clear action always display "clear" for me. but i am Chinese,so i want display "清除" only for label,how to do it


Solution

  • import {zhCN} from '@mui/material/locale';
    import {zhCN as pickerZhCN} from '@mui/x-date-pickers/locales'
    
    const theme = createTheme({},zhCN,pickerZhCN)
    <ThemeProvider theme={theme}>
     <App/>
    </ThemeProvider>
    

    i find the doc