diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
index 2f077bcace75d..b469635fe3e3d 100644
--- a/packages/components/src/date-time/stories/date.tsx
+++ b/packages/components/src/date-time/stories/date.tsx
@@ -19,6 +19,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -29,13 +30,23 @@ export default meta;
 
 const Template: ComponentStory< typeof DatePicker > = ( {
 	currentDate,
+	onChange,
 	...args
 } ) => {
 	const [ date, setDate ] = useState( currentDate );
 	useEffect( () => {
 		setDate( currentDate );
 	}, [ currentDate ] );
-	return <DatePicker { ...args } currentDate={ date } onChange={ setDate } />;
+	return (
+		<DatePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
 };
 
 export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
diff --git a/packages/components/src/date-time/stories/index.tsx b/packages/components/src/date-time/stories/index.tsx
index e10414210ed6a..fb126edb81f4e 100644
--- a/packages/components/src/date-time/stories/index.tsx
+++ b/packages/components/src/date-time/stories/index.tsx
@@ -19,6 +19,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -29,6 +30,7 @@ export default meta;
 
 const Template: ComponentStory< typeof DateTimePicker > = ( {
 	currentDate,
+	onChange,
 	...args
 } ) => {
 	const [ date, setDate ] = useState( currentDate );
@@ -36,7 +38,14 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 		setDate( currentDate );
 	}, [ currentDate ] );
 	return (
-		<DateTimePicker { ...args } currentDate={ date } onChange={ setDate } />
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
 	);
 };
 
diff --git a/packages/components/src/date-time/stories/time.tsx b/packages/components/src/date-time/stories/time.tsx
index c27c50792ead1..9fc72086075f7 100644
--- a/packages/components/src/date-time/stories/time.tsx
+++ b/packages/components/src/date-time/stories/time.tsx
@@ -18,6 +18,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 	component: TimePicker,
 	argTypes: {
 		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -28,13 +29,23 @@ export default meta;
 
 const Template: ComponentStory< typeof TimePicker > = ( {
 	currentTime,
+	onChange,
 	...args
 } ) => {
 	const [ time, setTime ] = useState( currentTime );
 	useEffect( () => {
 		setTime( currentTime );
 	}, [ currentTime ] );
-	return <TimePicker { ...args } currentTime={ time } onChange={ setTime } />;
+	return (
+		<TimePicker
+			{ ...args }
+			currentTime={ time }
+			onChange={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
 };
 
 export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );