Setting TimePicker with mouse or keyboard ignores min/max

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Won't Fix

Last Updated: 10 May 2022 14:27 by Jeff

Jeff

Created on: 02 Apr 2022 18:01

Type: Bug Report

Setting TimePicker with mouse or keyboard ignores min/max

Set up a TimePicker with a `min` and `max`. For example

            min={new Date(0, 0, 0, 0, 0)}
            max={new Date(0, 0, 0, 5, 0)}

Click on the text input to focus the 'hours' portion.

Roll the mouse scrollwheel up/down to change the hours.

You can 'scroll' past 5:00 and set the time to anything above the max.

You can also use the keyboard to enter any number outside the min/max.

Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?

2 comments

Jeff

Posted on: 10 May 2022 14:27

When the user steps out of the min/max range the component enters an invalid state

I think I figured out why I wasn't seeing this behavior. The above statement is not true when used in a `<Form>`.

A form stays valid when the time picker is outside it's min and max.

I had expected it to behave like the min and max for a NumericTextBox, where you can't select a value past the min and max, and if you keyboard enter a number too big or small, then on blur is automatically changes the value to fit the range.

example: https://stackblitz.com/edit/react-7vdrvp?file=app/main.jsx

So it seems when used as a Form field, we always need to do our own validation for the min and max.

ADMIN

Filip

Posted on: 04 Apr 2022 13:55

Hello, Jeff,

I consulted with one of the developers on the team, it seems that this is indeed the expected behavior.

When the user steps out of the min/max range the component enters an invalid state, which is marked by the red border:

https://stackblitz.com/edit/react-gvwl6j?file=app/main.jsx

In case a full date is not set (for example, only the minutes are set), the value is null and the component does not perform any validation.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.