Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Invalid Input Handling in ngx-bootstrap Datepicker when using Min and Max date #6640

Open
kartikchawla22 opened this issue Feb 22, 2024 · 0 comments

Comments

@kartikchawla22
Copy link

Bug description:

When utilizing the ngx-bootstrap Datepicker component and setting minimum and maximum date constraints, an issue arises where the input field incorrectly resets to the respective boundary dates if the user enters a date outside of the allowable range. Despite the reset, the ng-invalid class remains applied to the input, indicating its invalid state. Consequently, users are required to re-enter a valid date and reselect the selected date.

This behavior stems from a failure to detect changes after a new value has been inputted into the datepicker, leading to inconsistent validation and usability issues.

To Reproduce:

  1. Set min and max dates for the ngx-bootstrap Datepicker.
  2. Enter a date outside of the specified range.
  3. Observe the input field resetting to the respective min/max dates while retaining the ng-invalid class.

Versions of ngx-bootstrap, Angular:

ngx-bootstrap: 12.0.0

Angular: 17.1.4

Expected Behavior:

Entering a date beyond the specified range should prompt a validation error without resetting the input field.
The input field should accurately reflect its validity state based on the entered date and the specified constraints.
Users should be able to adjust the date to a valid value without the need for additional steps such as reselecting min/max dates.

Additional Context:
This issue significantly impacts user experience, particularly when working with date-sensitive applications or forms where accurate date input and validation are crucial. Resolving this bug would enhance the reliability and usability of the ngx-bootstrap Datepicker component.

Here is a screen recording of this bug:
https://github.com/valor-software/ngx-bootstrap/assets/28129578/1767ca65-4787-47d0-8100-068c415cd5cf

Note
This bug can be reproduced on https://valor-software.com/ngx-bootstrap/#/components/datepicker?tab=overview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant