Add allowedFormats to DateInput

Feature request

Current behaviour

Currently, the component seems to only support the date format that is defined by the locale we are in. So when I’m on a DE locale, it supports DD.MM.YYYY or D.M.YY, but not YY-MM-DD, for example, while in an EN locale it would be reversed.

The issue here is, that users are not adhering to only typing locally recognised formatted dates. The users are typing one of the following:

export const DATE_FORMAT_EUROPE = 'DD.MM.YYYY';
export const DATE_FORMAT_US = 'YYYY-MM-DD';
export const DATE_FILLER_FORMATS = [
  'D.MM.YYYY',
  'DD.M.YYYY',
  'D.M.YYYY',
  'D.M.YY',
  'DD.M.YY',
  'DD.MM.YY',
  'YYYY-MM-D',
  'YYYY-M-DD',
  'YYYY-M-D',
  'YY-MM-DD',
  'YY-M-DD',
  'YY-MM-D'
];

This is not a completed list. For example, I can see a user going for a MM/DD/YYYY format, not listed above. The problem is, I have no possible way of telling the DateInput that this is the case.

Another issue is, that users are working the Numpad for quick entering of the different numerical fields. So they also type in dates with this, in the format DD,MM,YYYY. I also can’t support this as the component doesn’t trigger onChange or onBlur on an invalid date, which this of course is.

Desired behaviour

The component does not only accept formats that are valid for the current locale.

Suggested solution

One solution would be to have a Property called ‘allowedFormats’ or similar, that I can provide (optionally) so the DateInput doesn’t convert (which it currently does, reproducible on https://carbon.sage.com/?path=/story/experimental-date-input--default) a date like 20-06-12 (YY-MM-DD) to 20.06.2012 (DD.MM.YYYY) because it expects locale dates. Looking at the code this would be a rather big rewrite of the component, but it would be very needed for us to have a fully supported date component.

Your environment

Software	Version(s)
carbon-react	16.6.0
react-scripts	3.3.0
React	16.12.0
Browser	Chrome, Firefox, Safari (Mac)
npm	6.12.0
Operating System	Windows, Mac

[jamime]

@jamime I agree, why should the user type values that are not their locale. But if they do so, the component should say “You used the wrong format”. Not silently change it to the format, it assumes is right. This might lead to irritiations for the user and wrong data.

The main issue is we don’t know if a date is entered in the wrong format, if it’s still a valid date. We can’t identify these.

e.g

Format	Value	ISO
DD-MM-YY	01-02-03	2003-02-01
YY-MM-DD	01-02-03	2001-02-03

We also wouldn’t autocorrect the input, we’d follow the formats that I listed above for EU (DD-MM-YYYY) or US (MM-DD-YYYY)

But why enforce the “-” seperator? German users type DD.MM.YYYY (or variations of it, like D.M.YY) or comma instead of dot, because comma is on the numpad.

regardless of the separator

I meant that the user could enter , . / - but we will display it in their local format once the field has blurred.

[carbonci]

🎉 This issue has been resolved in version 104.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