Reset on blur

[Mariacristina88]

Hi, I understand that the input doesn't allow invalid dates or times which don't match your configuration format so, when typing manually, you just can type anything and the date-picker will still ignoring your wrong input. The only thing that I wish to do is resetting the UI to the original valid value (on blur maybe) but at the moment this is not possible because while the UI shows a wrong not valid value, the input ngModel remains still the original valid date and for it there have not been any changes pushed.
How can we solve this UX problem? I just wish I could reset the wrong value to a valid one.
This is very easy to reproduce by the way as I've seen it in all implementation of ng2-date-picker.
Thanks!

[vlio20]

Are you using the directive or any of the components?

[Mariacristina88]

I'm using dp-date-picker with mode 'day' and also with mode 'time', separately. I'm using ngModel to input the initial valid value. When using the calendar or the time picker everything works but as soon the user types into the inputs then there is no way to set the initial value back on blur on close. The UI shows the just typed invalid value while the nested input keeps still the latest valid value.

[vlio20]

@Mariacristina88 , it sounds like you need an OnBlur event that you can apply your logic on. Am I right?
I am wondering if this should be a configuration option of the component (resetOnBlur) or just a expose onBlur hook. WDYT?

[Mariacristina88]

@vlio20 Yes the onBlur event would just work, the issue is that the date-picker component is blocking any invalid value to be passed to the input itself which means that when I want to reset the UI back to the valid value, it won't see any actual change as it was already valid. Resetting the ngModel to the initial value won't work as the input has already the initial value. The UI remains wrong.
My suggestion it to avoid blocking invalid values inside the component, I would rather let the invalid value in and emit an event to suggest that the value is not valid.

At the moment I'm trying to use the dp-day-calendar and dp-time-select separatelly so that I can manipulate the input as I want but it's more work than just use the date-picker with modes.

[vlio20]

"My suggestion is to avoid blocking invalid values inside the component, I would rather let the invalid value in and emit an event to suggest that the value is not valid."

I think that doing that will not be simple.

I would suggest the following:

1. add onBlue event
2. Provide an API to reset the input to the last valid value.

WDYT?

[Mariacristina88]

Hi, thank you for your reply.
I've tried to do your point number 2 but that would not work as the input is already set to the last valid value.
Anyhow my solution is to use day-calendar and time-select separately so that I can manipulate the input as I prefer.
It was more work but it's ok.
I think that it would be very nice if you could avoid to block invalid values but maybe I'm not seeing the entire picture.
Thanks again.