Skip to content

feat(gcds-date-input): add yyyy-mm-dd input format #996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(gcds-date-input): add yyyy-mm-dd input format #996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
582d4de
feat(gcds-date-input): add yyyy-mm-dd input format
radmorecameron Oct 24, 2025
bd06155
fix prettier warnings
radmorecameron Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/web/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export namespace Components {
/**
* Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements.
*/
"format": 'full' | 'compact';
"format": 'full' | 'compact' | 'yyyy-mm-dd';
/**
* Hint displayed below the legend and above form fields.
*/
Expand Down Expand Up @@ -2531,7 +2531,7 @@ declare namespace LocalJSX {
/**
* Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements.
*/
"format": 'full' | 'compact';
"format": 'full' | 'compact' | 'yyyy-mm-dd';
/**
* Hint displayed below the legend and above form fields.
*/
Expand Down
36 changes: 27 additions & 9 deletions packages/web/src/components/gcds-date-input/gcds-date-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,24 @@ export class GcdsDateInput {
}
}

private getFullOrCompactDate() {
return this.format == 'full' || this.format == 'yyyy-mm-dd'
? 'full'
: 'compact';
}

/**
* Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements.
*/
@Prop() format!: 'full' | 'compact';
@Prop() format!: 'full' | 'compact' | 'yyyy-mm-dd';
@Watch('format')
validateFormat() {
if (!this.format || (this.format != 'full' && this.format != 'compact')) {
if (
!this.format ||
(this.format != 'full' &&
this.format != 'compact' &&
this.format != 'yyyy-mm-dd')
) {
this.errors.push('format');
} else if (this.errors.includes('format')) {
this.errors.splice(this.errors.indexOf('format'), 1);
Expand Down Expand Up @@ -221,7 +232,7 @@ export class GcdsDateInput {
this.hasError = handleValidationResult(
this.el as HTMLGcdsDateInputElement,
this._validator.validate(
this.format === 'full'
this.getFullOrCompactDate() === 'full'
? `${this.yearValue}-${this.monthValue}-${this.dayValue}`
: `${this.yearValue}-${this.monthValue}`,
),
Expand Down Expand Up @@ -306,7 +317,8 @@ export class GcdsDateInput {
* Logic to combine all input values together based on format
*/
private setValue() {
const { yearValue, monthValue, format } = this;
const { yearValue, monthValue } = this;
const format = this.getFullOrCompactDate();
let { dayValue } = this;

// Logic to make sure the day input is registered correctly
Expand Down Expand Up @@ -481,6 +493,16 @@ export class GcdsDateInput {
></gcds-input>
);

let formatArray : any[]

if (format === 'yyyy-mm-dd') {
formatArray = [year, month, day]
} else if (format == 'compact') {
formatArray = [month, year]
} else if (format == 'full') {
formatArray = lang == 'en' ? [month, day, year] : [day, month, year]
}

return (
<Host name={name} onBlur={() => this.onBlur()}>
{this.validateRequiredProps() && (
Expand All @@ -506,11 +528,7 @@ export class GcdsDateInput {
</gcds-error-message>
</div>
) : null}
{format == 'compact'
? [month, year]
: lang == 'en'
? [month, day, year]
: [day, month, year]}
{ formatArray }
</fieldset>
)}
</Host>
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/components/gcds-date-input/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ A date input is a space to enter a known date.
| --------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------- |
| `disabled` | `disabled` | Specifies if the date input is disabled or not. | `boolean` | `false` |
| `errorMessage` | `error-message` | Error message displayed below the legend and above form fields. | `string` | `undefined` |
| `format` _(required)_ | `format` | Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements. | `"compact" \| "full"` | `undefined` |
| `format` _(required)_ | `format` | Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements. | `"compact" \| "full" \| "yyyy-mm-dd"` | `undefined` |
| `hint` | `hint` | Hint displayed below the legend and above form fields. | `string` | `undefined` |
| `legend` _(required)_ | `legend` | Fieldset legend | `string` | `undefined` |
| `name` _(required)_ | `name` | Name attribute for the date input. | `string` | `undefined` |
Expand Down
34 changes: 33 additions & 1 deletion packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
},
format: {
control: { type: 'select' },
options: ['full', 'compact'],
options: ['full', 'compact', 'yyyy-MM-dd'],
table: {
type: { summary: 'string' },
defaultValue: { summary: '-' },
Expand Down Expand Up @@ -208,6 +208,38 @@ FullFR.args = {
validateOn: '',
};

// ------ Date input Format yyyy-mm-dd English ------

export const YyyyMMddEn = Template.bind({});
YyyyMMddEn.args = {
name: 'yyyyMMddEN-default',
legend: 'Date input',
format: 'yyyy-mm-dd',
value: '',
hint: '',
errorMessage: '',
required: false,
disabled: false,
lang: 'en',
validateOn: '',
};

// ------ Date input Format yyyy-mm-dd French ------

export const YyyyMMddFr = Template.bind({});
YyyyMMddFr.args = {
name: 'yyyyMMddEN-default',
legend: 'Date input',
format: 'yyyy-mm-dd',
value: '',
hint: '',
errorMessage: '',
required: false,
disabled: false,
lang: 'fr',
validateOn: '',
};

// ------ Date input Format Compact English ------

export const CompactEN = Template.bind({});
Expand Down
8 changes: 8 additions & 0 deletions packages/web/src/components/gcds-date-input/stories/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ A date input is a space to enter a known date.

<Canvas of={DateInput.FullFR} story={{ inline: true }} />

#### yyyy-mm-dd - English

<Canvas of={DateInput.YyyyMMddEn} story={{ inline: true }} />

#### yyyy-mm-dd - French

<Canvas of={DateInput.YyyyMMddFr} story={{ inline: true }} />

#### Compact - English

<Canvas of={DateInput.CompactEN} story={{ inline: true }} />
Expand Down
115 changes: 115 additions & 0 deletions packages/web/src/components/gcds-date-input/test/gcds-date-input.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,121 @@ describe('gcds-date-input', () => {
`);
});

it('renders - yyyy-MM-dd', async () => {
const page = await newSpecPage({
components: [GcdsDateInput],
html: `<gcds-date-input legend="Date input" name="date" format="yyyy-MM-dd"></gcds-date-input>`,
});
expect(page.root).toEqualHtml(`
<gcds-date-input format="full" legend="Date input" name="date">
<mock:shadow-root>
<fieldset aria-labelledby="date-input-legend" class="gcds-date-input__fieldset" tabindex="-1">
<legend id="date-input-legend">
Date input
</legend>
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value=""></gcds-input>
<gcds-select aria-invalid="false" class="gcds-date-input__month" defaultvalue="Select a month" label="Month" name="month" selectid="month" value="">
<option value="01">
January
</option>
<option value="02">
February
</option>
<option value="03">
March
</option>
<option value="04">
April
</option>
<option value="05">
May
</option>
<option value="06">
June
</option>
<option value="07">
July
</option>
<option value="08">
August
</option>
<option value="09">
September
</option>
<option value="10">
October
</option>
<option value="11">
November
</option>
<option value="12">
December
</option>
</gcds-select>
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value=""></gcds-input>
</fieldset>
</gcds-date-input>
`);
});

it('renders - yyyy-MM-dd - french', async () => {
const page = await newSpecPage({
components: [GcdsDateInput],
html: `<gcds-date-input legend="Date input" name="date" format="yyyy-MM-dd" lang="fr"></gcds-date-input>`,
});
expect(page.root).toEqualHtml(`
<gcds-date-input format="full" lang="fr" legend="Date input" name="date">
<mock:shadow-root>
<fieldset aria-labelledby="date-input-legend" class="gcds-date-input__fieldset" tabindex="-1">
<legend id="date-input-legend">
Date input
</legend>
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" value=""></gcds-input>
<gcds-select aria-invalid="false" class="gcds-date-input__month" defaultvalue="Sélectionnez un mois" label="Mois" name="month" selectid="month" value="">
<option value="01">
janvier
</option>
<option value="02">
février
</option>
<option value="03">
mars
</option>
<option value="04">
avril
</option>
<option value="05">
mai
</option>
<option value="06">
juin
</option>
<option value="07">
juillet
</option>
<option value="08">
août
</option>
<option value="09">
septembre
</option>
<option value="10">
octobre
</option>
<option value="11">
novembre
</option>
<option value="12">
décembre
</option>
</gcds-select>
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Jour" name="day" size="2" type="number" value=""></gcds-input>
</fieldset>
</mock:shadow-root>
</gcds-date-input>
`);
});

it('renders - compact', async () => {
const page = await newSpecPage({
components: [GcdsDateInput],
Expand Down