How to add suffix icon to material-ui-pickers input field

Question

This is my code:

<Box p={6}>
  <Grid container spacing={2}>
    <Grid item xs={6}>
      <TimePicker autoOk label={t('checkIn')} value={time1} onChange={handlecheckIn} clearable />
    </Grid>
    <Grid item xs={6}>
      <TimePicker autoOk label={t('checkOut')} value={time2} onChange={handleCheckOut} clearable />
    </Grid>

This is what i have now:

And i would like to get something like this, with arrow at the right end of time picker:

And this is form after clicking Check In or Check Out:

Answer 1

1.Use the TimePicker props TextFieldComponent to customize the TextField props (not component)

• refer: material-ui-pickers document of TimePicker props API

2.Use TextField props InputProps to customize the input component with InputAdornment and normal endAdornment (suffix)

• refer: material-ui document of TextField props API

3.Pass default props with {...props} which is necessary for the default styles.

4.Notice we can pass the open status as a params in the nested arrow function.

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import { TimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { TextField, InputAdornment } from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

const CustomizedTextField = open => props => {
  return (
    <TextField
      id="standard-basic"
      label="Standard"
      {...props}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            {open ? <ExpandMore /> : <ExpandLess />}
          </InputAdornment>
        )
      }}
    />
  );
};

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());
  const [open, setOpen] = React.useState(false);
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <TimePicker
        value={selectedDate}
        onChange={handleDateChange}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        TextFieldComponent={CustomizedTextField(open)}
      />
    </MuiPickersUtilsProvider>
  );
}

export default App;