TextField component with type=date creates unwanted calendar icon

user_12911697 0
Viewed 2853

The <TextField> component provided by material-ui for some reason generates a small icon at the end of the input depending on the type of the TextField.

If type="date" then I get this icon at the end of the input:

enter image description here

If type="time" then I get a clock icon. What is confusing is that these icons doesn't show on all of the systems I am testing on. For example, the vm I am using do not display these icons, same goes for my ios device. But when I try it out locally these icons shows up.

I have read the documentation for TextFields but I can't find any api references for these icons. First I thought that it was some kind of endAdornment, but trying to override the icon with an endAdornment only causes the component to generate additional icons/strings.

This is my <TextField> component:

<TextField
    onChange={this.OnChange.bind(this)}
    name="date"
    value={this.state.date}
    label={GetText(Text.Date)} 
    variant="filled"
    type="date"
    InputProps={{
        disableUnderline: true,
        style: {
            backgroundColor: "#FFFFFF",
            borderRadius: "4px",
            border: "1px solid #CED4DC",
            fontSize: ".81em",
        }
    }}
    InputLabelProps={{
        shrink: true
    }}
/>

If anyone knows a way to remove these icons, I am all ears.

react-typescript material-ui
2 Answers

...after having removed every class from the element without success I realised the icon was related to html and so I discovered that the icon is just a re-skin of the standard "down-arrow" provided in a date input type.

Using this css removes the icon:

input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;}

but of course that also removes the "drop-down" of dates.

Sometimes it is not easy being dumb...

user_129116970

For people using material-ui

for the root of the css class of the input

classes={{root: classes.InputRoot}}

styles

InputRoot: {
'&::-webkit-calendar-picker-indicator': {
      display: 'none',
      '-webkit-appearance': 'none'
    }
}
user_48078890
Related