feat(gcds-date-input): add ISO date format

[radmorecameron]

Summary

Adds an iso format for gcds-date. This is useful for data entry. closes #969

Test instructions

I've added specs and updated the storybook. You can test using the storybook.

1. date input should appear in year month day order regardless of language.

[daine]

@radmorecameron thanks for the PR! In this instance, the date input component already has an established design counterpart. When it was first created, the team invested significant effort into defining its component specifications through research and design work.

Introducing a new date format (like this one) would need to go through our requirements and specifications phase before we can proceed with implementation. Since PRs usually come toward the end of our workflow, it may take some time before we can revisit this. Thanks for understanding!

[daine]

Hi @radmorecameron thanks again for putting together this PR, and sorry it's taking some time to get back to you. We really appreciate the contribution and the effort you've put into exploring this format option.

After reviewing it as a team, and taking another look at the issue #969, we noticed that the information there is specifically about supporting an ISO-style format. After some careful consideration, we think aligning this implementation more closely with that intent would be the best path forward.

With that in mind, we'd like to propose a couple of adjustments:

• The new supported format to be iso (not yyyy-mm-dd)
• The format to use text inputs for all fields

So instead of:
[text input year] - [select month dropdown] - [text input day]

we'd like it to be:
[text input year] - [text input month] - [text input day]

This keeps the format closer to the numeric ISO pattern and avoids mixing input types.

If you're open to updating the PR with these changes, that would be great. If you don't have time or would prefer that we take it from here, that's totally fine as well -- just let us know and we can make the adjustments.

Thanks again for the contribution!

[radmorecameron]

Hi @daine I've updated it so it uses text input for month.

I'm guessing the error messages would also need to be updated? (ex: dateInputErrorMessage.en.missingmonth would need to say "Enter the month." if it is ISO format?)

[daine]

Thanks for updating it, it's looking good! Just a found a few spots that need a bit of change. Could we also make sure we have test for the following:

• Pre-filled value test -- ability to set the value to "2021-03-01" then have the date input component render with those values pre-filled (both invalid and valid test cases)

Let me know if you have further questions!

[daine]

@radmorecameron we're getting there! I'm seeing some incorrect / failing tests. Would you like a helping hand there?

[radmorecameron]

@radmorecameron we're getting there! I'm seeing some incorrect / failing tests. Would you like a helping hand there?

Sure 😄 , I believe the tests are correct but failing because the default date validator wasn't updated. I'm not sure what I need to do exactly to get the format passed into the validator.

I imagine _validator in gcds-date-input would need a new type like Validator<{date: string, format: string}>?

[ethanWallace]

Just one small thing I noticed

[radmorecameron]

Edit: Should be ready to review once I rebase it on #1222 😄

[radmorecameron]

Edit: Should be ready to review once I rebase it on #1222 😄

Done!

[Copilot]

Pull request overview

Adds an iso date format option to gcds-date-input to support YYYY-MM-DD style data entry (year–month–day order regardless of language), aligning with the request in issue #969.

Changes:

• Add iso as a supported format across the component, validators, typings, and generated specs.
• Update validation logic/messages for ISO-specific month entry and invalid month handling.
• Extend unit tests, E2E tests, and Storybook docs/stories to cover ISO behavior.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/web/src/validators/input-validators/test/input-validators.spec.tsx	Updates/extends validator specs, including ISO cases and corrected invalid-month expectation.
packages/web/src/validators/input-validators/input-validators.ts	Adds ISO-aware date error messaging and month-range validation.
packages/web/src/components/gcds-date-input/test/gcds-date-input.spec.tsx	Adds ISO render snapshots.
packages/web/src/components/gcds-date-input/test/gcds-date-input.e2e.ts	Adds ISO-format value/validation/a11y Playwright coverage.
packages/web/src/components/gcds-date-input/stories/overview.mdx	Documents ISO examples and required ISO example in Storybook overview.
packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx	Adds ISO Storybook stories and format option.
packages/web/src/components/gcds-date-input/readme.md	Updates public prop type to include iso.
packages/web/src/components/gcds-date-input/gcds-date-input.tsx	Implements ISO rendering (numeric month input), ordering, and passes format into validation context.
packages/web/src/components/gcds-checkboxes/test/gcds-checkboxes.e2e.ts	Fixes incorrect element casting in tests (unrelated but beneficial correctness fix).
packages/web/src/components.d.ts	Updates generated typings for format to include iso.
packages/web/specs/components.json	Updates generated component metadata for iso format.
packages/web/playwright.config.ts	Comments an optional trace setting.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[daine]

Last stretch! I did find an issue, but I created a separate bug ticket for it, we might take a look at it as a team. It's only an issue when you programatically set the values for the date input.

Apart from that, I tested it extensively, including in the different frameworks, and it works pretty well. The CoPilot review has really good suggestions too -- hopefully those aren't too time consuming to update.

Once those changes are in, I think we'll be good and I'm ready to approve it.

[daine]

I did a last round of review and tested the changes (sanitizing and padding) on the new iso format. Code and functionality looks good to me!

[ethanWallace]

LGTM!

[melaniebmn]

LGTM

[nmakuch]

Also LGTM 🚢