cds-snc
feat: yyyy-MM-dd date input
Prerequisites | Prérequis
- [x] I've read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
- [x] I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
- [x] I've searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.
Describe the feature request. | Décrivez la fonctionnalité demandée
For data entry, it's valuable to be able to enter dates in yyyy-MM-dd format (ex: when writing someone's birthdate down based on a driver's license that was submitted)
Describe the use case. | Décrivez les cas d’utilisation
For our usecase, it'd also be useful if people could just type a date in this format instead of having to use a dropdown to select the month.
Describe the preferred solution. | Décrivez la solution souhaitée
For our usecase, it'd also be useful if our users could just type a date in this format instead of having to use a dropdown to select the month and if they can enter it in yyyy-MM-dd format since that is the format of the documents that they are entering into the system follow.
Describe all alternatives. | Décrivez toutes les solutions possibles
- add property to specify display format on gcds-date-input
Provide related code or examples. | Fournissez du code ou des exemples pertinents
No response
Add other relevant resources. | Ajoutez toute autre ressource utile
No response
@radmorecameron while it's not in our documentation, you should be able to set the type="date" to the <gcds-input> component, giving you the browser's datepicker. You could also set min and max for additional validation. Would this work for your use-case?
At the moment we don't have a datepicker component and the date input supports a different pattern for gathering date inputs.
@radmorecameron while it's not in our documentation, you should be able to set the
type="date"to the<gcds-input>component, giving you the browser's datepicker. You could also setminandmaxfor additional validation. Would this work for your use-case?At the moment we don't have a datepicker component and the date input supports a different pattern for gathering date inputs.
Hi, this may be a bit of an edge case but the problem with type="date" is the display format can be weird. It doesn't follow the ISO 8601 standard and instead does it in a localized non-standard way (it varies based on operating system and browser).
Ex for windows and Microsoft Edge:
If french (Canada) is the region setting in windows then microsoft edge displays it like this (which I believe is the France french version and not the Canadian french?):
If english (Canada) is the region setting in windows then microsoft edge displays it in the: yyyy-mm-dd format (which is the only official date format for all numerical dates in Canada - and what we want)
If English (United States) is the region setting in windows then microsoft edge displays it as: mm-dd-yyyy (which isn't a great format and will cause issues for shorter dates. Ex: october 8th entered in the system instead of August 10th if they don't use the date picker)
Edit: Also an issue with the browser's built-in datepicker is that it ignores the language of the page so if the page you're on has the language set to French but your operating system is set to English then the calendar popup will be in English instead of French