feat(datetime): update weekdays abbreviation for ionic theme

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 = [];