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

Question

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

Answer 1

2023 Update

As mentioned by @Chaitanya, the componentsProps prop is deprecated (for v5), you should use slotProps instead.

Original answer

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

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

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

Answer 2

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.