DateRangePicker, validating manual user input (AllowEdit="true")

Hello,

I have a DateRangePicker set up in my Blazor app where I am trying to improve how the user can input data in the text entry box.

Based on my testing, the text entry box in the DateRangePicker will fire not the ValueChange event and return the dates or string that is entered if the date is not perfectly formatted.

If the user types in the dates perfectly as “d/m/yyyy - d/m/yyyy” complete with slashes, four-digit years, spaces, and a hyphen, then the ValueChange event fires. Otherwise, it appears that the text entered is discarded. This is a very poor user experience, as any slight deviation from the format invalidates the entire entry.

My specific questions are:

  1. Is there some event that fires which returns the date(s) entered in the textbox within the DateRangePicker regardless of what is entered? That way I can do my own validation on the entry and accept other formats. I realize we can modify the format that is required, I would like a chance to catch what the user enters and see if I can programatically format it rather then just clearing the box (Strict Mode="true")
  2. Is there a way to add additional valid date formats to the textbox that will fire the ValueChange event, such as also allowing two digit years or no spaces around the hyphen, other separators, etc.?


Thank you,


1 Reply

BC Berly Christopher Syncfusion Team October 1, 2021 02:53 PM UTC

Hi William Meredith, 
  
Greetings from Syncfusion support. 
  
We would like to inform you that DateRangePicker 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. After that ValueChange will not be triggered since model value will be maintained as null. The ValueChange event will be triggered after entering the valid value again in the component. This is the default behaviour of the component.  
  
Also, we can restrict this behaviour once mask support has been provided for DateRangePicker component. This support will be included in any one of our upcoming releases. Please find the feedback link from below. 
  
  
Regards, 
Berly B.C 


Loader.
Up arrow icon