No flexible parsing on entered values and no error/invalid event for DatePicker

[E]

Hi all,

I'm using the EJ2 datepicker.  It's great in many respects but seems to be missing some things you'd expect to be there by default.

It doesn't have flexible parsing on entered values and no error/invalid event.

I've tried using StrictMode but that is too strict.  The date has to be entered in exactly the same way rather than any parsing attempted.

For example, the picker is set to "dd MMMM yyyy" so the date displays as "17 September 2019".  

- If I enter "07 September 2019" that is accepted as a valid date since it matches the format.  

- If I enter "07/09/19" that is rejected despite it being parsable to a valid date.

If I disable StrictMode then the "07/09/19" is accepted even though it doesn't match the format.  Ideally the date picker would parse the value, determine it was a valid date and set the control to that value in the correct format.  

It doesn't do that, it flags the picker as an error.  That would be ok if it also fired an Error/Invalid event I could handle to deal with it myself.  I could then do my own parsing and update the control value.

It doesn't do that either.  The first time "07/09/19" is entered the change event is fired.  That would be ok if it fired the change event every time the value was changed, whether it was valid or not.

It doesn't do that.  Once the control is error state, changing the value to something else doesn't fire the change event again unless changing to a value that fits the display format.

I'm hoping I've just missed something in the documentation?

Thanks

[Narayanasamy Panneer Selvam]

Hi Ian, 

Greetings from Syncfusion support. 

We have validated your queries please find the details in below, 

Query 1: It doesn't do that, it flags the picker as an error. That would be ok if it also fired an Error/Invalid event I could handle to deal with it myself. I could then do my own parsing and update the control value. 

 

We have provided the blur event which will fires on when the component lost the focus. So, you can perform your own validation as per the application needs by using the input text value.  

API Link: https://ej2.syncfusion.com/documentation/api/datepicker/#blur  

 

Query 2 and Query 3: It doesn't do that either. The first time "07/09/19" is entered the change event is fired. That would be ok if it fired the change event every time the value was changed, whether it was valid or not. It doesn't do that. Once the control is error state, changing the value to something else doesn't fire the change event again unless changing to a value that fits the display format. 

 

Yes, Change event will be fired on component model value changes. If the invalid value entered in the DatePicker and error class has been added, then it will be considered as the null value. So, when you enter the valid value again then the model value of the DatePicker will change.  

So, we could not handle the this at the source level since it will affect the component’s model value. Because, we have maintained the value as date object in the DatePicker model. If you enter a valid or invalid value, focus out event will be fired. Through the event you can perform any validation. 

 

Regards,  

Narayanasamy P. 

[E]

Hi Narayanasamy,

Thanks for replying.

The blur and focusout events are only useful when the component loses focus which is not always the case.

For example, the user clicks into the textbox so they can type rather than use the dropdown.  They type their date and press Enter.  Focus remains on the textbox so no blur or focusout event is fired but the value is validated as the control gets error state.

Having the change event on the model rather than the control seems counter-productive.  I would've expected options to validate and resolve prior to that. 

If the user enters another invalid value when the control is already at error state, there's no event fired since the model is already null value from the previous error state so it's not considered a change.  As above, focusout is not fired if they don't leave the textbox.

If the control was more flexible on entered date formats separate from the display date format then it wouldn't as much of a problem, but it's too restrictive.  If I enter "07 Sep 2019" or "07/09/19" or "07/09/2019" or "07 Sept 19" I would expect all of those to be valid typed entries to a datepicker that displays "07 September 2019" and the control would accept and parse the entered value to set the date then display as per the display format.

I want the date to be displayed as "07 September 2019" but the user is not going to want to type that in full every time and they don't always want to use the dropdown either.

I've managed to get round this myself by handling the change event on the textbox itself instead of using the datepicker change event.  Doing that means I can validate properly and accept far more variations.  If the typed value is a valid date or can be parsed to one I set the textbox to the exact format the datepicker expects and remove the error state.

For example, the user can now type or "07 Sept 19", "07 Sep 2019" or "07/09/19" or "07/09/2019" or "070919" and in my handler I parse before updating the textbox to be exact format "07 September 2019".  

That's the sort of inputs I would expect the datepicker to deal with by default.

It's a shame that it doesn't but now I know this is expected behaviour I'll continue handling the events on the textbox directly to remain as flexible as possible.

Thanks

[Vinoth Kumar Sundara Moorthy]

Hi Ian, 

 

Good day to you. 

 

Query 1: Issue with focusOut 

 

We have validated the DatePicker input value by using input event and we have logged this as a feature already. This support will be included in any of our upcoming main releases. You can track the details of this feature from the below feedback link, 

 

Feedback Link: https://www.syncfusion.com/feedback/5759/all-controls-that-are-inputs-should-have-the-input-event 

 

Query 2: For example, the user can now type or "07 Sept 19", "07 Sep 2019" or "07/09/19" or "07/09/2019" or "070919" and in my handler I parse before updating the textbox to be exact format "07 September 2019". 

 

We have considered the this requirement as feature in the DatePicker and this support will be included in any of our upcoming main releases. You can track the details of this feature from the below feedback link, 

 

Feedback link: https://www.syncfusion.com/feedback/8987/need-to-provide-support-for-datepicker-to-accept-the-date-value-which-is-in-all-applicable-formats 

 

Also, we will implement the feature based on the priority and customer requested count. We appreciate your patience until then. 

 

Regards, 

Vinoth Kumar S 

[E]

Thanks very much Vinoth.

Good to know you're already looking at these as feature enhancements.  I'll continue with my own workaround till they are available.  Thanks.

[Ashokkumar Balasubramanian]

Hi Ian, 

 

Most Welcome. 

 

We will update you once the feature has been completed. 

 

Regards, 

Ashokkumar B. 

[Brandon M]

Is there any update in supporting features similar to this? 

My main issue is that I would like to get the invalid text entered into the textbox.

Currently, when entering invalid values with strictMode='false', the value is kept and the control is outlined in red. The issue is that the control, even though technically invalid, does not fail form validation:

   const isValid = this.formGroup.controls['datepicker'].valid;

as the value is considered null, and not the value that the text area contains.

[Berly Christopher]

Hi Brandon, 

  

By default, if you enter the value against the date format, then entered value will be considered as invalid value and it will not be updated to the value property. This is the intended behavior of the DatePicker component.  

  

If you want to prevent the user to enter the invalid value in the component means, we suggest you to provide the mask support by enabling the enableMask as true in the DatePicker component. Kindly refer the below demo and documentation. 

  

Demo: https://ej2.syncfusion.com/demos/#/material/datepicker/input-mask.html  

  

UG Link: https://ej2.syncfusion.com/documentation/datepicker/date-masking/  

  

Also, we will consider the feature and implement in the certain release based on the customer request count and priority. So, we will intimate you once the road map has been prepared.  You can track the status of the feature from the below feedback link.    

  

Feedback: https://www.syncfusion.com/feedback/8987/  

  

Regards, 

Berly B.C