[英]How can I change icon in the KeyboardTimePicker (material-ui-pickers)?
[英]How to add suffix icon to material-ui-pickers input field
这是我的代码:
<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>
这就是我现在所拥有的:
我想得到这样的东西,在时间选择器的右端有箭头:
这是单击“签入”或“签出”后的表格:
1.使用TimePicker props TextFieldComponent自定义TextField
props(非组件)
2.使用TextField props InputProps自定义输入组件,带InputAdornment
和普通endAdornment
(后缀)
3.使用默认 styles 所必需的{...props}
传递默认道具。
4.注意我们可以在嵌套箭头 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.