Better handling of invalid dates

oandregal · oandregal · commit 94465de1e6ec · 2025-10-31T11:23:27.000+01:00
diff --git a/packages/dataviews/src/components/dataviews-filters/filter.tsx b/packages/dataviews/src/components/dataviews-filters/filter.tsx
@@ -62,6 +62,7 @@ import type {
 	View,
 } from '../../types';
 import useElements from '../../hooks/use-elements';
+import parseDateTime from '../../field-types/utils/parse-date-time';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -499,7 +500,10 @@ export default function Filter( {
 
 		if ( field?.type === 'datetime' && typeof label === 'string' ) {
 			try {
-				label = new Date( label ).toLocaleString();
+				const dateValue = parseDateTime( label );
+				if ( dateValue !== null ) {
+					label = dateValue.toLocaleString();
+				}
 			} catch ( e ) {
 				label = filterInView.value;
 			}
diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { format, isValid as isValidDate } from 'date-fns';
+import { format } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { getDate, getSettings } from '@wordpress/date';
+import { getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -22,18 +22,11 @@ import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 import RelativeDateControl from './utils/relative-date-control';
 import getCustomValidity from './utils/get-custom-validity';
+import parseDateTime from '../field-types/utils/parse-date-time';
 import { unlock } from '../lock-unlock';
 
 const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
-const parseDateTime = ( dateTimeString?: string ): Date | null => {
-	if ( ! dateTimeString ) {
-		return null;
-	}
-	const parsed = getDate( dateTimeString );
-	return parsed && isValidDate( parsed ) ? parsed : null;
-};
-
 const formatDateTime = ( date?: Date | string ): string => {
 	if ( ! date ) {
 		return '';
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
@@ -7,6 +7,7 @@ import type {
 	FieldTypeDefinition,
 } from '../types';
 import RenderFromElements from './utils/render-from-elements';
+import parseDateTime from './utils/parse-date-time';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -33,11 +34,21 @@ export default {
 	},
 	Edit: 'datetime',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.hasElements ? (
-			<RenderFromElements item={ item } field={ field } />
-		) : (
-			new Date( field.getValue( { item } ) ).toLocaleString()
-		);
+		if ( field.elements ) {
+			return <RenderFromElements item={ item } field={ field } />;
+		}
+
+		const value = field.getValue( { item } );
+		if ( [ '', undefined, null ].includes( value ) ) {
+			return null;
+		}
+
+		try {
+			const dateValue = parseDateTime( value );
+			return dateValue?.toLocaleString();
+		} catch ( error ) {
+			return null;
+		}
 	},
 	enableSorting: true,
 	filterBy: {
diff --git a/packages/dataviews/src/field-types/utils/parse-date-time.ts b/packages/dataviews/src/field-types/utils/parse-date-time.ts
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { isValid as isValidDate } from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { getDate } from '@wordpress/date';
+
+export default function parseDateTime( dateTimeString?: string ): Date | null {
+	if ( ! dateTimeString ) {
+		return null;
+	}
+	const parsed = getDate( dateTimeString );
+	return parsed && isValidDate( parsed ) ? parsed : null;
+}
diff --git a/packages/dataviews/src/stories/field-types.story.tsx b/packages/dataviews/src/stories/field-types.story.tsx
@@ -142,7 +142,7 @@ const data: DataType[] = [
 		booleanWithToggle: true,
 		booleanWithElements: true,
 		datetime: '2021-01-01T14:30:00Z',
-		datetimeWithElements: '2021-01-01T14:30:00Z',
+		datetimeWithElements: '1982-05-10T20:30:00Z',
 		date: '2021-01-01',
 		dateWithElements: '2021-01-01',
 		email: 'hi@example.com',
@@ -285,16 +285,16 @@ const fields: Field< DataType >[] = [
 		description: 'Help for datetime with elements.',
 		elements: [
 			{
-				value: '2021-01-01T14:30:00Z',
-				label: 'January 1st, 2021. 14:30UTC',
+				value: '1973-02-01T14:30:00Z',
+				label: 'February 1st, 1973. 14:30UTC',
 			},
 			{
-				value: '2021-02-01T14:30:00Z',
-				label: 'February 1st, 2021. 14:30UTC',
+				value: '1982-05-10T20:30:00Z',
+				label: 'May 10th, 1982. 20:30UTC',
 			},
 			{
-				value: '2021-03-01T14:30:00Z',
-				label: 'March 1st, 2021. 14:30UTC',
+				value: '1994-03-01T14:30:00Z',
+				label: 'March 1st, 1994. 14:30UTC',
 			},
 		],
 	},
