Skip to content

Commit b46f498

Browse files
radmorecameronradmorecameron
committed
feat(gcds-date-input): add yyyy-mm-dd input format
1 parent a13dd60 commit b46f498

File tree

6 files changed

+179
-14
lines changed

6 files changed

+179
-14
lines changed

‎packages/web/src/components.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export namespace Components {
265265
/**
266266
* 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.
267267
*/
268-
"format": 'full' | 'compact';
268+
"format": 'full' | 'compact' | 'yyyy-mm-dd';
269269
/**
270270
* Hint displayed below the legend and above form fields.
271271
*/
@@ -2531,7 +2531,7 @@ declare namespace LocalJSX {
25312531
/**
25322532
* 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.
25332533
*/
2534-
"format": 'full' | 'compact';
2534+
"format": 'full' | 'compact' | 'yyyy-mm-dd';
25352535
/**
25362536
* Hint displayed below the legend and above form fields.
25372537
*/

‎packages/web/src/components/gcds-date-input/gcds-date-input.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,17 @@ export class GcdsDateInput {
7373
}
7474
}
7575

76+
private getFullOrCompactDate() {
77+
return this.format == 'full' || this.format == 'yyyy-mm-dd' ? 'full' : 'compact'
78+
}
79+
7680
/**
7781
* 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.
7882
*/
79-
@Prop() format!: 'full' | 'compact';
83+
@Prop() format!: 'full' | 'compact' | 'yyyy-mm-dd';
8084
@Watch('format')
8185
validateFormat() {
82-
if (!this.format || (this.format != 'full' && this.format != 'compact')) {
86+
if (!this.format || (this.format != 'full' && this.format != 'compact' && this.format != 'yyyy-mm-dd')) {
8387
this.errors.push('format');
8488
} else if (this.errors.includes('format')) {
8589
this.errors.splice(this.errors.indexOf('format'), 1);
@@ -96,7 +100,7 @@ export class GcdsDateInput {
96100
this.errors.push('value');
97101
this.value = null;
98102
console.error(
99-
`${i18n['en'].valueError}${i18n['en'][`valueFormat${this.format}`]} | ${i18n['fr'].valueError}${i18n['fr'][`valueFormat${this.format}`]}`,
103+
`${i18n['en'].valueError}${i18n['en'][`valueFormat${this.getFullOrCompactDate()}`]} | ${i18n['fr'].valueError}${i18n['fr'][`valueFormat${this.getFullOrCompactDate()}`]}`,
100104
);
101105
} else if (this.errors.includes('value')) {
102106
this.errors.splice(this.errors.indexOf('value'), 1);
@@ -231,7 +235,7 @@ export class GcdsDateInput {
231235
this.hasError = handleValidationResult(
232236
this.el as HTMLGcdsDateInputElement,
233237
this._validator.validate(
234-
this.format === 'full'
238+
this.getFullOrCompactDate() === 'full'
235239
? `${this.yearValue}-${this.monthValue}-${this.dayValue}`
236240
: `${this.yearValue}-${this.monthValue}`,
237241
),
@@ -365,7 +369,7 @@ export class GcdsDateInput {
365369
* Split value into parts depending on format
366370
*/
367371
private splitFormValue() {
368-
if (this.value && isValidDate(this.value, this.format)) {
372+
if (this.value && isValidDate(this.value, this.getFullOrCompactDate())) {
369373
if (this.format == 'compact') {
370374
const splitValue = this.value.split('-');
371375
this.yearValue = splitValue[0];
@@ -514,6 +518,16 @@ export class GcdsDateInput {
514518
></gcds-input>
515519
);
516520

521+
let formatArray : any[]
522+
523+
if (format === 'yyyy-mm-dd') {
524+
formatArray = [year, month, day]
525+
} else if (format == 'compact') {
526+
formatArray = [month, year]
527+
} else if (format == 'full') {
528+
formatArray = lang == 'en' ? [month, day, year] : [day, month, year]
529+
}
530+
517531
return (
518532
<Host name={name} onBlur={() => this.onBlur()}>
519533
{this.validateRequiredProps() && (
@@ -539,11 +553,7 @@ export class GcdsDateInput {
539553
</gcds-error-message>
540554
</div>
541555
) : null}
542-
{format == 'compact'
543-
? [month, year]
544-
: lang == 'en'
545-
? [month, day, year]
546-
: [day, month, year]}
556+
{ formatArray }
547557
</fieldset>
548558
)}
549559
</Host>

‎packages/web/src/components/gcds-date-input/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ A date input is a space to enter a known date.
1515
| --------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------- |
1616
| `disabled` | `disabled` | Specifies if the date input is disabled or not. | `boolean` | `false` |
1717
| `errorMessage` | `error-message` | Error message displayed below the legend and above form fields. | `string` | `undefined` |
18-
| `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` |
18+
| `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` |
1919
| `hint` | `hint` | Hint displayed below the legend and above form fields. | `string` | `undefined` |
2020
| `legend` _(required)_ | `legend` | Fieldset legend | `string` | `undefined` |
2121
| `name` _(required)_ | `name` | Name attribute for the date input. | `string` | `undefined` |

‎packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
},
2323
format: {
2424
control: { type: 'select' },
25-
options: ['full', 'compact'],
25+
options: ['full', 'compact', 'yyyy-MM-dd'],
2626
table: {
2727
type: { summary: 'string' },
2828
defaultValue: { summary: '-' },
@@ -208,6 +208,38 @@ FullFR.args = {
208208
validateOn: '',
209209
};
210210

211+
// ------ Date input Format yyyy-mm-dd English ------
212+
213+
export const YyyyMMddEn = Template.bind({});
214+
YyyyMMddEn.args = {
215+
name: 'yyyyMMddEN-default',
216+
legend: 'Date input',
217+
format: 'yyyy-mm-dd',
218+
value: '',
219+
hint: '',
220+
errorMessage: '',
221+
required: false,
222+
disabled: false,
223+
lang: 'en',
224+
validateOn: '',
225+
};
226+
227+
// ------ Date input Format yyyy-mm-dd French ------
228+
229+
export const YyyyMMddFr = Template.bind({});
230+
YyyyMMddFr.args = {
231+
name: 'yyyyMMddEN-default',
232+
legend: 'Date input',
233+
format: 'yyyy-mm-dd',
234+
value: '',
235+
hint: '',
236+
errorMessage: '',
237+
required: false,
238+
disabled: false,
239+
lang: 'fr',
240+
validateOn: '',
241+
};
242+
211243
// ------ Date input Format Compact English ------
212244

213245
export const CompactEN = Template.bind({});

‎packages/web/src/components/gcds-date-input/stories/overview.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@ A date input is a space to enter a known date.
2626

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

29+
#### yyyy-mm-dd - English
30+
31+
<Canvas of={DateInput.YyyyMMddEn} story={{ inline: true }} />
32+
33+
#### yyyy-mm-dd - French
34+
35+
<Canvas of={DateInput.YyyyMMddFr} story={{ inline: true }} />
36+
2937
#### Compact - English
3038

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

‎packages/web/src/components/gcds-date-input/test/gcds-date-input.spec.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,121 @@ describe('gcds-date-input', () => {
117117
`);
118118
});
119119

120+
it('renders - yyyy-MM-dd', async () => {
121+
const page = await newSpecPage({
122+
components: [GcdsDateInput],
123+
html: `<gcds-date-input legend="Date input" name="date" format="yyyy-MM-dd"></gcds-date-input>`,
124+
});
125+
expect(page.root).toEqualHtml(`
126+
<gcds-date-input format="full" legend="Date input" name="date">
127+
<mock:shadow-root>
128+
<fieldset aria-labelledby="date-input-legend" class="gcds-date-input__fieldset" tabindex="-1">
129+
<legend id="date-input-legend">
130+
Date input
131+
</legend>
132+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value=""></gcds-input>
133+
<gcds-select aria-invalid="false" class="gcds-date-input__month" defaultvalue="Select a month" label="Month" name="month" selectid="month" value="">
134+
<option value="01">
135+
January
136+
</option>
137+
<option value="02">
138+
February
139+
</option>
140+
<option value="03">
141+
March
142+
</option>
143+
<option value="04">
144+
April
145+
</option>
146+
<option value="05">
147+
May
148+
</option>
149+
<option value="06">
150+
June
151+
</option>
152+
<option value="07">
153+
July
154+
</option>
155+
<option value="08">
156+
August
157+
</option>
158+
<option value="09">
159+
September
160+
</option>
161+
<option value="10">
162+
October
163+
</option>
164+
<option value="11">
165+
November
166+
</option>
167+
<option value="12">
168+
December
169+
</option>
170+
</gcds-select>
171+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value=""></gcds-input>
172+
</fieldset>
173+
</gcds-date-input>
174+
`);
175+
});
176+
177+
it('renders - yyyy-MM-dd - french', async () => {
178+
const page = await newSpecPage({
179+
components: [GcdsDateInput],
180+
html: `<gcds-date-input legend="Date input" name="date" format="yyyy-MM-dd" lang="fr"></gcds-date-input>`,
181+
});
182+
expect(page.root).toEqualHtml(`
183+
<gcds-date-input format="full" lang="fr" legend="Date input" name="date">
184+
<mock:shadow-root>
185+
<fieldset aria-labelledby="date-input-legend" class="gcds-date-input__fieldset" tabindex="-1">
186+
<legend id="date-input-legend">
187+
Date input
188+
</legend>
189+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" value=""></gcds-input>
190+
<gcds-select aria-invalid="false" class="gcds-date-input__month" defaultvalue="Sélectionnez un mois" label="Mois" name="month" selectid="month" value="">
191+
<option value="01">
192+
janvier
193+
</option>
194+
<option value="02">
195+
février
196+
</option>
197+
<option value="03">
198+
mars
199+
</option>
200+
<option value="04">
201+
avril
202+
</option>
203+
<option value="05">
204+
mai
205+
</option>
206+
<option value="06">
207+
juin
208+
</option>
209+
<option value="07">
210+
juillet
211+
</option>
212+
<option value="08">
213+
août
214+
</option>
215+
<option value="09">
216+
septembre
217+
</option>
218+
<option value="10">
219+
octobre
220+
</option>
221+
<option value="11">
222+
novembre
223+
</option>
224+
<option value="12">
225+
décembre
226+
</option>
227+
</gcds-select>
228+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Jour" name="day" size="2" type="number" value=""></gcds-input>
229+
</fieldset>
230+
</mock:shadow-root>
231+
</gcds-date-input>
232+
`);
233+
});
234+
120235
it('renders - compact', async () => {
121236
const page = await newSpecPage({
122237
components: [GcdsDateInput],

0 commit comments

Comments
 (0)