diff --git a/src/View/Widget/DateTime.php b/src/View/Widget/DateTime.php
index 58408420c58..06e1da10a55 100644
--- a/src/View/Widget/DateTime.php
+++ b/src/View/Widget/DateTime.php
@@ -351,7 +351,6 @@ protected function _hourSelect($options = []) {
 		$is24 = $options['format'] == 24;
 
 		$defaultEnd = $is24 ? 24 : 12;
-
 		$options['start'] = max(1, $options['start']);
 
 		$options['end'] = min($defaultEnd, $options['end']);
@@ -362,6 +361,9 @@ protected function _hourSelect($options = []) {
 		if (!$is24 && $options['val'] > 12) {
 			$options['val'] = sprintf('%02d', $options['val'] - 12);
 		}
+		if (!$is24 && $options['val'] == 0) {
+			$options['val'] = 12;
+		}
 
 		if (empty($options['options'])) {
 			$options['options'] = $this->_generateNumbers(
diff --git a/tests/TestCase/View/Widget/DateTimeTest.php b/tests/TestCase/View/Widget/DateTimeTest.php
index 8a688829f1e..ecde23d2068 100644
--- a/tests/TestCase/View/Widget/DateTimeTest.php
+++ b/tests/TestCase/View/Widget/DateTimeTest.php
@@ -616,6 +616,32 @@ public function testRenderHourWidget12() {
 		$this->assertContains('<option value="pm" selected="selected">pm</option>', $result);
 	}
 
+/**
+ * Test rendering hour widget in 12 hour mode at midnight.
+ *
+ * @return void
+ */
+	public function testRenderHourWidget12Midnight() {
+		$now = new \DateTime('2010-09-09 00:30:45');
+		$result = $this->DateTime->render([
+			'name' => 'date',
+			'year' => false,
+			'month' => false,
+			'day' => false,
+			'hour' => [
+				'format' => 12,
+			],
+			'minute' => false,
+			'second' => false,
+			'val' => $now,
+		]);
+		$this->assertContains(
+			'<option value="12" selected="selected">12</option>',
+			$result,
+			'12 is selected'
+		);
+	}
+
 /**
  * Test rendering the hour picker in 12 hour mode.
  *