Material UI: TextField Alarm Clock change to Another Icon

user_14383678 0
Viewed 618

I have TextField. In that the Material UI has Alarm Clock icon.

The material UI docs have like this:

<form className={classes.container} noValidate>
  <TextField
    id="time"
    label="Alarm clock"
    type="time"
    defaultValue="07:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
    inputProps={{
      step: 300, // 5 min
    }}
  />
</form>

What I have designed is like this:

<TextField
  id="time"
  type="time"
  style={{
    width: "148px",
    marginLeft: 4,
    marginRight: 6,
    padding: "2px 0px 3px 6px",
  }}
  defaultValue="03:30"
  value={timeChange}
  onChange={handleTimeChange}
  className={classes.textField}
  color="secondary"
  InputProps={{
    disableUnderline: true,
    endAdornment: <ExpandMoreIcon style={{ color: "gray" }} />,
    classes: {
      input: classes.floatingLabelFocusStyle,
    },
    // className: classes.input,
  }}
/>;

And added some CSS to it:

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

Which I'm getting:

enter image description here

Is there a way, that I can make ExpandMoreIcon behave like the alarm clock on click and open the pop up to show time picker?

I don't want to show the alarm clock icon. I just want the functionality of alarm clock in ExpandMoreIcon icon?

Is there any fix to it?.

Thank you.

reactjs css html javascript
2 Answers
  const [displayPicker, setDisplayPicker] = React.useState(false);      

<TextField
        id="time"
        type="time"
        style={{
          width: '148px',
          marginLeft: 4,
          marginRight: 6,
          padding: '2px 0px 3px 6px',
        }}
        defaultValue="03:30"
        value={timeChange}
        onChange={handleTimeChange}
        focused={displayPicker}
        className={classes.textField}
        color="secondary"
        InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: 'gray' }} />,
          onFocus: () => setDisplayPicker(true),
          onBlur: () => setDisplayPicker(false),
          classes: {
            input: classes.floatingLabelFocusStyle,
          },
        }}
      />
user_123809440

I believe you can add onClick to the endAdornment under InputProps to adjust the functionality.

Try like this..

InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: "gray" }} onClick={FunctionToOpenTimePicker}/>,
        }}

OR TRY

    InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: "gray" }}/>, onClick: () => FunctionToOpenTimePicker
        }}

I know also that we have used onFocus/onBlur in some of our code with the adornments.

    InputProps={{
      endAdornment: <ExpandMoreIcon style={{ color: "gray" }}/>,
      onFocus: () => {if (!thing1) setThing2State(true)}, 
      onBlue: () => {if (!thing1) setThing2State(false)}
    }}

For hiding the clock icon, that may require CSS like in the examples shown here

Remove the arrow and cross that appears for TextField type=“time” material-ui React

user_123809440
Related