[@mantine/dates] Fixed : DateTimePicker not respecting minDate for the TimeInput #4890
Conversation
|
It does not fix the issue in DateTimePicker, min and max time must be set based on minDate and maxDate |
|
@rtivital can you review my latest changes |
| @@ -35,17 +40,38 @@ export const TimeInput = factory<TimeInputFactory>((_props, ref) => { | |||
| props, | |||
| }); | |||
|
|
|||
| const validTime = () => { | |||
There was a problem hiding this comment.
This function must be outside of component body, put it in the separate file
There was a problem hiding this comment.
Created new file for this function
| @@ -35,17 +40,38 @@ export const TimeInput = factory<TimeInputFactory>((_props, ref) => { | |||
| props, | |||
| }); | |||
|
|
|||
| const validTime = () => { | |||
| const minTime = dayjs(`2000-01-01 ${props.minTime}`); | |||
There was a problem hiding this comment.
Do note reference props.minTime, props must be destructured on line 35.
| import classes from './TimeInput.module.css'; | ||
|
|
||
| export interface TimeInputProps extends InputBaseProps, ElementProps<'input', 'size'> { | ||
| /** Determines whether seconds input should be rendered */ | ||
| withSeconds?: boolean; | ||
| /** Minimum possible time */ |
There was a problem hiding this comment.
There must be a new line between previous prop and new prop description, see other components for reference.
There was a problem hiding this comment.
New lines inserted between props
| @@ -10,11 +10,16 @@ import { | |||
| __InputStylesNames, | |||
| ElementProps, | |||
| } from '@mantine/core'; | |||
| import dayjs from 'dayjs'; | |||
There was a problem hiding this comment.
dayjs import must be before React import
| const minTime = dayjs(`2000-01-01 ${props.minTime}`); | ||
| const maxTime = dayjs(`2000-01-01 ${props.maxTime}`); | ||
| const value = dayjs(`2000-01-01 ${props.value}`); | ||
| let _value; |
There was a problem hiding this comment.
Do not use let, return value if the condition matched instead.
| type="time" | ||
| __staticSelector="TimeInput" | ||
| /> | ||
| <> |
|
It does not work, it is impossible to change TimeInput value in DateTimePicker Story: export function WithTimeMinMaxDate() {
return (
<div style={{ padding: 40, maxWidth: 400 }}>
<DateTimePicker
placeholder="Date time picker"
defaultValue={new Date(2022, 3, 11)}
clearable
minDate={new Date(2022, 3, 10, 10, 50)}
maxDate={new Date(2022, 3, 12, 10, 50)}
/>
</div>
);
}2023-10-01.15.10.00.mov |
Fixes this issue #4596