1. Utilize the TimePicker props TextFieldComponent to customize the TextField props (not component)
- For reference: material-ui-pickers document of TimePicker props API
2. Customize the input component using TextField props InputProps with InputAdornment and normal endAdornment (suffix)
3. Pass default props with {...props} which is essential for maintaining default styles.
4. Take note that passing the open status as a parameter in the nested arrow function is possible.
import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // select your library
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;
https://codesandbox.io/s/falling-smoke-wyyg2?fontsize=14&hidenavigation=1&theme=dark
https://i.sstatic.net/JPAqj.gif