diff --git a/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx b/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx index 5e626ae6897..8856c506994 100644 --- a/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx +++ b/src/mantine-dates/src/components/DateTimePicker/DateTimePicker.tsx @@ -248,6 +248,8 @@ export const DateTimePicker = factory((_props, ref) => { onKeyDown={handleTimeInputKeyDown} size={size} data-mantine-stop-propagation={__stopPropagation || undefined} + minTime={formatTime(calendarProps.minDate)} + maxTime={formatTime(calendarProps.maxDate)} /> diff --git a/src/mantine-dates/src/components/TimeInput/TimeInput.tsx b/src/mantine-dates/src/components/TimeInput/TimeInput.tsx index b25a2d0788a..3f3f0204fd8 100644 --- a/src/mantine-dates/src/components/TimeInput/TimeInput.tsx +++ b/src/mantine-dates/src/components/TimeInput/TimeInput.tsx @@ -10,11 +10,18 @@ import { __InputStylesNames, ElementProps, } from '@mantine/core'; +import { getValidTime } from './get-time-value/get-time-value'; 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 */ + minTime?: string; + + /** Maximum possible time */ + maxTime?: string; } export type TimeInputFactory = Factory<{ @@ -27,7 +34,8 @@ const defaultProps: Partial = {}; export const TimeInput = factory((_props, ref) => { const props = useProps('TimeInput', defaultProps, _props); - const { classNames, styles, unstyled, vars, withSeconds, ...others } = props; + const { classNames, styles, unstyled, vars, withSeconds, minTime, maxTime, value, ...others } = + props; const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({ classNames, @@ -37,7 +45,10 @@ export const TimeInput = factory((_props, ref) => { return ( ((_props, ref) => { step={withSeconds ? 1 : 60} type="time" __staticSelector="TimeInput" + value={getValidTime(minTime, maxTime, value === undefined ? undefined : value.toString())} /> ); }); diff --git a/src/mantine-dates/src/components/TimeInput/get-time-value/get-time-value.ts b/src/mantine-dates/src/components/TimeInput/get-time-value/get-time-value.ts new file mode 100644 index 00000000000..1ccf79536bf --- /dev/null +++ b/src/mantine-dates/src/components/TimeInput/get-time-value/get-time-value.ts @@ -0,0 +1,19 @@ +import dayjs from 'dayjs'; + +export function getValidTime( + minTime: string | undefined, + maxTime: string | undefined, + time: string | undefined +): string | number | undefined { + const minimumTime = dayjs(`2000-01-01 ${minTime}`); + const maximumTime = dayjs(`2000-01-01 ${maxTime}`); + const currentTime = dayjs(`2000-01-01 ${time}`); + + if (maxTime && currentTime > maximumTime) { + return maxTime; + } + if (minTime && currentTime < minimumTime) { + return minTime; + } + return time; +}