CODEWITHSUNDEEP
reactjsmaterial-ui
Happy1234
Happy1234

Reputation: 729

DatePicker MUI how to display "Clear" text on the left side of the calendar

I have DesktopDatePicker from material-ui(version 5.0.0) and like to display "Clear" text on the left side of the calendar.

import * as React from "react";
import dayjs from "dayjs";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";

export default function ResponsiveDatePickers() {
  const [value, setValue] = React.useState(dayjs("2022-04-07"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DesktopDatePicker
        label="For desktop"
        value={value}
        minDate={dayjs("2017-01-01")}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        componentsProps={{
          actionBar: { actions: ["clear"], position: "left" }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

I added position:"left" in actionBar but this didn't work. enter image description here

Upvotes: 1

Views: 2152

Answers (1)

ckesplin
ckesplin

Reputation: 1793

Since it is justified by a flexbox, you will need to add justifyContent: "flex-start" to your action bar style properties.

eg:

componentsProps={{
   actionBar: { actions: ["clear"], style: {justifyContent: "flex-start"} }
}}

To further answer the question in the comment, since MUI components all give you access to styling I tried it and it worked - this is the MUIv4 way to access styling and it appears that it still works. The MUIv5 way to do it would likely be to access styling through the sx property that the components now have.

componentsProps={{
   actionBar: { actions: ["clear"], sx: {justifyContent: "flex-start"} }
}}

All MUI components give access to styling with the sx property.

Upvotes: 2

Related Questions