CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Zubair Amjad
Zubair Amjad

Reputation: 761

Material UI Date Picker reads Event.target.value as undefined

I am trying to have the user specified minutes and seconds added onto the date picker component. For instance a user would be able to type out 2:30 within the input box without any issues.

The issue I am having is that it says event.target.value is undefined when clearly there is a value there. I assume it has to do with my function that is converting seconds into minutes.

  function handleMinuteSelectionChange(event) {
    const minuteSelection = event.target.value;

    if (isNaN(minuteSelection)) {
      window.alert("Please select a number");
    } else {
      const minuteSelectionS = parseInt(minuteSelection);
      if (minuteSelectionS > 59 || minuteSelectionS < 0) {
        window.alert("Please choose a minutes value between 0 and 59");
      } else {
        console.log(`Minute selection changed: ${minuteSelectionS}`);
        setTempTargetTimeS(minuteSelectionS * 60);
      }
    }
  }

My component

          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <TimePicker
              ampmInClock
              views={["minutes", "seconds"]}
              inputFormat="mm:ss"
              mask="__:__"
              label="Minutes and seconds"
              value={tempTargetTimeS / 60}
              onChange={handleMinuteSelectionChange}
              renderInput={(params) => (
                <TextField
                  {...params}
                  className={recorderClasses.targetTimeSelection}
                />
              )}
            />
          </LocalizationProvider>

Upvotes: 0

Views: 1858

Answers (1)

Alon Barenboim
Alon Barenboim

Reputation: 438

According to MUI's documentation, the new value is not passed inside an event object, but you just get the value. So you can get it like so:

  function handleMinuteSelectionChange(value) {
    const minuteSelection = value;

    if (isNaN(minuteSelection)) {
      window.alert("Please select a number");
    } else {
      const minuteSelectionS = parseInt(minuteSelection);
      if (minuteSelectionS > 59 || minuteSelectionS < 0) {
        window.alert("Please choose a minutes value between 0 and 59");
      } else {
        console.log(`Minute selection changed: ${minuteSelectionS}`);
        setTempTargetTimeS(minuteSelectionS * 60);
      }
    }
  }

MUI Time Picker Documentation

Upvotes: 1

Related Questions