react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

Add `data-date` attribute to GUI Datepicker

Open matthewhartman opened this issue 6 months ago • 0 comments

Is your feature request related to a problem? Please describe. I am utilising onChangeRaw to handle both a user typed date and a user selecting a date from the UI picker.

The reason for using onChangeRaw over onChange is to prevent unwanted values like 1 or 6/31, etc parsing into a valid date ( as under the hood the onChange passes the inputted value into new Date() and will return a valid date )

When choosing a date from the UI picker, there aren't any useful data- attributes to expose a formatted date (other then the aria-label).

Describe the solution you'd like To make this easier, would be good to expose a formatted date string in a data-date attribute in the UI picker's DOM. Example:

<div
  class="react-datepicker__day react-datepicker__day--016 react-datepicker__day--selected react-datepicker__day--today"
  tabindex="0"
  aria-label="Choose Monday, June 16th, 2025"
  role="option"
  title=""
  aria-disabled="false"
  aria-current="date"
  aria-selected="true"
  data-date="06-16-2025" // this is new
>
  16
</div>

Describe alternatives you've considered The current aria-label does give away a date in a more human readable format but it has unwanted data in the format.

matthewhartman avatar Jun 16 '25 05:06 matthewhartman