CODEWITHSUNDEEP
material-ui
Garik
Garik

Reputation: 151

How to show action buttons for DateRangePicker from material-ui-picker

I am using latest material-ui/pickers v4-alpha7.

Is is possible to show action buttons for the DateRangePicker. I know that they are shown by default for MobileDateRangePicker but can not find the solution for the regular DateRangePicker.

function BasicDateRangePicker() {
  const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);

  return (
    <DateRangePicker
      startText="Check-in"
      endText="Check-out"
      value={selectedDate}
      onChange={date => handleDateChange(date)}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <DateRangeDelimiter> to </DateRangeDelimiter>
          <TextField {...endProps} />
        </>
      )}
    />
  );
}

Br, Igor

Upvotes: 1

Views: 1937

Answers (1)

Dekel
Dekel

Reputation: 62666

From their current docs:

Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices. The default DateRangePicker component is responsive, which means that Mobile or Desktop mode will be rendered according to device viewport.

You can either use the DateRangePicker - which will be responsive, or decide that you prefer to force specific behaviour by using MobileDateRangePicker or DesktopDateRangePicker.

Source: https://mui.com/components/date-range-picker/#responsiveness

There is no prop that you can pass to the DateRangePicker to force using the mobile version in order to show the buttons (you can just use the MobileDateRangePicker if you need it to work this way).

Upvotes: 1

Related Questions