DataViews: Add date field type (#70657)

chihsuan · chihsuan · oandregal · web-flow · commit 2a278af3c617 · 2025-07-21T11:50:24.000+02:00
Co-authored-by: chihsuan &lt;chihsuan@git.wordpress.org&gt;
Co-authored-by: oandregal &lt;oandregal@git.wordpress.org&gt;
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -12,9 +12,8 @@
 - Add support for free composition in the `DataViews` component by exporting subcomponents: `<DataViews.ViewConfig />`, `<DataViews.Search />`, `<DataViews.Pagination />`, `<DataViews.LayoutSwitcher />`, `<DataViews.Layout />`, `<DataViews.FiltersToggle />`, `<DataViews.Filters />`, `<DataViews.BulkActionToolbar />`.
 - `select`, `text`, `email` controls: add `help` support from the field `description` prop.
 - `text`, `email` Edit control: add `help` support from the field `description` prop.
-
 - Add new Edit controls: `checkbox`, `toggleGroup`. In the `toggleGroup`, if the field elements (options) have a `description`, then the selected option's description will be also rendered.
-- Add new `media`, `boolean`, `email` and `array` field type definitions.
+- Add new `media`, `boolean`, `email`, `array` and `date` field type definitions.
 - Field type definitions are now able to define a default `enableSorting` and `render` function.
 - Pin the actions column on the table view when the width is insufficient.
 - Enhance filter component styles.
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -33,6 +33,7 @@ export type SpaceObject = {
 	categories: string[];
 	satellites: number;
 	date: string;
+	datetime: string;
 	email: string;
 };
 
@@ -46,7 +47,8 @@ export const data: SpaceObject[] = [
 		isPlanet: false,
 		categories: [ 'Space', 'NASA' ],
 		satellites: 0,
-		date: '2021-01-01T00:00:00Z',
+		date: '2021-01-01',
+		datetime: '2021-01-01T14:30:00Z',
 		email: 'apollo@example.com',
 	},
 	{
@@ -58,7 +60,8 @@ export const data: SpaceObject[] = [
 		isPlanet: false,
 		categories: [ 'Space' ],
 		satellites: 0,
-		date: '2019-01-02T00:00:00Z',
+		date: '2019-01-02',
+		datetime: '2019-01-02T09:15:00Z',
 		email: 'space@example.com',
 	},
 	{
@@ -70,7 +73,8 @@ export const data: SpaceObject[] = [
 		isPlanet: false,
 		categories: [ 'NASA' ],
 		satellites: 0,
-		date: '2025-01-03T00:00:00Z',
+		date: '2025-01-03',
+		datetime: '2025-01-03T16:45:30Z',
 		email: 'nasa@example.com',
 	},
 	{
@@ -82,7 +86,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 14,
-		date: '2020-01-01T00:00:00Z',
+		date: '2020-01-01',
+		datetime: '2020-01-01T11:22:15Z',
 		email: 'neptune@example.com',
 	},
 	{
@@ -94,7 +99,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T01:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T13:05:45Z',
 		email: 'mercury@example.com',
 	},
 	{
@@ -106,7 +112,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T00:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T08:30:12Z',
 		email: 'venus@example.com',
 	},
 	{
@@ -118,7 +125,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 1,
-		date: '2023-01-03T00:00:00Z',
+		date: '2023-01-03',
+		datetime: '2023-01-03T18:15:30Z',
 		email: 'earth@example.com',
 	},
 	{
@@ -130,7 +138,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 2,
-		date: '2020-01-01T00:00:00Z',
+		date: '2020-01-01',
+		datetime: '2020-01-01T20:45:00Z',
 		email: 'mars@example.com',
 	},
 	{
@@ -142,7 +151,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 95,
-		date: '2017-01-01T00:01:00Z',
+		date: '2017-01-01',
+		datetime: '2017-01-01T12:01:30Z',
 		email: 'jupiter@example.com',
 	},
 	{
@@ -154,7 +164,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 146,
-		date: '2020-02-01T00:02:00Z',
+		date: '2020-02-01',
+		datetime: '2020-02-01T15:32:45Z',
 		email: 'saturn@example.com',
 	},
 	{
@@ -166,7 +177,8 @@ export const data: SpaceObject[] = [
 		isPlanet: true,
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 		satellites: 28,
-		date: '2020-03-01T00:00:00Z',
+		date: '2020-03-01',
+		datetime: '2020-03-01T10:15:20Z',
 		email: 'uranus@example.com',
 	},
 ];
@@ -677,6 +689,11 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		id: 'date',
 		label: 'Date',
+		type: 'date',
+	},
+	{
+		id: 'datetime',
+		label: 'Datetime',
 		type: 'datetime',
 	},
 	{
diff --git a/packages/dataviews/src/components/stories/index.story.tsx b/packages/dataviews/src/components/stories/index.story.tsx
@@ -266,6 +266,27 @@ export const DateTime = ( {
 	);
 };
 
+export const Date = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'date' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
 export const Email = ( {
 	type,
 	labelPosition,
diff --git a/packages/dataviews/src/field-types/date.ts b/packages/dataviews/src/field-types/date.ts
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+
+const getFormattedDate = ( dateToDisplay: string | null ) =>
+	dateI18n( getSettings().formats.date, getDate( dateToDisplay ) );
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: null,
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		if ( field.elements ) {
+			return renderFromElements( { item, field } );
+		}
+
+		const value = field.getValue( { item } );
+		if ( ! value ) {
+			return '';
+		}
+
+		return getFormattedDate( value );
+	},
+	enableSorting: true,
+	filterBy: false,
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/index.tsx b/packages/dataviews/src/field-types/index.tsx
@@ -12,6 +12,7 @@ import { default as email } from './email';
 import { default as integer } from './integer';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
+import { default as date } from './date';
 import { default as boolean } from './boolean';
 import { default as media } from './media';
 import { default as array } from './array';
@@ -43,6 +44,10 @@ export default function getFieldTypeDefinition< Item >(
 		return datetime;
 	}
 
+	if ( 'date' === type ) {
+		return date;
+	}
+
 	if ( 'boolean' === type ) {
 		return boolean;
 	}
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -94,6 +94,7 @@ export type FieldType =
 	| 'text'
 	| 'integer'
 	| 'datetime'
+	| 'date'
 	| 'media'
 	| 'boolean'
 	| 'email'
