Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Remove minutes value that is not divisible by 15 in Material Ui TimePicker component

I want to remove minutes value that is not divisible by 15 in Material Ui TimePicker component.

I am trying this approach but this is not working

const shouldDisableTime = (timeValue) => {
    const minutes = timeValue?.$m;
    return minutes !== 0 && minutes !== 15 && minutes !== 30 && minutes !== 45;
};

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <TimePicker
    value={time}
    onChange={(newValue) => setTime(newValue)}
    minutesStep={15}
    shouldDisableTime={shouldDisableTime}
    renderInput={(params) => <TextField {...params} />}
    />
</LocalizationProvider>

enter image description here

Tags:

2

Answers


  1. 0

    Instead of disabling time with shouldDisableTime() function you can use minutesStep={15} prop and for hiding not necessary minutes you can use skipDisabled boolean property with setting value to true.

    Full <TimePicker /> component API can be found here.

    See example screenshot bellow.

    enter image description here

    Login or Signup to reply.
  2. 0

    Yes, it’s possible. You need to pass the timeSteps prop to

    <TimePicker
  {...props}
  timeSteps={{ minutes: 15}}
/>

    If you have to change hours and minues then use it like that way

    timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search