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 found at p-datepicker #17613

Open
1 of 4 tasks
VicTMPDeV opened this issue Feb 7, 2025 · 1 comment · May be fixed by #17632
Open
1 of 4 tasks

bug found at p-datepicker #17613

VicTMPDeV opened this issue Feb 7, 2025 · 1 comment · May be fixed by #17632
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@VicTMPDeV
Copy link

VicTMPDeV commented Feb 7, 2025

Describe the bug

Good morning everyone.

I think I have found a bug in the p-datepicker component:

I am working with an inline calendar with selectionMode="range" but applying different colors to the CSS classes .p-datepicker-day-selected and .p-datepicker-day-selected-range.

To reproduce the issue, you need to select a fairly wide range where the start and end day repeat numerically in intermediate months. Then, the following happens:

For example, if I select the date range from January 1st to March 28th, the bug is that the only days that should have the .p-datepicker-day-selected class applied are January 1st and March 28th, while the rest should have the .p-datepicker-day-selected-range class. However, this is not the case.

What actually happens (and I am almost certain it is a bug because it also occurs in the PrimeNG documentation example for datepicker range, but it is not noticeable unless you inspect it with devtools since the same color is applied) is that the days February 1st, March 1st, January 28th, and February 28th also get the .p-datepicker-day-selected class instead of .p-datepicker-day-selected-range, which should be the correct class.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-yjtcmdcv-jfzul4im?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Environment

Angular 19.0.5
Primeng 19.0.5

Angular version

Angular 19.0.5

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

Image

Image

Image

Expected behavior

Only apply the correct css class to the initial-final day of the range. For that it should be controlled the day-month-year combination, not only the day

@VicTMPDeV VicTMPDeV added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 7, 2025
@Joebeurg
Copy link

Same issue here.
Angular 18.2.11
PrimeNG 18.0.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants