how to custom datepicker actions lable?

September 6, 2023

<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 :

jsx
import { LocalizationProvider, DatePicker, AdapterDayjs } from 'your-dependencies';

// ...

<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:[{
                    label: '清除',
                    value: 'clear'
                }]
            }
        }}
        open={open}
    />
</LocalizationProvider>