Add label and format date

WordPress · Aug 6, 2024 · e841c71 · e841c71
1 parent e5ab336
commit e841c71
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
@@ -33,6 +33,7 @@
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
@@ -12,10 +12,12 @@ import {
 	Dropdown,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	BaseControl,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -26,6 +28,14 @@ import type {
 	DataFormControlProps,
 } from '../types';
 
+function getFormattedDate( value: string | null ) {
+	return dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( value ),
+		undefined
+	);
+}
+
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
 	const timeB = new Date( b ).getTime();
@@ -95,16 +105,18 @@ function Edit< Item >( {
 	return (
 		<Dropdown
 			renderToggle={ ( { onToggle, isOpen } ) => (
-				<Button
-					size="compact"
-					variant="tertiary"
-					onClick={ onToggle }
-					aria-expanded={ isOpen }
-					aria-label={ label }
-					label={ description }
-				>
-					{ value }
-				</Button>
+				<BaseControl id={ id } label={ label }>
+					<Button
+						size="compact"
+						variant="tertiary"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						aria-label={ label }
+						label={ description }
+					>
+						{ getFormattedDate( value ) }
+					</Button>
+				</BaseControl>
 			) }
 			renderContent={ ( { onClose } ) => (
 				<DateTimePickerForm