[EuiSuperDatePicker] More forgiving absolute input by acstll · Pull Request #9199 · elastic/eui

acstll · 2025-11-10T13:04:25Z

Summary

Important

This PR merges into a feature branch

This makes the manual input of date and times more forgiving, in the Absolute tab. Meaning that is not needed for users to enter the entire date (sometimes in the in the exact format) for it to be parsed correctly.

Resolves https://github.com/elastic/eui-private/issues/439 🔒

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Impact to users

🟡 Low to no impact. No changes required. I think it's unlikely but some tests may fail.

Changes

Technically this is changing a single prop passed to the underlying library doing the date/time parsing, Moment.js. Namely the prop for enabling Strict Mode parsing.

Until now strict mode was enabled for all formats: the one passed in the dateFormat prop, and the other 3 supported (ISO 8601, RFC 2822 and Unix timestamp in seconds)). With this change, it will be disabled for the passed dateFormat only if the entered value is not any of the other 3 formats.

Parsing for ISO 8601, RFC 2822 and Unix remains unchanged. It behaves like the following:

ISO 8601 (unchanged)

Example: 2025-11-10T11:07:02Z

Forgiving. Entering a partial value works e.g. 2025-11.

RFC 2822 (unchanged)

Example: Tue, 10 Nov 2025 11:07:00 +0000

Partially forgiving, only the optional day of week e.g. Tue can be left out.

Unix timestamp, in seconds (unchanged)

Example: 1762772820

Not forgiving (for obvious reasons).

Examples of changes in parsing

When entering a value and pressing Enter.

Input	Before	After
`Nov 10, 2025`	⚠️ Invalid	✅ Nov 10, 2025 @ 00:00:00.000
`Nov 10 2025`	⚠️ Invalid	✅ Nov 10, 2025 @ 00:00:00.000
`Nov 10`	⚠️ Invalid	✅ Nov 10, 2025 @ 00:00:00.000
`Nov`	⚠️ Invalid	✅ Nov 1, 2025 @ 00:00:00.000
`Nov 10 2025 12:34`	⚠️ Invalid	✅ Nov 10, 2025 @ 12:34:00.000
`2024`	Jan 1, 2024 @ 00:00:00.000✝︎	Jan 1, 2024 @ 00:00:00.000

✝︎ parsed as ISO 8601

QA

🔗 Storybook for manual testing

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

mgadewoll · 2025-11-12T12:38:23Z

🟡 Low to no impact. No changes required. I think it's unlikely but some tests may fail.

💭 I'd suggest to run all changes in the feature branch against Kibana CI before merging to main. That way we'll know early if there are any unexpected issues.

mgadewoll

🟢 The changes work as expected. That's a pretty neat user improvement 🎉

acstll · 2025-11-12T15:46:58Z

🟡 Low to no impact. No changes required. I think it's unlikely but some tests may fail.

💭 I'd suggest to run all changes in the feature branch against Kibana CI before merging to main. That way we'll know early if there are any unexpected issues.

that sounds like a good idea, will do 👍

…e tab

This reverts commit cf0a055. Wrongly included here because of a rebase

elasticmachine · 2025-11-18T13:27:05Z

💛 Build succeeded, but was flaky

Failed CI Steps

:docusaurus: Build and deploy documentation website

History

💚 Build #1983 succeeded b133434
💚 Build #1872 succeeded 36c3715
💚 Build #1871 succeeded 643e0dd

cc @acstll

elasticmachine · 2025-11-18T17:04:15Z

💚 Build Succeeded

Buildkite Build
Commit: f469a97

History

💔 Build #5250 failed f469a97
💔 Build #5249 failed f469a97
💔 Build #5247 failed b133434
💚 Build #5169 succeeded 36c3715
💚 Build #5168 succeeded 643e0dd

cc @acstll

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <jorge.sanz@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <jorge.sanz@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

## Summary > [!IMPORTANT] > the `DateRangePicker` component this is touching will be in Technical Preview This PR adds the missing parts to make `DateRangePicker` feature-complete to start a QA process. Resolves elastic/eui-private#515 🔒 Resolves elastic/eui-private#516 🔒 Resolves elastic/eui-private#517 🔒 Resolves elastic/eui-private#519 🔒 Changes outlines right below. ### Changes #### Parser small improvements 838c6c3 - make the input more forgiving with absolute dates (see [eui/#9199](elastic/eui#9199)) - use a dash as default delimiter e.g. `feb 1 - feb 3`, also supporting others e.g. `to` or `until` - support shorthand-specific unit forms while still being handling date math as before e.g. `-6M` and `-6mos` are the same - a bit better test coverage - matches presets _before_ parsing, as expected - add an option to round relative times (wired up with settings) 45618ea ##### QA suggestion * [x] verify input is forgiving with absolute dates in RFC 2822-ish * [x] verify dash works as a delimiter, also `to` and `until` * [x] verify shorthand units for minutes and months works in strict dateMath and our custom syntax `min` -> `m`, `mos` -> `M` * [x] presets are matched correctly, both by typing and selecting from the list #### Documentation panel 0b3c5d5 - a button to navigate to it is visible when the input is cleared - contents are not final ##### QA suggestion * [x] verify the button shows when the input clears and navigates correctly #### Settings panel and `settings` / `onSettingsChange` props 13ad343 - can be opened via the gear icon button on the footer - features only one setting, "Round relative time ranges" → `roundRelativeTime` - introduces mandatory `settings` and `onSettingsChange` props ##### QA suggestion * [x] verify toggling "Round relative time ranges" works as expected (rounding is applied when "on", to the start bound only) #### Time zone in main panel fc69e8b - display the time zone in the main panel's footer - does not handle `Browser` as a value, this will be fixed separately - no tests for now ##### QA suggestion * [x] verify the time zone is displayed as expected (if no valid iana name passed, it shouldn't show) ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

