feat(datetime): update weekdays abbreviation for ionic theme (#30172)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
- Previously for Ionic theme, the weekdays in `ion-datetime` were
displayed in the "narrow" version, such as "M" or "T".

## What is the new behavior?
- Now, the weekdays are displayed in the "short" version: "Mon", "Tue",
etc.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

Before:

![image](https://github.com/user-attachments/assets/f2939274-369c-45c8-86e6-36dabc0cd510)

After:

![image](https://github.com/user-attachments/assets/8dca06e1-bc99-4d78-af79-bef2e5ea3fed)

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/datetime/test/data.spec.ts

@@ -1,4 +1,5 @@
 import type { DatetimeParts } from '../datetime-interface';
+import type { Theme } from '../../../interface';
 import {
   generateMonths,
   getDaysOfWeek,
@@ -133,24 +134,29 @@ describe('generateMonths()', () => {
 });
 
 describe('getDaysOfWeek()', () => {
-  it('should return English short names given a locale and mode', () => {
-    expect(getDaysOfWeek('en-US', 'ios')).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+  const themes: Theme[] = ['ios', 'ionic'];
+  it.each<Theme>(themes)('should return English short names given a locale and theme %s', (theme) => {
+    expect(getDaysOfWeek('en-US', theme)).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
   });
 
-  it('should return English narrow names given a locale and mode', () => {
+  it('should return English narrow names given a locale and theme md', () => {
     expect(getDaysOfWeek('en-US', 'md')).toEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S']);
   });
 
-  it('should return Spanish short names given a locale and mode', () => {
-    expect(getDaysOfWeek('es-ES', 'ios')).toEqual(['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb']);
+  it.each<Theme>(themes)('should return Spanish short names given a locale and theme %s', (theme) => {
+    expect(getDaysOfWeek('es-ES', theme)).toEqual(['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb']);
   });
 
-  it('should return Spanish narrow names given a locale and mode', () => {
+  it('should return Spanish narrow names given a locale and theme md', () => {
     expect(getDaysOfWeek('es-ES', 'md')).toEqual(['D', 'L', 'M', 'X', 'J', 'V', 'S']);
   });
 
-  it('should return English short names given a locale, mode and startOfWeek', () => {
-    expect(getDaysOfWeek('en-US', 'ios', 1)).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
+  it.each<Theme>(themes)('should return English short names given a locale and startOfWeek and theme %s', (theme) => {
+    expect(getDaysOfWeek('en-US', theme, 1)).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
+  });
+
+  it('should return English narrow names given a locale and startOfWeek and theme md', () => {
+    expect(getDaysOfWeek('en-US', 'md', 1)).toEqual(['M', 'T', 'W', 'T', 'F', 'S', 'S']);
   });
 });
 

core/src/components/datetime/utils/data.ts

@@ -65,8 +65,8 @@ const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 1
 /**
  * Given a locale and a theme,
  * return an array with formatted days
- * of the week. iOS should display days
- * such as "Mon" or "Tue".
+ * of the week. iOS and Ionic themes should
+ * display days such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
@@ -76,7 +76,7 @@ export const getDaysOfWeek = (locale: string, theme: Theme, firstDayOfWeek = 0)
    * ion-datetime assumes weeks start on Sunday,
    * but is configurable via `firstDayOfWeek`.
    */
-  const weekdayFormat = theme === 'ios' ? 'short' : 'narrow';
+  const weekdayFormat = theme === 'md' ? 'narrow' : 'short';
   const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
   const startDate = new Date('11/01/2020');
   const daysOfWeek = [];