DateTimePicker Min / Max validation after loosing control as a standard scenario.

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 17 Nov 2021 13:11 by ADMIN

Aleksei

Created on: 11 Nov 2021 06:46

Category: UI for Blazor

Type: Bug Report

DateTimePicker Min / Max validation after loosing control as a standard scenario.

We have two questions about DateTimePicker logic related to Min and Max values:

1) Validation of handwritten value after loosing focus.

When there are restrictions for min / max values of component, user can't picks invalid date with dropdown and validation works perfectly. However when user enters value as a string, telerik component lets him do that without any alerts. After loosing focus component sets date that match to chosen interval. The problem arrives when user clicks "Save button" after handwritten invalid date and Telerik corrects it by itself with valid but not always correct date from user side. Is it normal situation or there might be a solution to prevent possibility of entering of invalid date before loosing control?

2) Result date after handwritten input that out of accessible range.

After input of out of range date Telerik compute valid date and set it in component. May be situation when user entered correct value for the first time and then tried to change it to invalid, then he would lose his first entered date. Maybe should save last valid date for the next attempts of inputs or leave component logic in current condition?

There is example of situation:

1. TelerikDateTimePicker.Max = 11/1/2021 6:12 PM;

2. User picks date 11/1/2021 6:07 PM;

3. User decides to set 11/1/2021 6:35 PM and writes it in text field;

4. Telerik corrects its date to 11/1/2021 6:03 PM because it's valid, but previous user date was lost.

1 comment

ADMIN

Hristian Stefanov

Posted on: 17 Nov 2021 13:11

Hi Aleksei,

Generally speaking, the idea of the Min and Max parameters is to block the UI portion of the component, so the user cannot click to select dates before the Min and after the Max in the dropdown. These parameters are not providing validation on the input in the straightforward meaning.

That being said, the user can manually type invalid dates, but the ValueChanged and OnChanged events cannot be triggered with invalid input. Upon invalid input, the UI remains invalid until you lose focus. Once the focus is lost, the input will show a random valid date starting with the same digit of the changed month/day/year. I have used the following example to test the behavior of the component with a basic configuration in terms of typing invalid dates. I also added event handlers for better readability. I was not able to find any unexpected behavior, so you can also test by yourself the expected behavior of the events in this scenario.

@valueChangeResult
<br />
@OnchangeResult
<br />
model value: @viewModel.Registered
<br />

<TelerikDatePicker Max="@DateTime.Now"
                   Value="@viewModel.Registered"
                   ValueExpression="() => viewModel.Registered"
                   ValueChanged="@((DateTime? e) => MyValueChangeHandler(e))"
                   OnChange="@((object e) => MyOnChangeHandler(e))" />

@code {
    string valueChangeResult;
    string OnchangeResult;
    ViewModel viewModel = new ViewModel();

    protected override void OnInitialized()
    {
        viewModel.Registered = DateTime.Now;
    }

    private void MyValueChangeHandler(DateTime? theUserInput)
    {
        viewModel.Registered = theUserInput;
        valueChangeResult = string.Format("The user entered (ValueChange) : {0:dd/MMM/yyyy}", theUserInput);
    }

    private void MyOnChangeHandler(object theUserInput)
    {
        OnchangeResult = string.Format("The user entered (OnChange) : {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value);
    }

    public class ViewModel
    {
        public DateTime? Registered { get; set; }
    }
}

However, you can indicate the invalid state of the date when the user types the input by using DataAnnotation attributes and adding the DatePicker inside a Form (either the TelerikForm or the standard EditForm) - you can check the Input Validation article for more details.

Following the above statements, I'm marking this bug report as "Declined".

I hope this helps. If you run across any other concerns, please let us know, so we can step in and assist.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.