Skip to content

USWDS - Feature: DatePicker Translatable Days and Months #5677

@deebloo

Description

@deebloo

Is your feature request related to a problem? Please describe.

Current the days of the week and months are hard coded into the code for the date picker. This means I cannot use the date picker in an application where i need to translate all content into multiple languages. I am also noticing a lot of dynamically set aria labels that would also need to be translateable.

Describe the solution you'd like

I would like to be able to override the days of the week and months list. Either an additional data attribute or a hidden list of labels would be ideal.

Describe alternatives you've considered

I have investigated dynamically swapping content but it is very much a hack. I submitted a PR that solves the issue with data-* attributes as a potential solve. Another option would be to use a hidden list.

<div class="usa-date-picker">
  <ul class="usa-date-picker__months" aria-hidden="true">
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
    <li>November</li>
    <li>December</li>
  </ul>

  <ul class="usa-date-picker__days" aria-hidden="true">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
  </ul>

  <input class="usa-input">
</div>

Additional context

Related to #5666

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    Done

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions