[Shared UX][DateRangePicker] Missing parts by acstll · Pull Request #258229 · elastic/kibana

acstll · 2026-03-17T20:11:56Z

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 https://github.com/elastic/eui-private/issues/515 🔒
Resolves https://github.com/elastic/eui-private/issues/516 🔒
Resolves https://github.com/elastic/eui-private/issues/517 🔒
Resolves https://github.com/elastic/eui-private/issues/519 🔒

Changes outlines right below.

Changes

Parser small improvements

838c6c3

make the input more forgiving with absolute dates (see 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

verify input is forgiving with absolute dates in RFC 2822-ish
verify dash works as a delimiter, also to and until
verify shorthand units for minutes and months works in strict dateMath and our custom syntax min -> m, mos -> M
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

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

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

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.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests 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
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 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
Review the backport guidelines 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
...

…roundings)

Made-with: Cursor

EuiPopover schedules a 250ms setTimeout on close to finish its transition animation. Tests that closed (or left open) the popover without flushing that timer could trigger "not wrapped in act()" warnings when the deferred setState fired after the test boundary. Made-with: Cursor

- bug: dateStringToDate returning Invalid Date instead of null

Tighten the guard before dateMath.parse so only ISO dates and datemath expressions are forwarded. The previous loose prefix check let partial strings like "2025-01-01 to" through, which moment parses without an explicit format, triggering a deprecation warning in tests. Made-with: Cursor

This reverts commit 39d96fd.

weronikaolejniczak

There's the "detailed documentation" link but it leads to https://www.elastic.co/. Should we update, remove the link or leave as is for now?

weronikaolejniczak · 2026-03-18T16:45:54Z

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/panels/settings_panel.tsx

+import { settingsPanelTexts } from '../translations';
+
+// TODO replace with real Kibana advanced settings URL
+const ADVANCED_SETTINGS_URL = '/app/management/kibana/settings';


You already marked this as TODO, not sure if we already need to address it but this will break for any Kibana deployment with a custom base path. We'd need to use core.http.basePath.prepend().

yep, that's a placeholder

We'd need to use core.http.basePath.prepend()

nice, TIL!

weronikaolejniczak · 2026-03-18T16:46:37Z

...tform/packages/shared/shared-ux/datetime/kbn-date-range-picker/date_range_picker_context.tsx

  /** Calendar-specific options (e.g. first day of week). */
  calendarOptions?: CalendarOptions;
+  /** Current picker settings (e.g. rounding, refresh). */
+  settings: DateRangePickerSettings;


settings provides a default so it could be optional:

Suggested change

settings: DateRangePickerSettings;

settings?: DateRangePickerSettings;

