Current Selected Day Value In DatePicker Not Indicated In Month View

by ADMIN 69 views

Introduction

PrimeNG's DatePicker component is a powerful tool for handling date-related tasks in Angular applications. However, a bug has been reported in the Month view of the DatePicker, where the current selected day value is not indicated. This issue has been present since at least version 17 and is still observed in the latest stable release, v19.0.9.

Describe the Bug

When a day-level DatePicker has a current value (i.e., a date was previously chosen), the Month of that value is not selected in Month View. This means that the user cannot easily identify the selected month, which can lead to confusion and errors.

Steps to Reproduce

To reproduce this issue, follow these steps:

  1. Use PrimeNG's DatePicker example page or this stackblitz: https://stackblitz.com/edit/dja9fsvk-xuzfselq?file=src%2Fapp%2Fdatepicker-basic-demo.html,src%2Fapp%2Fdatepicker-basic-demo.ts,package.json
  2. In the Basic example, choose a date.
  3. Re-open the date picker and click on the month in the heading.
  4. Note that, in the monthly view, the month of your value selected in step 2 is not indicated.
  5. Click the year in the heading.
  6. Note that, in the yearly view, the year of your value in step 2 is indicated properly.

Curious Behavior

Interestingly, the Month Picker example does properly indicate the month, so it's view specific. This suggests that the issue is related to the specific implementation of the Month view in the DatePicker component.

Pull Request Link

Unfortunately, there is no response to the pull request.

Reason for Not Contributing a PR

The reason for not contributing a pull request is:

  • Unsure how to implement the fix/feature: The contributor is unsure about how to implement the fix or feature, which is a common challenge when working with complex codebases.

Other Reason

This issue has definitely been a bug since at least v17, but it is still present in the latest stable release, v19.0.9.

Reproducer

The reproducer is available at: https://stackblitz.com/edit/dja9fsvk-xuzfselq?file=src%2Fapp%2Fdatepicker-basic-demo.html,src%2Fapp%2Fdatepicker-basic-demo.ts,package.json

Environment

The environment used to reproduce this issue is:

  • Angular version: 19.1.7
  • PrimeNG version: v19
  • Node version: 22.13.5
  • Browser(s): Tested on Firefox 136 & Brave 1.76.74

Expected Behavior

The expected behavior is that the month of the selected value should have a consistent style when in the month view.

Conclusion

In conclusion, the current selected day value in the DatePicker is not indicated in the Month view, which can lead to confusion and errors. This issue has been present since at least version 17 and is still observed in the latest stable release, v19.0.9. The reproducer is available at: https://stackblitz.com/edit/dja9fsvk-xuzfselq?file=src%2Fapp%2Fdatepicker-basic-demo.html,src%2Fapp%2Fdatepicker-basic-demo.ts,package.json

Recommendations

To resolve this issue, the PrimeNG team should:

  1. Investigate the cause of the issue and identify the root problem.
  2. Implement a fix to ensure that the month of the selected value is consistently styled in the Month view.
  3. Test the fix thoroughly to ensure that it does not introduce any new issues.

Q: What is the issue with the DatePicker component in PrimeNG?

A: The issue is that the current selected day value is not indicated in the Month view of the DatePicker component. This means that the user cannot easily identify the selected month, which can lead to confusion and errors.

Q: When did this issue start?

A: This issue has been present since at least version 17 of PrimeNG and is still observed in the latest stable release, v19.0.9.

Q: How can I reproduce this issue?

A: To reproduce this issue, follow these steps:

  1. Use PrimeNG's DatePicker example page or this stackblitz: https://stackblitz.com/edit/dja9fsvk-xuzfselq?file=src%2Fapp%2Fdatepicker-basic-demo.html,src%2Fapp%2Fdatepicker-basic-demo.ts,package.json
  2. In the Basic example, choose a date.
  3. Re-open the date picker and click on the month in the heading.
  4. Note that, in the monthly view, the month of your value selected in step 2 is not indicated.
  5. Click the year in the heading.
  6. Note that, in the yearly view, the year of your value in step 2 is indicated properly.

Q: Is this issue specific to a particular view?

A: Yes, this issue is specific to the Month view of the DatePicker component. The Month Picker example does properly indicate the month, so it's view specific.

Q: What is the expected behavior?

A: The expected behavior is that the month of the selected value should have a consistent style when in the month view.

Q: How can I contribute to resolving this issue?

A: If you are familiar with the PrimeNG codebase and would like to contribute to resolving this issue, you can:

  1. Fork the PrimeNG repository on GitHub.
  2. Create a new branch for your fix.
  3. Implement the fix and test it thoroughly.
  4. Submit a pull request to the PrimeNG team.

Q: What is the current status of this issue?

A: Unfortunately, there is no response to the pull request, and the issue remains unresolved.

Q: What are the system requirements for reproducing this issue?

A: The system requirements for reproducing this issue are:

  • Angular version: 19.1.7
  • PrimeNG version: v19
  • Node version: 22.13.5
  • Browser(s): Tested on Firefox 136 & Brave 1.76.74

Q: Where can I find the reproducer for this issue?

A: The reproducer for this issue is available at: https://stackblitz.com/edit/dja9fsvk-xuzfselq?file=src%2Fapp%2Fdatepicker-basic-demo.html,src%2Fapp%2Fdatepicker-basic-demo.ts,package.json

Q: What are the next steps for resolving this issue?

A: The next steps for resolving this issue are:

  1. Investigate the cause of the issue and identify the root problem.
  2. Implement a fix to ensure that the month of the selected value is consistently styled in the Month view.
  3. Test the fix thoroughly to ensure that it does not introduce any new issues.
  4. Submit a pull request to the PrimeNG team.

By following these steps, the PrimeNG team can ensure that the DatePicker component is reliable and easy to use, providing a better experience for developers and users alike.