search

vlio20 / angular-datepicker

Highly configurable date picker built for Angular applications
https://wondrous-crostata-172891.netlify.app/
MIT License
493 stars 141 forks source link

Reset on blur #596

Open Mariacristina88 opened 2 years ago

Mariacristina88 commented 2 years ago

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 commented 2 years ago

Are you using the directive or any of the components?

Mariacristina88 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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. image

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 commented 2 years ago

"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 commented 2 years ago

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.