Material UI - Add "Today" button to <DatePicker />

user_3829174 0
Viewed 1638

I need to have a "Today" button as in the image bellow, positioned somewhere in the red marked area (or somewhere else). I'm using material-ui v5 and I also tried to add prop showTodayButton but seems to do nothing...

enter image description here

material-ui
2 Answers

This is the bug of Material UI v5. There's pending PR for this bug and it's not merged yet. Since v5 is still in RC stage, I think we should wait this PR to be merged.

showTodayButton prop works well on mobile date picker, but not on desktop date picker.

user_41573180

The bug mentioned by bhugo313 has been fixed by now but the documentation isn't very clear on how to add the "Today" button.

You need to provide an actionBar object via the componentsProp:

import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";

<DateTimePicker
    /* ... other props */
    componentsProps={{
       actionBar: { actions: ["clear", "today", "cancel", "accept"] },
    }}
/>
user_35142780
Related