diff --git a/packages/eui/changelogs/upcoming/9199.md b/packages/eui/changelogs/upcoming/9199.md new file mode 100644 index 00000000000..21d9d8be200 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9199.md @@ -0,0 +1,2 @@ +- Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. + diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx index 2cac4931553..e021688700e 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx @@ -123,6 +123,31 @@ describe('EuiAbsoluteTab', () => { expect(input).toHaveValue('Jan 31st 01'); }); + it('can be forgiving with `dateFormat`', () => { + const { getByTestSubject } = render( + + ); + const input = getByTestSubject( + 'superDatePickerAbsoluteDateInput' + ) as HTMLInputElement; + + changeInput(input, 'Jan 31, 1993'); + expect(input).not.toBeInvalid(); + expect(input).toHaveValue('Jan 31, 1993 00:00:00'); + + changeInput(input, 'Jan 31'); + expect(input).not.toBeInvalid(); + expect(input.value).toContain('Jan 31, '); + + changeInput(input, 'Jan'); + expect(input).not.toBeInvalid(); + expect(input.value).toContain('Jan 1, '); + }); + describe('parses date string in locale', () => { test.each<{ locale: LocaleSpecifier; diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx index 7f22a5597c2..aa17893453d 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx @@ -126,12 +126,22 @@ export const EuiAbsoluteTab: FunctionComponent = ({ return; } + // We can be forgiving for `dateFormat` if we are certain + // we're not expecting any of the other formats allowed; + // otherwise we can get valid but inaccurate results e.g. + // `1970-01-01` -> `Jan 19, 1970 @ 01:01:00.000` + const strictModeForPassedFormat = moment( + textInputValue, + ALLOWED_USER_DATE_FORMATS, + true + ).isValid(); + // Attempt to parse with passed `dateFormat` and `locale` let valueAsMoment = moment( textInputValue, dateFormat, typeof locale === 'string' ? locale : 'en', // Narrow the union type to string - true + strictModeForPassedFormat ); let dateIsValid = valueAsMoment.isValid();