Skip to content

Commit

Permalink
fix(datepicker): prevent selecting disabled dates and hide excluded d…
Browse files Browse the repository at this point in the history
…ates (#1631)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

1. Date picker allows user to select disabled dates using keyboard
navigations.
2. Previous & next month dates are visible to the user in current month.

Issue Number: CDE-2478

## What is the new behavior?

1. User will not be able to select disabled dates. 
2. Previous & next month dates wont be visible to the user in current
month.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information
  • Loading branch information
venkateshr06 authored Dec 4, 2024
1 parent 6107962 commit 4fb22f7
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -163,11 +163,7 @@
}

&.is-excluded {
color: tokens.$cds-alias-object-interaction-color-disabled;

&:hover {
background: none;
}
display: none;
}

&.is-selected {
Expand Down
3 changes: 3 additions & 0 deletions projects/angular/src/forms/datepicker/day.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ export class ClrDay {
* Updates the selectedDay when the ClrDay is selected and closes the datepicker popover.
*/
selectDay(): void {
if (this.dayView.isDisabled) {
return;
}
const day: DayModel = this.dayView.dayModel;
this._dateNavigationService.notifySelectedDayChanged(day);
this.dateFormControlService.markAsDirty();
Expand Down

0 comments on commit 4fb22f7

Please sign in to comment.