From 535fd0c3fd8bf7793e96b5efa18e53f6773d4d87 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 25 Nov 2021 15:10:58 +0100
Subject: [PATCH 1/6] DateTimePicker: Extract `from12hTo24h` function

---
 packages/components/src/date-time/time.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index 9063a6011a335..fc76b98edd827 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -28,6 +28,10 @@ import TimeZone from './timezone';
  */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
+function from12hTo24h( hours, isPm ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
 /**
  * <UpdateOnBlurAsIntegerField>
  * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
@@ -132,11 +136,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 			const newDate = date
 				.clone()
-				.hours(
-					value === 'PM'
-						? ( ( parsedHours % 12 ) + 12 ) % 24
-						: parsedHours % 12
-				);
+				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
 
 			changeDate( newDate );
 		};

From 0c815f9b7ff004624867b4d02a61ccb9dba274e0 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 25 Nov 2021 15:12:14 +0100
Subject: [PATCH 2/6] DateTimePicker: correctly convert hours from 12 to 24
 format when updating the time

---
 packages/components/src/date-time/time.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index fc76b98edd827..a0c5f70c1e76b 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -121,8 +121,16 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 	}
 
 	function update( name, value ) {
+		// If the 12-hour format is being used and the 'PM' period is selected, then
+		// the incoming value (which ranges 1-12) should be increased by 12 to match
+		// the expected 24-hour format.
+		let adjustedValue = value;
+		if ( is12Hour ) {
+			adjustedValue = from12hTo24h( value, am === 'PM' );
+		}
+
 		// Clone the date and call the specific setter function according to `name`.
-		const newDate = date.clone()[ name ]( value );
+		const newDate = date.clone()[ name ]( adjustedValue );
 		changeDate( newDate );
 	}
 

From b6ce3a8ab5a31426f6d9755e04e0c09803adf239 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 25 Nov 2021 17:37:58 +0100
Subject: [PATCH 3/6] CHANGELOG

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index bdb1d8baa6da1..033cebd70932b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Bug Fix
 
 -   Replaced hardcoded blue in `ColorPicker` with UI theme color ([#36153](https://github.com/WordPress/gutenberg/pull/36153)).
+-   Fixed a bug which prevented setting `PM` hours correctly in the `DateTimePicker` ([#36878](https://github.com/WordPress/gutenberg/pull/36878)).
 
 ### Enhancements
 -   Added a `showTooltip` prop to `ToggleGroupControlOption` in order to display tooltip text (using `<Tooltip />`). ([#36726](https://github.com/WordPress/gutenberg/pull/36726)).

From 813684b286baaaef8e721553e8a048f1fcea2b27 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 26 Nov 2021 13:44:11 +0100
Subject: [PATCH 4/6] Only apply the value adjustment when the hours input
 updates

---
 packages/components/src/date-time/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index a0c5f70c1e76b..098fba0d9cfab 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -125,7 +125,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 		// the incoming value (which ranges 1-12) should be increased by 12 to match
 		// the expected 24-hour format.
 		let adjustedValue = value;
-		if ( is12Hour ) {
+		if ( name === 'hours' && is12Hour ) {
 			adjustedValue = from12hTo24h( value, am === 'PM' );
 		}
 

From 66c847ef1f76ff042a1484cc81e13046a5156e5a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 26 Nov 2021 13:44:38 +0100
Subject: [PATCH 5/6] Add unit test to check setting hours with PM period
 selected

---
 .../components/src/date-time/test/time.js     | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/components/src/date-time/test/time.js b/packages/components/src/date-time/test/time.js
index 7124e80e6c1b1..8eba5586a14c8 100644
--- a/packages/components/src/date-time/test/time.js
+++ b/packages/components/src/date-time/test/time.js
@@ -169,6 +169,36 @@ describe( 'TimePicker', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:00:00' );
 	} );
 
+	it( 'should allow to set the time correctly when the PM period is selected', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="1986-10-18T11:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const pmButton = screen.getByText( 'PM' );
+		fireEvent.click( pmButton );
+
+		const hoursInput = screen.getByLabelText( 'Hours' );
+		fireEvent.change( hoursInput, { target: { value: '6' } } );
+		fireEvent.blur( hoursInput );
+
+		// When clicking on 'PM', we expect the time to be 11pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			1,
+			'1986-10-18T23:00:00'
+		);
+		// When changing the hours to '6', we expect the time to be 6pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			2,
+			'1986-10-18T18:00:00'
+		);
+	} );
+
 	it( 'should truncate at the minutes on change', () => {
 		const onChangeSpy = jest.fn();
 

From 3532e495848aa873057ce3e3e6c0d0fe72bd20d7 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 26 Nov 2021 13:45:16 +0100
Subject: [PATCH 6/6] Update unit test on the assumption that 12am should be
 intended as midnight

---
 packages/components/src/date-time/test/time.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/date-time/test/time.js b/packages/components/src/date-time/test/time.js
index 8eba5586a14c8..523f2447e6acf 100644
--- a/packages/components/src/date-time/test/time.js
+++ b/packages/components/src/date-time/test/time.js
@@ -47,13 +47,13 @@ describe( 'TimePicker', () => {
 		fireEvent.change( hoursInput, { target: { value: '12' } } );
 		fireEvent.blur( hoursInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:00:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:00:00' );
 		onChangeSpy.mockClear();
 
 		fireEvent.change( minutesInput, { target: { value: '35' } } );
 		fireEvent.blur( minutesInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:35:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:35:00' );
 		onChangeSpy.mockClear();
 	} );