[DateRangePicker] Calendar "Apply" button preserves edited times (elastic#273335)

## Summary

This PR addresses two UX issues in the Calendar panel of the
`DateRangePicker`:

- **Manual changes made to time** in the input control are kept when
clicking the "Apply" button (previously, these changes were discarded)
- **A single-click to a day** in the calendar view will create a
single-day range, so clicking "Apply" right away is possible (clicking
again on the same day will confirm the same range, keeping the previous
UX untouched)

### Clips

<img width="1030" height="1030" alt="Kapture 2026-06-15 at 15 22 29"
src="https://github.com/user-attachments/assets/2067387d-86eb-4806-bcd4-b1ab7feaf7d2"
/>

Manual edit to time and "Apply" button


<img width="1030" height="1030" alt="Kapture 2026-06-15 at 15 24 21"
src="https://github.com/user-attachments/assets/d5ccd26f-66c3-47fa-aa4c-69dd37e7daa3"
/>

Single-click same-day range


Addresses elastic/eui-private#673

### 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
- [x] 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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Mainly a UX change, no risks identified.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 3 people

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

@@ -8,15 +8,17 @@
  */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { renderWithEuiTheme } from '@kbn/test-jest-helpers';
 
 import { CalendarPanel } from './calendar_panel';
 import { DATE_TYPE_ABSOLUTE, DATE_TYPE_NOW, DATE_TYPE_RELATIVE } from '../constants';
-import { formatDateRange, formatAbsoluteDate } from '../utils';
+import { formatDateRange } from '../utils';
 import { textToTimeRange } from '../parse';
 
 const mockUseDateRangePickerContext = jest.fn();
+const mockCalendarRangeSpy = jest.fn();
 
 jest.mock('../date_range_picker_context', () => ({
   useDateRangePickerContext: () => mockUseDateRangePickerContext(),
@@ -66,6 +68,8 @@ jest.mock('../calendar', () => {
     range: { from?: Date; to?: Date } | undefined;
     onRangeChange: (r: { from?: Date; to?: Date } | undefined) => void;
   }) {
+    mockCalendarRangeSpy(range);
+
     const handleClick = (day: number) => {
       const date = new Date(2026, 1, day);
 
@@ -92,19 +96,12 @@ jest.mock('../calendar', () => {
 const feb2026 = (day: number, h: number, m: number, s = 0, ms = 0) =>
   new Date(2026, 1, day, h, m, s, ms);
 
-/** Builds the formatted display string for a given Feb 2026 date. */
-const feb2026Display = (day: number, h: number, m: number, s = 0, ms = 0) =>
-  formatAbsoluteDate(feb2026(day, h, m, s, ms));
-
-/** Builds the UTC ISO string for a given Feb 2026 date. */
-const feb2026ISO = (day: number, h: number, m: number, s = 0, ms = 0) =>
-  feb2026(day, h, m, s, ms).toISOString();
+describe('CalendarPanel', () => {
+  let user: ReturnType<typeof userEvent.setup>;
 
-/** Click a day by its number in the February 2026 calendar. */
-const clickDay = (day: number) =>
-  fireEvent.click(screen.getByRole('button', { name: String(day) }));
+  /** Click a day by its number in the February 2026 calendar. */
+  const clickDay = (day: number) => user.click(screen.getByRole('button', { name: String(day) }));
 
-describe('CalendarPanel', () => {
   const applyRange = jest.fn();
   const onPresetSave = jest.fn();
   const setText = jest.fn((newText: string) => {
@@ -155,9 +152,11 @@ describe('CalendarPanel', () => {
   });
 
   beforeEach(() => {
+    user = userEvent.setup();
     applyRange.mockClear();
     onPresetSave.mockClear();
     setText.mockClear();
+    mockCalendarRangeSpy.mockClear();
     mockUseDateRangePickerContext.mockReturnValue(
       makeContext([DATE_TYPE_ABSOLUTE, DATE_TYPE_ABSOLUTE])
     );
@@ -181,7 +180,7 @@ describe('CalendarPanel', () => {
   });
 
   describe('date normalization', () => {
-    it('always uses start/end of day when selecting new dates', () => {
+    it('always uses start/end of day when selecting new dates', async () => {
       mockUseDateRangePickerContext.mockReturnValue(
         makeContext(
           [DATE_TYPE_ABSOLUTE, DATE_TYPE_ABSOLUTE],
@@ -191,20 +190,20 @@ describe('CalendarPanel', () => {
       );
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-      clickDay(15);
+      await clickDay(10);
+      await clickDay(15);
 
       expect(setText).toHaveBeenLastCalledWith(
         formatDateRange(feb2026(10, 0, 0, 0, 0), feb2026(15, 23, 59, 59, 999))
       );
     });
 
-    it('uses start/end of day when selecting the same day twice', () => {
+    it('uses start/end of day when selecting the same day twice', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-      clickDay(10);
+      await clickDay(10);
+      await clickDay(10);
 
       expect(setText).toHaveBeenLastCalledWith(
         formatDateRange(feb2026(10, 0, 0, 0, 0), feb2026(10, 23, 59, 59, 999))
@@ -213,28 +212,30 @@ describe('CalendarPanel', () => {
   });
 
   describe('date selection', () => {
-    it('calls setText with just the start date when only the first date is clicked', () => {
+    it('calls setText with a full-day range when only the first date is clicked', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
+      await clickDay(10);
 
-      expect(setText).toHaveBeenCalledWith(feb2026Display(10, 0, 0));
+      expect(setText).toHaveBeenCalledWith(
+        formatDateRange(feb2026(10, 0, 0), feb2026(10, 23, 59, 59, 999))
+      );
     });
 
-    it('calls setText with the formatted range after both dates are selected', () => {
+    it('calls setText with the formatted range after both dates are selected', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-      clickDay(15);
+      await clickDay(10);
+      await clickDay(15);
 
       expect(setText).toHaveBeenLastCalledWith(
         formatDateRange(feb2026(10, 0, 0), feb2026(15, 23, 59, 59, 999))
       );
     });
 
-    it('resets range and shows new start date when clicking after a complete selection', () => {
+    it('resets to a new full-day range when clicking after a complete selection', async () => {
       mockUseDateRangePickerContext.mockReturnValue(
         makeContext(
           [DATE_TYPE_ABSOLUTE, DATE_TYPE_ABSOLUTE],
@@ -244,39 +245,48 @@ describe('CalendarPanel', () => {
       );
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(20);
+      await clickDay(20);
 
-      expect(setText).toHaveBeenCalledWith(feb2026Display(20, 0, 0, 0, 0));
+      expect(setText).toHaveBeenCalledWith(
+        formatDateRange(feb2026(20, 0, 0), feb2026(20, 23, 59, 59, 999))
+      );
     });
   });
 
-  describe('Apply button', () => {
-    it('is disabled when no dates are selected', () => {
-      mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
+  describe('invalid range', () => {
+    it('leaves the calendar unselected when the range is invalid', () => {
+      // End date in the future
+      mockUseDateRangePickerContext.mockReturnValue({
+        ...makeContext([DATE_TYPE_ABSOLUTE, DATE_TYPE_NOW]),
+        timeRange: {
+          startDate: feb2026(20, 0, 0),
+          endDate: feb2026(15, 23, 59, 59, 999),
+          type: [DATE_TYPE_ABSOLUTE, DATE_TYPE_NOW] as [string, string],
+          isInvalid: true,
+        },
+      });
+
       renderWithEuiTheme(<CalendarPanel />);
 
-      expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+      expect(mockCalendarRangeSpy).toHaveBeenLastCalledWith(undefined);
     });
+  });
 
-    it('is disabled when only the start date is selected', () => {
+  describe('Apply button', () => {
+    it('is disabled when no dates are selected', () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-
       expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
     });
 
-    it('shows tooltip when disabled due to missing end date', () => {
+    it('is enabled after a single day is selected (full-day range)', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
+      await clickDay(10);
 
-      const applyButton = screen.getByRole('button', { name: 'Apply' });
-      expect(
-        applyButton.closest('[class*="euiToolTip"]') || applyButton.parentElement
-      ).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Apply' })).not.toBeDisabled();
     });
 
     it('is enabled when initialized with a valid date range', () => {
@@ -285,64 +295,85 @@ describe('CalendarPanel', () => {
       expect(screen.getByRole('button', { name: 'Apply' })).not.toBeDisabled();
     });
 
-    it('becomes enabled after both dates are selected', () => {
+    it('becomes enabled as soon as a day is selected and stays enabled for a range', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
       expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
 
-      clickDay(10);
-      expect(screen.getByRole('button', { name: 'Apply' })).toBeDisabled();
+      await clickDay(10);
+      expect(screen.getByRole('button', { name: 'Apply' })).not.toBeDisabled();
 
-      clickDay(15);
+      await clickDay(15);
       expect(screen.getByRole('button', { name: 'Apply' })).not.toBeDisabled();
     });
 
-    it('calls applyRange with UTC ISO bounds and formatted display text', () => {
+    it('delegates to applyRange() so the current input range is applied', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-      clickDay(15);
-      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+      await clickDay(10);
+      await clickDay(15);
+      await user.click(screen.getByRole('button', { name: 'Apply' }));
 
-      expect(applyRange).toHaveBeenCalledWith(
-        {
-          start: feb2026ISO(10, 0, 0),
-          end: feb2026ISO(15, 23, 59, 59, 999),
-        },
-        formatDateRange(feb2026(10, 0, 0), feb2026(15, 23, 59, 59, 999))
-      );
+      // Applies the resolved range from `text` (matching the Enter key)
+      expect(applyRange).toHaveBeenCalledWith();
     });
 
-    it('calls onPresetSave when Save as preset is checked', () => {
+    it('calls onPresetSave when Save as preset is checked', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      fireEvent.click(screen.getByRole('checkbox', { name: 'Save as preset' }));
-      clickDay(10);
-      clickDay(15);
-      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+      await user.click(screen.getByRole('checkbox', { name: 'Save as preset' }));
+      await clickDay(10);
+      await clickDay(15);
+      await user.click(screen.getByRole('button', { name: 'Apply' }));
 
       expect(onPresetSave).toHaveBeenCalledWith(
         expect.objectContaining({ label: expect.any(String) })
       );
     });
 
-    it('does not call onPresetSave when Save as preset is unchecked', () => {
+    it('does not call onPresetSave when Save as preset is unchecked', async () => {
       mockUseDateRangePickerContext.mockReturnValue(makeContextNoDates());
       renderWithEuiTheme(<CalendarPanel />);
 
-      clickDay(10);
-      clickDay(15);
-      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+      await clickDay(10);
+      await clickDay(15);
+      await user.click(screen.getByRole('button', { name: 'Apply' }));
 
       expect(onPresetSave).not.toHaveBeenCalled();
     });
+
+    it('preserves manually edited times when applying (does not floor to day boundaries)', async () => {
+      // Mid-day times, clearly distinct from the 00:00:00 / 23:59:59 day
+      // boundaries, simulate the user editing the time in the input after
+      // selecting days in the calendar.
+      const editedStart = feb2026(11, 9, 15, 42, 0);
+      const editedEnd = feb2026(13, 17, 48, 8, 0);
+
+      mockUseDateRangePickerContext.mockReturnValue(
+        makeContext([DATE_TYPE_ABSOLUTE, DATE_TYPE_ABSOLUTE], editedStart, editedEnd)
+      );
+      renderWithEuiTheme(<CalendarPanel />);
+
+      await user.click(screen.getByRole('checkbox', { name: 'Save as preset' }));
+      await user.click(screen.getByRole('button', { name: 'Apply' }));
+
+      expect(applyRange).toHaveBeenCalledWith();
+
+      // The edited times are preserved when saving as a preset, not floored
+      expect(onPresetSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          start: editedStart.toISOString(),
+          end: editedEnd.toISOString(),
+        })
+      );
+    });
   });
 
   describe('back navigation', () => {
-    it('restores original text when going back', () => {
+    it('restores original text when going back', async () => {
       const originalText = 'Last 15 minutes';
 
       mockUseDateRangePickerContext.mockReturnValue({
@@ -354,7 +385,7 @@ describe('CalendarPanel', () => {
 
       setText.mockClear();
 
-      fireEvent.click(screen.getByTestId('back-button'));
+      await user.click(screen.getByTestId('back-button'));
 
       expect(setText).toHaveBeenCalledWith(originalText);
     });