DateTimePicker not respecting minDate for the TimeInput

[manuel-rw]

What package has an issue

@mantine/dates

Describe the bug

DateTimePicker does not respect minDate and maxDate for the TimeInput component. You can select a time outside the allowed range.

What version of @mantine/hooks page do you have in package.json?

6.0.8

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/twilight-darkness-pkdmwq?file=/src/App.tsx

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

• Add a new property for minTime and maxTime on the TimeInput
• Pass the minDate and maxDate from the DateTimePicker to the TimeInput

[rajeevdodda]

@rtivital I would like to work on this issue.

[rtivital]

@rajeevdodda You are welcome to submit a PR with a fix

[chewhx-dev]

The codesandbox link is not found (https://codesandbox.io/s/twilight-darkness-pkdmwq?file=/src/App.tsx)

@manuel-rw are you able to provide a new replication. I would like to look into this issue.

[chewhx]

What I understand about the problem from my own experience trying out the component.

Example:

 const minDateTime = new Date('2024-01-01T01:00:00.000Z');  
 const maxDateTime = new Date('2024-01-02T01:00:00.000Z'); 

    <DateTimePicker
        placeholder="Date time picker"
        clearable
        minDate={minDateTime} // This is 01 Jan 2024, 9:00 AM on my local time (GMT+8)
        maxDate={maxDateTime} // This is 02 Jan 2024, 9:00 AM on my local time (GMT+8)
      />

Expectations:

• The user able to select 01 Jan 2024 and not be able to input any time before 9:00 AM
• The user able to select 02 Jan 2024 and not be able to input any time after 9:00 AM

Actual behaviour:

• The user able to select 01 Jan 2024 ✅ and input time before 9:00AM ❌
• The user able to select 02 Jan 2024 ✅ and input time after 9:00AM ❌
• The user able to input any time range

---

The <TimeInput /> component uses the native html input tag with type="time".

As I understand from MDN docs:

• We are able to set min and max values for time inputs but it only triggers time validation when the user tries to submit the form
• It does not prevent the user from inputting time values outside of the min and max range
• We can only do so programmatically

---

Using <datalist> to provide suggestions

On Arc Browser:

function Demo() {
  const ref = React.useRef<HTMLInputElement>(null);

  const pickerControl = (
    <ActionIcon variant="subtle" color="gray" onClick={() => ref.current?.showPicker()}>
      <IconClock style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
    </ActionIcon>
  );

  return (
    <>
      <TimeInput
        list="time"
        label="Click icon to show browser picker"
        ref={ref}
        rightSection={pickerControl}
      />
      <datalist id="time">
        <option value="09:00">09:00</option>
        <option value="10:00">10:00</option>
        <option value="11:00">11:00</option>
        <option value="12:00">12:00</option>
      </datalist>
    </>
  );
}

Possible solution:

• Based on the date selected by the user, we can iterate a list of options for browser picker to present to user. There is however, a bypass for user to choose 'Other...' and return to default browser picker to choose other time.
• Based on the date selected by the user, validate input times by user which falls outside of the range

[snturk]

I'm currently developing a solution to that issue. Will push a PR soon.