Field API format: fix and use WordPress input

packages/dataviews/CHANGELOG.md

@@ -12,6 +12,7 @@
 - DataViews: add support for activity layout. [#72780](https://github.com/WordPress/gutenberg/pull/72780)
 - DataViews: Add grid keyboard navigation. [#72997](https://github.com/WordPress/gutenberg/pull/72997)
 - Field API: introduce the `format` prop to format the `date` field type. [#72999](https://github.com/WordPress/gutenberg/pull/72999)
+- Field API: fix display format for date. [#73538](https://github.com/WordPress/gutenberg/pull/73538)
 - Documentation: improve Edit component. [#73202](https://github.com/WordPress/gutenberg/pull/73202)
 - Documentation: surface better the `type` property in the documentation. [#73349](https://github.com/WordPress/gutenberg/pull/73349)
 - Documentation: improve DataView's `layout` prop. [#73470](https://github.com/WordPress/gutenberg/pull/73470)

packages/dataviews/README.md

@@ -1850,7 +1850,7 @@ Display format configuration for fields. Currently supported for date fields. Th
 -   Optional.
 -   Properties:
     -   `date`: The format string using PHP date format (e.g., 'F j, Y' for 'March 10, 2023'). Optional, defaults to WordPress "Date Format" setting.
-    -   `weekStartsOn`: Specifies the first day of the week for calendar controls. One of `'sunday'`, `'monday'`, `'tuesday'`, `'wednesday'`, `'thursday'`, `'friday'`, `'saturday'`. Optional, defaults to WordPress "Week Starts On" setting.
+    -   `weekStartsOn`: Specifies the first day of the week for calendar controls. One of 0, 1, 2, 3, 4, 5, 6. Optional, defaults to WordPress "Week Starts On" setting, whose value is 0 (Sunday).
 
 Example:
 
@@ -1861,7 +1861,7 @@ Example:
 	label: 'Publish Date',
 	format: {
 		date: 'F j, Y',
-		weekStartsOn: 'monday',
+		weekStartsOn: 1,
 	},
 }
 ```

packages/dataviews/src/constants.ts

@@ -7,7 +7,7 @@ import { arrowDown, arrowUp } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import type { Operator } from './types';
+import type { Operator, DayNumber } from './types';
 
 // Filter operators.
 export const OPERATOR_IS = 'is';
@@ -188,3 +188,5 @@ export const LAYOUT_ACTIVITY = 'activity';
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
 export const LAYOUT_PICKER_TABLE = 'pickerTable';
+
+export const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];

packages/dataviews/src/dataform-controls/date.tsx

@@ -52,7 +52,6 @@ import type {
 	NormalizedField,
 } from '../types';
 import getCustomValidity from './utils/get-custom-validity';
-import { weekStartsOnToNumber } from '../field-types/utils/week-starts-on';
 
 const { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );
 
@@ -276,9 +275,7 @@ function CalendarDateControl< Item >( {
 	if ( type === 'date' ) {
 		// If the field type is date, we've already normalized the format,
 		// and so it's safe to tell TypeScript to trust us ("as Required<Format>").
-		weekStartsOn = weekStartsOnToNumber(
-			( fieldFormat as Required< FormatDate > ).weekStartsOn
-		);
+		weekStartsOn = ( fieldFormat as Required< FormatDate > ).weekStartsOn;
 	}
 
 	const fieldValue = getValue( { item: data } );
@@ -444,9 +441,7 @@ function CalendarDateRangeControl< Item >( {
 	if ( type === 'date' ) {
 		// If the field type is date, we've already normalized the format,
 		// and so it's safe to tell TypeScript to trust us ("as Required<Format>").
-		weekStartsOn = weekStartsOnToNumber(
-			( fieldFormat as Required< FormatDate > ).weekStartsOn
-		);
+		weekStartsOn = ( fieldFormat as Required< FormatDate > ).weekStartsOn;
 	}
 
 	const onChangeCallback = useCallback(

packages/dataviews/src/field-types/date.tsx

@@ -8,7 +8,6 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
  */
 import type {
 	DataViewRenderFieldProps,
-	DayString,
 	Field,
 	FormatDate,
 	NormalizedField,
@@ -27,8 +26,8 @@ import {
 	OPERATOR_IN_THE_PAST,
 	OPERATOR_OVER,
 	OPERATOR_BETWEEN,
+	DAYS_OF_WEEK,
 } from '../constants';
-import { DAYS_OF_WEEK, numberToWeekStartsOn } from './utils/week-starts-on';
 import { getControl } from '../dataform-controls';
 import hasElements from './utils/has-elements';
 import getValueFromId from './utils/get-value-from-id';
@@ -44,9 +43,9 @@ function getFormat( field: Field< any > ): Required< FormatDate > {
 				: getSettings().formats.date,
 		weekStartsOn:
 			field.format?.weekStartsOn !== undefined &&
-			DAYS_OF_WEEK.includes( field.format?.weekStartsOn as DayString )
+			DAYS_OF_WEEK.includes( field.format?.weekStartsOn )
 				? field.format.weekStartsOn
-				: numberToWeekStartsOn( getSettings().l10n.startOfWeek ),
+				: getSettings().l10n.startOfWeek,
 	};
 }
 
@@ -72,7 +71,7 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 		format = field.format as Required< FormatDate >;
 	}
 
-	return dateI18n( format.weekStartsOn, getDate( value ) );
+	return dateI18n( format.date, getDate( value ) );
 }
 
 export default function normalizeField< Item >(

packages/dataviews/src/stories/field-types.story.tsx

@@ -839,14 +839,7 @@ export const DateComponent = ( {
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	formatDate?: string;
-	formatWeekStartsOn?:
-		| 'sunday'
-		| 'monday'
-		| 'tuesday'
-		| 'wednesday'
-		| 'thursday'
-		| 'friday'
-		| 'saturday';
+	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 } ) => {
 	const dateFields = useMemo(
 		() =>
@@ -856,14 +849,7 @@ export const DateComponent = ( {
 					if ( formatDate || formatWeekStartsOn !== undefined ) {
 						const format: {
 							date?: string;
-							weekStartsOn?:
-								| 'sunday'
-								| 'monday'
-								| 'tuesday'
-								| 'wednesday'
-								| 'thursday'
-								| 'friday'
-								| 'saturday';
+							weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 						} = {};
 						if ( formatDate ) {
 							format.date = formatDate;
@@ -905,13 +891,13 @@ DateComponent.argTypes = {
 		control: 'select',
 		options: {
 			Default: undefined,
-			Sunday: 'sunday',
-			Monday: 'monday',
-			Tuesday: 'tuesday',
-			Wednesday: 'wednesday',
-			Thursday: 'thursday',
-			Friday: 'friday',
-			Saturday: 'saturday',
+			Sunday: 0,
+			Monday: 1,
+			Tuesday: 2,
+			Wednesday: 3,
+			Thursday: 4,
+			Friday: 5,
+			Saturday: 6,
 		},
 		description:
 			'Day that the week starts on. Leave as Default to use WordPress default.',

packages/dataviews/src/test/normalize-fields.ts

@@ -353,7 +353,7 @@ describe( 'normalizeFields: default getValue', () => {
 			expect( typeof normalizedFields[ 0 ].format.date ).toBe( 'string' );
 			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBeDefined();
 			expect( typeof normalizedFields[ 0 ].format.weekStartsOn ).toBe(
-				'string'
+				'number'
 			);
 		} );
 
@@ -364,15 +364,13 @@ describe( 'normalizeFields: default getValue', () => {
 					type: 'date',
 					format: {
 						date: 'F j, Y',
-						weekStartsOn: 'monday',
+						weekStartsOn: 1,
 					},
 				},
 			];
 			const normalizedFields = normalizeFields( fields );
 			expect( normalizedFields[ 0 ].format.date ).toBe( 'F j, Y' );
-			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBe(
-				'monday'
-			);
+			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBe( 1 );
 		} );
 
 		it( 'adds empty format for non-date field types', () => {

packages/dataviews/src/types/field-api.ts

@@ -256,17 +256,9 @@ export type NormalizedFormat = Required< FormatDate > | {};
  */
 export type FormatDate = {
 	date?: string;
-	weekStartsOn?: DayString;
+	weekStartsOn?: DayNumber;
 };
 export type DayNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export type DayString =
-	| 'sunday'
-	| 'monday'
-	| 'tuesday'
-	| 'wednesday'
-	| 'thursday'
-	| 'friday'
-	| 'saturday';
 
 type NormalizedFieldBase< Item > = Omit< Field< Item >, 'Edit' > & {
 	label: string;