I'm rendering <TextField> twice using my defined DatePicker.js component. So, whenever the user clicks on the <CalendarIcon> which is inside the <TextField>, small calendar will open up. I want to style the label in the <TextField> in a specific way.
Currently, this is how it looks.
You can see that 'To' label of the second <TextField> is visible. It should come behind the calendar and should not show up.
class DatePickerInput extends React.Component {
render() {
const {
classes,
label,
selectedDate
} = this.props;
return (<TextField
fullWidth
variant="filled"
label={label}
onClick={this.props.onClick}
value={selectedDate.format("MM-DD-YYYY")}
InputLabelProps={{
shrink: true
}}
InputProps={{
className: classes.input,
endAdornment: (<CalendarIcon color="primary" />)
}}
/>)
}
}
class DatePicker extends React.Component {
render() {
const {
label,
value,
minDate,
maxDate,
onChange
} = this.props;
return (
<ReactDatePicker
selected={value.toDate()}
minDate={minDate.toDate()}
maxDate={maxDate.toDate()}
customInput={<DatePickerInputComp
selectedDate={value}
label={label}
/>}
onChange={onChange} />
)
}
}
The problem:
How do I make the 'To' label not show up when the <CalendarIcon> pops up. I want to style the prop 'label' of TextField but I'm not sure of how I can do it.
The Updated Code:
const inputStyles = theme => ({
icon: {
zIndex: 1029,
},
});
class DatePicker extends React.Component {
render() {
const {
label,
value,
minDate,
maxDate,
onChange,
} = this.props;
const { classes } = this.props;
return (
<ReactDatePicker
selected={value.toDate()}
minDate={minDate.toDate()}
maxDate={maxDate.toDate()}
customInput={<DatePickerInputComp
selectedDate={value}
label={label}
/>}
wrapperClassName={classes.icon}
onChange={onChange} />
)
}
}