(we'll leave it mandatory/controlled as agreed)

weronikaolejniczak · 2026-03-18T16:47:46Z

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/translations.ts

+    'sharedUXPackages.dateRangePicker.settingsPanel.newTimePickerDescription',
+    {
+      defaultMessage:
+        'Don\'t like new time picker UX? Opt out from it in advanced settings under "".',


We need to update this one as discussed on the meeting. We can do it on the integration PR.

yes, we have a QA issue for copy and links 👍

weronikaolejniczak · 2026-03-18T16:48:13Z

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/translations.ts

+  }),
+  intro: i18n.translate('sharedUXPackages.dateRangePicker.documentationPanel.intro', {
+    defaultMessage:
+      'Type `to` to split start and end dates, otherwise the input will consider it just a one day range.',


Aren't we using - delimiter now?

yes, but there's no "official" delimiter i think, both -, and to and until are supported — this text might get revised in any case

weronikaolejniczak

Overall, it's 🟢 I see no critical issues. All the things I mentioned we can address on the integration PR.

acstll · 2026-03-19T05:31:40Z

Thanks @weronikaolejniczak — i will reply to your comments and make sure we keep track!

…d_agent_navigation2 * commit '9289d6b5502db245e645e190b0246554396c6c20': (34 commits) [api-docs] 2026-03-19 Daily api_docs build (elastic#258471) [Shared UX][DateRangePicker] Missing parts (elastic#258229) [Dashboard] Keep pinned_panels separate in read response (elastic#258444) Move inheritance: true to top level in .coderabbit.yml (elastic#258461) [DOCS] 9.3.2 Kibana release notes (elastic#257332) adds routing accept metric attribute to the cps metric (elastic#258168) [ML] AI/Inference Connector creation: use 'location' field to correctly set provider config (elastic#250838) [Lens] Add e2e test for legend list layout (elastic#258160) [SigEvents] Convert feature duplication evaluators to createPrompt pattern (elastic#256534) Add actionable-obs author to .coderabbit.yml (elastic#257922) [DOCS] 9.2.7 Kibana release notes (elastic#257331) Grant Serverless editor/viewer access to ES v2 indices (elastic#258384) [SigEvents][Evals] Rename terminology for KI features and KI queries (elastic#258361) [EDR Workflows][Osquery] Add shared table toolbar components and redesign saved queries list (elastic#258394) [Automatic Import V2] Upload samples using an existing index (elastic#258074) Add GET /inference_features route to expose feature registry (elastic#258044) fix additional fields not included (elastic#257625) [Discover] [Metrics] Add tier 2 journeys for Metrics in Discover E2E (elastic#255036) [Lens as code] Support correct X-Axis types in ES|QL visualizations (elastic#258159) Update APM (main) (elastic#254880) ...

## 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 added 13 commits March 17, 2026 16:01

[DateRangePicker] Parser improvements

838c6c3

[DateRangePicker] Add roundRelativeTime to parser transform options (…

45618ea

…roundings)

[DateRangePicker] Add Documentation panel

0b3c5d5

Made-with: Cursor

[DateRangePicker] Add Settings panel, roundRelativeTime defaults to true

13ad343

[DateRangePicker] Fix parser bug, update tests

23bb9f8

- bug: dateStringToDate returning Invalid Date instead of null

[DateRangePicker] Fix bug with rounding unit map

7e60622

[DateRangePicker] Update order in translations.ts file

b18f46f

[DateRangePicker] Fix dupe types

39d96fd

[DateRangePicker] Add time zone in main panel (no tests)

fc69e8b

Revert "[DateRangePicker] Fix dupe types"

7061ae2

This reverts commit 39d96fd.

[DateRangePicker] Fix dupe in types

74a9f77

acstll self-assigned this Mar 17, 2026

acstll added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting ci:build-storybooks labels Mar 17, 2026

acstll marked this pull request as ready for review March 18, 2026 06:32

acstll requested review from a team as code owners March 18, 2026 06:32

acstll mentioned this pull request Mar 18, 2026

[Shared UX][DateRangePicker] Parser improvements #255919

Closed

19 tasks

weronikaolejniczak reviewed Mar 18, 2026

View reviewed changes

weronikaolejniczak approved these changes Mar 18, 2026

View reviewed changes

acstll merged commit a94cb87 into elastic:main Mar 19, 2026
30 checks passed

kibanamachine added the v9.4.0 label Mar 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Shared UX][DateRangePicker] Missing parts#258229

[Shared UX][DateRangePicker] Missing parts#258229
acstll merged 13 commits intoelastic:mainfrom
acstll:date-range-picker/almost-there

acstll commented Mar 17, 2026 •

edited by weronikaolejniczak

Loading

Uh oh!

weronikaolejniczak left a comment

Uh oh!

weronikaolejniczak Mar 18, 2026

Uh oh!

acstll Mar 20, 2026

Uh oh!

weronikaolejniczak Mar 18, 2026

Uh oh!

acstll Mar 20, 2026

Uh oh!

weronikaolejniczak Mar 18, 2026

Uh oh!

acstll Mar 20, 2026

Uh oh!

weronikaolejniczak Mar 18, 2026

Uh oh!

acstll Mar 20, 2026

Uh oh!

weronikaolejniczak left a comment

Uh oh!

Uh oh!

acstll commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	settings: DateRangePickerSettings;
	settings?: DateRangePickerSettings;

Conversation

acstll commented Mar 17, 2026 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Parser small improvements

QA suggestion

Documentation panel

QA suggestion

Settings panel and settings / onSettingsChange props

QA suggestion

Time zone in main panel

QA suggestion

Checklist

Identify risks

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

acstll commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Mar 17, 2026 •

edited by weronikaolejniczak

Loading

Settings panel and `settings` / `onSettingsChange` props