diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 9472e17678..88e409a3fc 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -5,7 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
+import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, TitleSelectedDatesFormatter, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
import { IonicSafeString } from "./utils/sanitization";
import { AlertAttributes } from "./components/alert/alert-interface";
import { CounterFormatter } from "./components/item/item-interface";
@@ -826,13 +826,17 @@ export namespace Components {
*/
"showDefaultTimeLabel": boolean;
/**
- * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
+ * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
*/
"showDefaultTitle": boolean;
/**
* If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
*/
"size": 'cover' | 'fixed';
+ /**
+ * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+ */
+ "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
/**
* The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.
*/
@@ -4802,13 +4806,17 @@ declare namespace LocalJSX {
*/
"showDefaultTimeLabel"?: boolean;
/**
- * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
+ * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
*/
"showDefaultTitle"?: boolean;
/**
* If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
*/
"size"?: 'cover' | 'fixed';
+ /**
+ * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+ */
+ "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
/**
* The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.
*/
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png
index a7e751103a..293afb26ba 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png
index 9fbd2ed454..d55586d601 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Chrome-linux.png
index e226527ecb..149499e0a1 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Safari-linux.png
index ba7b0872ed..1ea992d4ff 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts
index 8c2ce79da8..83aa501af8 100644
--- a/core/src/components/datetime/datetime-interface.ts
+++ b/core/src/components/datetime/datetime-interface.ts
@@ -23,3 +23,5 @@ export interface DatetimeParts {
}
export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
+
+export type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index c7b60299d5..1ce28a1350 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -20,12 +20,16 @@
@include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
border-bottom: $datetime-ios-border-color;
+
+ font-size: 14px;
}
:host .datetime-header .datetime-title {
color: var(--title-color);
+}
- font-size: 14px;
+:host .datetime-header .datetime-selected-date {
+ @include margin(10px, null, null, null);
}
// Calendar / Header / Action Buttons
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e07a511bee..9678a4b514 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -10,6 +10,7 @@ import type {
DatetimeParts,
Mode,
StyleEventDetail,
+ TitleSelectedDatesFormatter,
} from '../../interface';
import { startFocusVisible } from '../../utils/focus-visible';
import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
@@ -313,6 +314,14 @@ export class Datetime implements ComponentInterface {
*/
@Prop() firstDayOfWeek = 0;
+ /**
+ * A callback used to format the header text that shows how many
+ * dates are selected. Only used if there are 0 or more than 1
+ * selected (i.e. unused for exactly 1). By default, the header
+ * text is set to "numberOfDates days".
+ */
+ @Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
+
/**
* If `true`, multiple dates can be selected at once. Only
* applies to `presentation="date"` and `preferWheel="false"`.
@@ -388,9 +397,8 @@ export class Datetime implements ComponentInterface {
/**
* If `true`, a header will be shown above the calendar
- * picker. On `ios` mode this will include the
- * slotted title, and on `md` mode this will include
- * the slotted title and the selected date.
+ * picker. This will include both the slotted title, and
+ * the selected date.
*/
@Prop() showDefaultTitle = false;
@@ -2071,20 +2079,36 @@ export class Datetime implements ComponentInterface {
,
];
}
- private renderCalendarViewHeader(mode: Mode) {
+ private renderCalendarViewHeader() {
const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
if (!hasSlottedTitle && !this.showDefaultTitle) {
return;
}
+ const { activeParts, titleSelectedDatesFormatter } = this;
+ const isArray = Array.isArray(activeParts);
+
+ let headerText: string;
+ if (isArray && activeParts.length !== 1) {
+ headerText = `${activeParts.length} days`; // default/fallback for multiple selection
+ if (titleSelectedDatesFormatter !== undefined) {
+ try {
+ headerText = titleSelectedDatesFormatter(convertDataToISO(activeParts));
+ } catch (e) {
+ printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+ }
+ }
+ } else {
+ // for exactly 1 day selected (multiple set or not), show a formatted version of that
+ headerText = getMonthAndDay(this.locale, isArray ? activeParts[0] : activeParts);
+ }
+
return (
);
}
@@ -2137,7 +2161,7 @@ export class Datetime implements ComponentInterface {
switch (presentation) {
case 'date-time':
return [
- this.renderCalendarViewHeader(mode),
+ this.renderCalendarViewHeader(),
this.renderCalendar(mode),
this.renderCalendarViewMonthYearPicker(),
this.renderTime(),
@@ -2145,7 +2169,7 @@ export class Datetime implements ComponentInterface {
];
case 'time-date':
return [
- this.renderCalendarViewHeader(mode),
+ this.renderCalendarViewHeader(),
this.renderTime(),
this.renderCalendar(mode),
this.renderCalendarViewMonthYearPicker(),
@@ -2159,7 +2183,7 @@ export class Datetime implements ComponentInterface {
return [this.renderWheelView(), this.renderFooter()];
default:
return [
- this.renderCalendarViewHeader(mode),
+ this.renderCalendarViewHeader(),
this.renderCalendar(mode),
this.renderCalendarViewMonthYearPicker(),
this.renderFooter(),
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png
index 973e23122f..43113b2ee7 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png
index 0aa4e19429..ec989aeee9 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png
index 7905c9174b..1b7b6729d3 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png
index d5c3589e29..68aa5697d5 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png
index a53106d1c0..0ec46a8177 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png
index efecb4bc19..561673c6df 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png
index 00b10680e9..c0ca784d06 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png
index 7a422d0933..c32cf12789 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png
index 7707ddaf29..439ba4ee13 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png
index 02a5519fd0..0538ceee72 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png
index 9bb040df4a..b68cc422e1 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png
index 2a1a0dbbed..68eb73fab8 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png
index 15a8423032..a272d02bcc 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png
index 020e556039..4d1b24c8be 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png
index 104b262823..03788fcf0c 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png
index b6db85d00a..27e2e61756 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png
index 31101993a2..b9d41f4836 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png
index 5de5178490..50c03600a8 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png
index 4bef5f819d..7501652444 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png
index e11beabd26..3305de3cf7 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png
index 7e9611d8de..89bf52e2f3 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png
index c32814c0fc..4cc5705543 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png
index 6d25f1c08d..2eb673e9a0 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png
index 3959256183..65a2b25c81 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png
index 3983b9d9cb..d5f63372e1 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png
index b66a8381a8..2c14b86c55 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png
index fa50f959f4..a83615aeda 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png
index 6c31e60e7d..e646358506 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png
index 2c515f7bc4..f0db458046 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png
index a93744e559..ad569aa221 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png
index cfae370b77..adbe55db0d 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png
index 300e83db27..4c4912d2d8 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png
index d9ecb5245b..f8adefe11b 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png
index 990b069fa9..cc314966b8 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png
index e786ed10b3..ed219da03a 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png
index 10c5f04ebd..9fb8adcb0d 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png
index da46a88b19..a878c04027 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png
index 139ac82032..ecac26c03e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png
index 0d9a9fdaeb..b2740750e5 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png
index dced0a8f4b..b38cd900c1 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png
index b2c3509d2a..d106e7e198 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png
index 8bbbeaf4b9..c25baa5ad7 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index b37783ffdc..42489085b7 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index eb2e545fba..255bec8d05 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 4a4aec62c9..66ba0a0c0c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index e94a79ce1c..f75eee1063 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index bc2eca9555..5dec2696b5 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 11459d447c..1ddc4c038b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 534a3975a4..ab69777e50 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Firefox-linux.png
index b960749057..81f59e5315 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png
index 360472ce30..d51522aa90 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png
index c87cad400c..bc75b02222 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png
index ff569b7b55..8ad57f2e12 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png
index 6711779046..ee126fa776 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png
index 1dffbf8edb..72d043d632 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png
index 533ae5aa5f..6ecab19bd3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png
index 7417c40ba6..cb205f3d68 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png
index 38c65e7a39..d3352200c3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png
index 9dbbac87eb..db7641d418 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png
index 40a4393998..9251ccf6dc 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index ab4d658090..d3b6a1dec7 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index 30db8e1df8..c46919ac73 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 4ac4838e2d..29a37b46e4 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 24498f2633..335801bea9 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index fa8e13fdf2..96f555564e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index c199537f53..9e2e639f99 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png
index f33e67c62b..b0690687f3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Firefox-linux.png
index 5c4a0a9561..401b923a37 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png
index a2c1ae647e..31464aeba1 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 5dd5599233..10c61bd6c2 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 7335055639..e0222fe517 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png
index fa575af4e0..6bbe8e0fd9 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png
index eb01fb871b..100a666dd3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png
index 26339c94b3..09fc94f071 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png
index 4efd9dd839..11f02c4191 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png
index a50cde4481..b9a9d0fd3c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png
index eee0582ac8..fa9c24dc1b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png
index e7cb68ce29..a4a90e4b50 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index ef07a8ad40..0b977e9cb1 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index d42a553a0d..747a98840a 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index b4e143bb48..cd6f9df63e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 0e64d6b3d5..8447197e1b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index 4517a55fff..964a8b8bb9 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 3d2bc47f2f..848dad43ef 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png
index a1ef144a5c..ff7c265cb6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Firefox-linux.png
index 2a0a19649a..26f89b3923 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png
index 4be6a2dac2..c20d127ad5 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 91508e6c8a..b160fd4940 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 5dff24f909..62468c625e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png
index 5d530fa3db..3b912b710d 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Chrome-linux.png
index 43847bd060..16a5244d95 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Firefox-linux.png
index b853fb3251..2b1d6e2092 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png
index 32f56a267c..741c6c9fe3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png
index 273294b218..cf8f0a8006 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png
index 1478ba8a6d..58524e8d48 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png
index fcd3ab5740..dce5d38b57 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index 8d268bc2cf..e94aea195c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index e089552098..676e090066 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 8cc02b69d6..97e692e14d 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index b4c2afa04e..c3d8270551 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index f0aad7cb4a..e946edc606 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 50518ddce5..74b00354ee 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 2cef99d88f..fd31d2dcd6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Firefox-linux.png
index 556ef6d103..4ff8bf742b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png
index 5e1f7fc9a4..0d42e59c90 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png
index aef0cb9263..d9114abdbc 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png
index d102b86478..878df5db42 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png
index 7ade8875d5..157e02d7e0 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts
index 3244efecf1..e5d65c1756 100644
--- a/core/src/components/datetime/test/multiple/datetime.e2e.ts
+++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts
@@ -157,4 +157,36 @@ test.describe('datetime: multiple date selection (functionality)', () => {
await ionChangeSpy.next();
await expect(datetime).toHaveJSProperty('value', [`${year}-${month}-01`]);
});
+
+ test('header text should update correctly', async ({ page }) => {
+ const datetime = await setup(page, 'withHeader');
+ const header = datetime.locator('.datetime-selected-date');
+ const juneButtons = datetime.locator('[data-month="6"][data-day]');
+
+ await expect(header).toHaveText('Wed, Jun 1');
+
+ await juneButtons.nth(1).click();
+ await expect(header).toHaveText('2 days');
+
+ await juneButtons.nth(0).click();
+ await expect(header).toHaveText('Thu, Jun 2');
+
+ await juneButtons.nth(1).click();
+ await expect(header).toHaveText('0 days');
+ });
+
+ test('header text should update correctly with custom formatter', async ({ page }) => {
+ const datetime = await setup(page, 'customFormatter');
+ const header = datetime.locator('.datetime-selected-date');
+ const juneButtons = datetime.locator('[data-month="6"][data-day]');
+
+ await expect(header).toHaveText('Selected: 3');
+
+ await juneButtons.nth(1).click();
+ await juneButtons.nth(2).click();
+ await expect(header).toHaveText('Wed, Jun 1');
+
+ await juneButtons.nth(0).click();
+ await expect(header).toHaveText('Selected: 0');
+ });
});
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Chrome-linux.png
index 87eb3a602e..d5c53b8778 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png
index 43693aadfb..7ffbaa386e 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Safari-linux.png
index 1ebabccf1e..8361fabce6 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Chrome-linux.png
index 4f824fe1ec..8e65a65329 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png
index c93d2db565..b63e98ed11 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Safari-linux.png
index ca16febf35..db28c5e82b 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/index.html b/core/src/components/datetime/test/multiple/index.html
index 4c3c6a5202..2a617bed3a 100644
--- a/core/src/components/datetime/test/multiple/index.html
+++ b/core/src/components/datetime/test/multiple/index.html
@@ -99,6 +99,17 @@
show-default-title="true"
>
+
+
With Header, Custom Formatter
+
+
@@ -107,6 +118,10 @@
document.querySelector('#multipleDefaultValues').value = ['2022-06-01', '2022-06-02', '2022-06-03'];
document.querySelector('#multipleValuesSeparateMonths').value = ['2022-04-01', '2022-05-01', '2022-06-01'];
document.querySelector('#multipleFalseArrayValue').value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+
+ const customFormatterDatetime = document.querySelector('#customFormatter');
+ customFormatterDatetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+ customFormatterDatetime.titleSelectedDatesFormatter = (selectedDates) => `Selected: ${selectedDates.length}`;