## Summary > [!IMPORTANT] > the `DateRangePicker` component this is touching will be in Technical Preview This PR adds the missing parts to make `DateRangePicker` feature-complete to start a QA process. Resolves elastic/eui-private#515 🔒 Resolves elastic/eui-private#516 🔒 Resolves elastic/eui-private#517 🔒 Resolves elastic/eui-private#519 🔒 Changes outlines right below. ### Changes #### Parser small improvements elastic@838c6c3 - make the input more forgiving with absolute dates (see [eui/elastic#9199](elastic/eui#9199)) - use a dash as default delimiter e.g. `feb 1 - feb 3`, also supporting others e.g. `to` or `until` - support shorthand-specific unit forms while still being handling date math as before e.g. `-6M` and `-6mos` are the same - a bit better test coverage - matches presets _before_ parsing, as expected - add an option to round relative times (wired up with settings) elastic@45618ea ##### QA suggestion * [x] verify input is forgiving with absolute dates in RFC 2822-ish * [x] verify dash works as a delimiter, also `to` and `until` * [x] verify shorthand units for minutes and months works in strict dateMath and our custom syntax `min` -> `m`, `mos` -> `M` * [x] presets are matched correctly, both by typing and selecting from the list #### Documentation panel elastic@0b3c5d5 - a button to navigate to it is visible when the input is cleared - contents are not final ##### QA suggestion * [x] verify the button shows when the input clears and navigates correctly #### Settings panel and `settings` / `onSettingsChange` props elastic@13ad343 - can be opened via the gear icon button on the footer - features only one setting, "Round relative time ranges" → `roundRelativeTime` - introduces mandatory `settings` and `onSettingsChange` props ##### QA suggestion * [x] verify toggling "Round relative time ranges" works as expected (rounding is applied when "on", to the start bound only) #### Time zone in main panel elastic@fc69e8b - display the time zone in the main panel's footer - does not handle `Browser` as a value, this will be fixed separately - no tests for now ##### QA suggestion * [x] verify the time zone is displayed as expected (if no valid iana name passed, it shouldn't show) ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

acstll self-assigned this Nov 10, 2025

acstll marked this pull request as ready for review November 10, 2025 15:06

acstll requested a review from a team as a code owner November 10, 2025 15:06

mgadewoll self-requested a review November 12, 2025 10:17

mgadewoll approved these changes Nov 12, 2025

View reviewed changes

acstll force-pushed the feat/super-date-picker-track-1-ms-1 branch from 9b13608 to e0802ae Compare November 13, 2025 09:18

acstll deleted the branch elastic:main November 14, 2025 16:05

acstll closed this Nov 14, 2025

acstll reopened this Nov 18, 2025

acstll changed the base branch from feat/super-date-picker-track-1-ms-1 to main November 18, 2025 11:45

acstll force-pushed the super-date-picker-forgiving-input branch from 36c3715 to dd67df6 Compare November 18, 2025 12:48

acstll added 5 commits November 18, 2025 14:23

[EuiSuperDatePicker] Time window buttons (elastic#9151)

d6165d2

[EuiSuperDatePicker] Make parsing forgiving for dateFormat in Absolut…

72aea11

…e tab

[EuiAbsoluteTab] Test forgiving parsing

04a6c0b

Changelog

fb6b595

Revert "[EuiSuperDatePicker] Time window buttons (elastic#9151)"

f469a97

This reverts commit cf0a055. Wrongly included here because of a rebase

acstll force-pushed the super-date-picker-forgiving-input branch from b133434 to f469a97 Compare November 18, 2025 13:24

acstll merged commit 6bea903 into elastic:main Nov 19, 2025
7 checks passed

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

acstll mentioned this pull request Mar 4, 2026

[Shared UX][DateRangePicker] Parser improvements elastic/kibana#255919

Closed

19 tasks

acstll mentioned this pull request Mar 18, 2026

[Shared UX][DateRangePicker] Missing parts elastic/kibana#258229

Merged

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] More forgiving absolute input#9199

[EuiSuperDatePicker] More forgiving absolute input#9199
acstll merged 5 commits intoelastic:mainfrom
acstll:super-date-picker-forgiving-input

acstll commented Nov 10, 2025 •

edited

Loading

Uh oh!

mgadewoll commented Nov 12, 2025 •

edited

Loading

Uh oh!

mgadewoll left a comment

Uh oh!

acstll commented Nov 12, 2025

Uh oh!

elasticmachine commented Nov 18, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Nov 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

acstll commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Impact to users

Changes

ISO 8601 (unchanged)

RFC 2822 (unchanged)

Unix timestamp, in seconds (unchanged)

Examples of changes in parsing

QA

General checklist

Uh oh!

mgadewoll commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Nov 12, 2025

Uh oh!

elasticmachine commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💛 Build succeeded, but was flaky

Failed CI Steps

History

Uh oh!

elasticmachine commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Nov 10, 2025 •

edited

Loading

mgadewoll commented Nov 12, 2025 •

edited

Loading

elasticmachine commented Nov 18, 2025 •

edited

Loading

elasticmachine commented Nov 18, 2025 •

edited

Loading