mantine
mantine copied to clipboard
DateTimePicker not respecting minDate for the TimeInput
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
@rtivital I would like to work on this issue.
@rajeevdodda You are welcome to submit a PR with a fix
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.
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
andmax
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
I'm currently developing a solution to that issue. Will push a PR soon.