jorgefilipecosta · Apr 14, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+- DataForm: Add `min`/`max` date range validation support for `date` and `datetime` fields. [#77201](https://github.com/WordPress/gutenberg/pull/77201)
 - DataForm: support `isDisabled` field property. [#77090](https://github.com/WordPress/gutenberg/pull/77090)
 - DataViews/DataViewsPicker: simplify `defaultLayouts` property. [#77232](https://github.com/WordPress/gutenberg/pull/77232)
 - DataForm: Show tooltip in edit button in `panel` layout. [#77024](https://github.com/WordPress/gutenberg/pull/77024)

@@ -38,6 +38,7 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import {
 	OPERATOR_IN_THE_PAST,
 	OPERATOR_OVER,
@@ -318,6 +319,9 @@ function CalendarDateControl< Item >( {
 	const [ isTouched, setIsTouched ] = useState( false );
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -440,6 +444,8 @@ function CalendarDateControl< Item >( {
 						onChange={ handleManualDateChange }
 						required={ !! field.isValid?.required }
 						disabled={ disabled }
+						min={ minConstraint }
+						max={ maxConstraint }
 					/>
 
 					{ /* Calendar widget */ }
@@ -453,7 +459,7 @@ function CalendarDateControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
 						disableNavigation={ disabled }
 					/>
 				</Stack>
@@ -476,6 +482,7 @@ function CalendarDateRangeControl< Item >( {
 		description,
 		getValue,
 		setValue,
+		isValid,
 		format: fieldFormat,
 	} = field;
 	const disabled = field.isDisabled( { item: data, field } );
@@ -493,6 +500,9 @@ function CalendarDateRangeControl< Item >( {
 		( fieldFormat as FormatDate ).weekStartsOn ??
 		getSettings().l10n.startOfWeek;
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: DateRange ) => {
 			onChange(
@@ -674,6 +684,8 @@ function CalendarDateRangeControl< Item >( {
 							}
 							required={ !! field.isValid?.required }
 							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 						<InputControl
 							__next40pxDefaultSize
@@ -687,6 +699,8 @@ function CalendarDateRangeControl< Item >( {
 							}
 							required={ !! field.isValid?.required }
 							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 					</Stack>
 
@@ -698,7 +712,7 @@ function CalendarDateRangeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
 					/>
 				</Stack>
 			</BaseControl>

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
 import type { DataFormControlProps, FormatDatetime } from '../../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import getCustomValidity from './utils/get-custom-validity';
 import parseDateTime from '../../field-types/utils/parse-date-time';
 import { unlock } from '../../lock-unlock';
@@ -55,6 +56,9 @@ function CalendarDateTimeControl< Item >( {
 		useRef< ReturnType< typeof setTimeout > >( undefined );
 	const previousFocusRef = useRef< Element | null >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDateTime );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -181,6 +185,16 @@ function CalendarDateTimeControl< Item >( {
 					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
 					disabled={ disabled }
+					min={
+						minConstraint
+							? formatDateTime( minConstraint )
+							: undefined
+					}
+					max={
+						maxConstraint
+							? formatDateTime( maxConstraint )
+							: undefined
+					}
 				/>
 				{ /* Calendar widget */ }
 				{ ! compact && (
@@ -196,7 +210,7 @@ function CalendarDateTimeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
 					/>
 				) }
 			</Stack>

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedRules } from '../../../types';
+
+type DateMatcher = { before: Date } | { after: Date };
+
+export default function useDisabledDateMatchers< Item >(
+	isValid: NormalizedRules< Item >,
+	parseDateFn: ( dateString?: string ) => Date | null
+): {
+	minConstraint: string | undefined;
+	maxConstraint: string | undefined;
+	disabledMatchers: DateMatcher[] | undefined;
+} {
+	const minConstraint =
+		typeof isValid.min?.constraint === 'string'
+			? isValid.min.constraint
+			: undefined;
+	const maxConstraint =
+		typeof isValid.max?.constraint === 'string'
+			? isValid.max.constraint
+			: undefined;
+
+	const disabledMatchers = useMemo( () => {
+		const matchers: DateMatcher[] = [];
+		if ( minConstraint ) {
+			const minDate = parseDateFn( minConstraint );
+			if ( minDate ) {
+				matchers.push( { before: minDate } );
+			}
+		}
+		if ( maxConstraint ) {
+			const maxDate = parseDateFn( maxConstraint );
+			if ( maxDate ) {
+				matchers.push( { after: maxDate } );
+			}
+		}
+		return matchers.length > 0 ? matchers : undefined;
+	}, [ minConstraint, maxConstraint, parseDateFn ] );
+
+	return { minConstraint, maxConstraint, disabledMatchers };
+}
@@ -849,31 +849,46 @@ const ValidationComponent = ( {
 				id: 'date',
 				type: 'date',
 				label: 'Date',
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRule ),
+					min: minMax ? '2026-04-01' : undefined,
+					max: minMax ? '2026-04-20' : undefined,
 				},
 			},
 			{
 				id: 'dateRange',
 				type: 'date',
 				label: 'Date range',
 				Edit: DateRangeEdit,
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRangeRule ),
+					min: minMax ? '2026-04-01' : undefined,
+					max: minMax ? '2026-04-20' : undefined,
 				},
 			},
 			{
 				id: 'datetime',
 				type: 'datetime',
 				label: 'Date time',
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateTimeRule ),
+					min: minMax ? '2026-04-01T00:00:00.000Z' : undefined,
+					max: minMax ? '2026-04-20T23:59:59.000Z' : undefined,
 				},
 			},
 		];

@@ -21,6 +21,7 @@ import {
 	OPERATOR_BETWEEN,
 } from '../constants';
 import isValidRequired from './utils/is-valid-required';
+import { isValidMaxDate, isValidMinDate } from './utils/is-valid-date-boundary';
 import render from './utils/render-default';
 
 const format = {
@@ -91,5 +92,7 @@ export default {
 	validate: {
 		required: isValidRequired,
 		elements: isValidElements,
+		min: isValidMinDate,
+		max: isValidMaxDate,
 	},
 } satisfies FieldType< any >;
@@ -20,6 +20,7 @@ import {
 	OPERATOR_OVER,
 } from '../constants';
 import isValidRequired from './utils/is-valid-required';
+import { isValidMaxDate, isValidMinDate } from './utils/is-valid-date-boundary';
 import render from './utils/render-default';
 
 const format = {
@@ -88,5 +89,7 @@ export default {
 	validate: {
 		required: isValidRequired,
 		elements: isValidElements,
+		min: isValidMinDate,
+		max: isValidMaxDate,
 	},
 } satisfies FieldType< any >;
@@ -339,6 +339,50 @@ describe( 'normalizeFields: default getValue', () => {
 		} );
 	} );
 
+	describe( 'validation normalization', () => {
+		it( 'ignores string min/max rules on numeric fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+					isValid: {
+						min: '1',
+						max: '10',
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+		} );
+
+		it( 'ignores numeric min/max rules on date-like fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'publishDate',
+					type: 'date',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+				{
+					id: 'publishedAt',
+					type: 'datetime',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.max ).toBeUndefined();
+		} );
+	} );
+
 	describe( 'format normalization', () => {
 		it( 'applies default format when not provided for date fields', () => {
 			const fields: Field< {} >[] = [