DatePicker input resets with no error if incorrect format is entered, and ValueChange does not get triggered

[Daniel Shunfenthal]

If the first value entered is in an incorrect format, the datepicker gets a red outline.

However, if it has a valid value entered, and someone enters an incorrectly formatted date the value resets to the last date entered with no error. We would like to be able to have it show "Invalid date entered" or something similar.

I tried extending the component, but I'm having trouble finding the event to overwrite that gets triggered to reset the value to the previously entered date. It gets triggered before onfocusout.

[Sevvandhi Nagulan]

Hi Daniel, 

We are currently validating the reported issue and we will update further details on or before of 10^th August,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Sevvandhi Nagulan]

Hi Daniel,  

Thanks for your patience. 

We would like to inform you that DatePicker will be allowed you to enter the value which is matched with provided date format. If you type the value which is against the date format, then that value is considered as invalid value and error class will be added to the component. Also, when the date changed to previous date when enabling the strict mode, the change event will not be triggered. This is the default behaviour of the component.   

We can restrict this behaviour once mask support has been provided for DatePicker component. This support will be included in any one of our upcoming releases. 

To make it count, please cast your vote. We will prioritize the features based on the demands of each release. If you have more specifications / suggestions on the request for the feature, you can add it to the portal as a comment.    

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     

  

  

Feedback Link: https://www.syncfusion.com/feedback/16575/ 

   

Regards,  

Sevvandhi N 

[Daniel Shunfenthal]

Hi Sevvandhi,

Is there a workaround that we could use in the meantime?

If a date is already entered and saved, and lets say they later realize the date was incorrect, and they go to change it but enter it in the wrong format, it would get reset to the first date without them realizing.

Is there any way we can extend the current control so that it would alert the user that they entered a date in the wrong format?

Thanks,
Daniel

[Sevvandhi Nagulan]

Hi Daniel,  

  

  

We validated the reported requirement. We checked whether the entered date is valid or not using TryParseExact method by getting the date from the input event. We displayed the invalid error messages based on the validation. The validation message will appear and disappear when typing the date value on the input element. Kindly refer the below code and sample.  

  

  

<SfDatePicker @ref="datePickerObj" TValue="DateTime?" @bind-Value="@_exampleModel.DateValue" StrictMode="true" @oninput="onInput">  

                </SfDatePicker>  

  

    @if(isValidDate ){  

        <div id="ValidationMessage">Entered date is invalid</div>  

     }  

  

   public void onInput(Microsoft.AspNetCore.Components.ChangeEventArgs e)  

    {  

        DateTime fromDateValue;   

        var formats = "M/d/yyyy";   

        if (DateTime.TryParseExact(e.Value.ToString(), formats, System.Globalization.CultureInfo.InvariantCulture, System.Globalization.DateTimeStyles.None, out fromDateValue))  

        {  

            isValidDate = false;  

        }  

        else  

  

        {  

            isValidDate = true;  

        }  

    }  

  

You can also know whether date is valid or not using the Boolean variable(isValidDate). Please refer the below sample.  

  

Please find the sample below.  

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-1752012328 

  

Please check the above sample and get back to us if you need further assistance.  

  

Regards,  

Sevvandhi N  

[Jacky]

Hi  Sevvandhi ,

if use the SfDateRangePicker, what is the best practice for the Issure ?

Regards!

Jacky

[Yohapuja Selvakumaran]

Hi Jacky,

You can achieve the desired behavior in the DateRangePicker by validating the selected range using the StartDate and EndDate properties. We have prepared a sample for your reference, which demonstrates how to show a custom error message when the entered date range is invalid.

Here’s a simplified version of the approach:

 

 

<SfDateRangePicker @ref="dateRangePicker" Placeholder="Select date range"

TValue="DateTime?"><DateRangePickerEvents TValue="DateTime?" Blur="OnBlur"/>

</SfDateRangePicker>

 

@if (showError)

{

    <div style="color: red;">Invalid date entered</div>

}

 

@code {

    private SfDateRangePicker<DateTime?> dateRangePicker;

    private bool showError = false;

 

    private void OnBlur(Syncfusion.Blazor.Calendars.BlurEventArgs args)

    {

        if (dateRangePicker.StartDate != null && dateRangePicker.EndDate != null)

        {

            //var inputValue = dateRangePicker.Value.ToString();

 

            if (!IsValidDateRange(dateRangePicker.StartDate.ToString()) && !IsValidDateRange(dateRangePicker.EndDate.ToString()))

            {

                showError = false;

                // Optional: Clear or keep the previous value as needed

                StateHasChanged();

            }

            else

            {

                showError = true;

            }

        }

        else

        {

            showError = true;

        }

    }

 

    private bool IsValidDateRange(string input)

    {

        if (string.IsNullOrWhiteSpace(input)) return false;

 

        // Validate format: e.g., "MM/dd/yyyy - MM/dd/yyyy"

        var parts = input.Split(" - ");

        if (parts.Length != 2)

            return false;

 

        return DateTime.TryParse(parts[0], out _) &&

               DateTime.TryParse(parts[1], out _);

    }

}

 

 

This logic uses the Blur event to validate whether both StartDate and EndDate have been selected. If either is missing or improperly entered, an error message is shown.

You can find the working sample here:

Sample: https://blazorplayground.syncfusion.com/LDBoNzMMKcpqLtQJ

You can refer to the below demo for more reference about validation in DateRangePicker,

Demo: https://blazor.syncfusion.com/demos/daterangepicker/forms-validation?theme=fluent2

Regards,

Yohapuja S