DatePicker: Add support for dropdown and inputs in date selection

Open Infinite-Null opened this issue 8 months ago • 1 comments

Closes #55137

What?

This PR adds optional input fields to the DatePicker component allowing users to directly enter and select day, month, and year values instead of only relying on the calendar interface.

Why?

The DatePicker component previously only supported date selection via the calendar UI, which required more clicks and navigation for users who knew exactly what date they wanted to input. While the DateTimePicker component already had input fields, the standalone DatePicker component lacked this feature. Adding input fields with a month dropdown improves usability and brings consistency with the DateTimePicker interface.

Testing Instructions

Checkout this PR:

gh pr checkout 69913

Run the storybook:

npm run storybook:dev

Go to DatePicker component and check if showDateInputs porp is there
Enable it and test the DatePicker

Screencast:

https://github.com/user-attachments/assets/24ffc40b-ecbe-4743-bb2c-d640c064f755

Apr 16 '25 08:04 Infinite-Null

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @dashkevych.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: dashkevych.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: mrleemon <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Apr 18 '25 06:04 github-actions[bot]