DevExpress · r-farkhutdinov · Nov 26, 2025 · Nov 18, 2025 · Nov 19, 2025 · Nov 25, 2025
diff --git a/... speed dial action button,label='Add Row',icon='home' (material-blue-light).png b/... speed dial action button,label='Add Row',icon='home' (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/dateBox.ts b/e2e/testcafe-devextreme/tests/editors/dateBox/dateBox.ts
@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DateBox from 'devextreme-testcafe-models/dateBox';
+import { Selector } from 'testcafe';
 import url from '../../../helpers/getPageUrl';
 import asyncForEach from '../../../helpers/asyncForEach';
 import { createWidget } from '../../../helpers/createWidget';
@@ -11,6 +12,9 @@ fixture.disablePageReloads`DateBox`
 const TIME_TO_WAIT = 1500;
 const ITEM_HEIGHT = 40;
 
+const TIME_VIEW_FIELD_CLASS = 'dx-timeview-field';
+const SELECT_BOX_CONTAINER_CLASS = 'dx-selectbox-container';
+
 if (!isMaterialBased()) {
   [[11, 12, 1925], [10, 23, 2001]].forEach(([month, day, year]) => {
     test(`Rollers should be scrolled correctly when value is changed to ${day}/${month}/${year} using kbn and valueChangeEvent=keyup (T948310)`, async (t) => {
@@ -71,3 +75,31 @@ test('DateBox with datetime and root element as container (T1193495)', async (t)
     container: '#container',
   },
 }, '#container'));
+
+test('DateBox with datetime and opened AM/PM select (T1312677)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const timeViewSelect = Selector(`#container .${TIME_VIEW_FIELD_CLASS} .${SELECT_BOX_CONTAINER_CLASS}`);
+
+  await t
+    .click(timeViewSelect);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'DateBox with datetime and opened AMPM select.png',
+    { element: '#container' },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDateBox', {
+  value: new Date(2022, 10, 23, 17, 23),
+  type: 'datetime',
+  pickerType: 'calendar',
+  opened: true,
+  dropDownOptions: {
+    container: '#container',
+  },
+}, '#container'));
diff --git a/...ox/etalons/DateBox with datetime and opened AMPM select (fluent-blue-light).png b/...ox/etalons/DateBox with datetime and opened AMPM select (fluent-blue-light).png
diff --git a/...ateBox/etalons/DateBox with datetime and opened AMPM select (generic-light).png b/...ateBox/etalons/DateBox with datetime and opened AMPM select (generic-light).png
diff --git a/.../etalons/DateBox with datetime and opened AMPM select (material-blue-light).png b/.../etalons/DateBox with datetime and opened AMPM select (material-blue-light).png
diff --git a/...x/etalons/DRB disabled dates before start date select (material-blue-light).png b/...x/etalons/DRB disabled dates before start date select (material-blue-light).png
diff --git a/...ox/etalons/DRB disabled dates on end date input focus (material-blue-light).png b/...ox/etalons/DRB disabled dates on end date input focus (material-blue-light).png
diff --git a/...eRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png b/...eRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png
diff --git a/.../etalons/DRB disabled dates on start date input focus (material-blue-light).png b/.../etalons/DRB disabled dates on start date input focus (material-blue-light).png
diff --git a/...ange cells, start in view and end in row & vise versa (material-blue-light).png b/...ange cells, start in view and end in row & vise versa (material-blue-light).png
diff --git a/...ls, start in view and in row & end in view and in row (material-blue-light).png b/...ls, start in view and in row & end in view and in row (material-blue-light).png
diff --git a/...s/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png b/...s/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png
diff --git a/...e, endDate is cell inside row, hover is start in view (material-blue-light).png b/...e, endDate is cell inside row, hover is start in view (material-blue-light).png
diff --git a/...dDate is cell inside row, hover is start in view, rtl (material-blue-light).png b/...dDate is cell inside row, hover is start in view, rtl (material-blue-light).png
diff --git a/... range, endDate is end cell row, hover is end in view (material-blue-light).png b/... range, endDate is end cell row, hover is end in view (material-blue-light).png
diff --git a/...e, endDate is end cell row, hover is end in view, rtl (material-blue-light).png b/...e, endDate is end cell row, hover is end in view, rtl (material-blue-light).png
diff --git a/...lons/DRB range, endDate is end in view & end cell row (material-blue-light).png b/...lons/DRB range, endDate is end in view & end cell row (material-blue-light).png
diff --git a/...DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png b/...DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png
diff --git a/...ndDate is end in view & start row, hover is start row (material-blue-light).png b/...ndDate is end in view & start row, hover is start row (material-blue-light).png
diff --git a/...e is end in view & start row, hover is start row, rtl (material-blue-light).png b/...e is end in view & start row, hover is start row, rtl (material-blue-light).png
diff --git a/...endDate is end in view, hover is start view & end row (material-blue-light).png b/...endDate is end in view, hover is start view & end row (material-blue-light).png
diff --git a/...te is end in view, hover is start view & end row, rtl (material-blue-light).png b/...te is end in view, hover is start view & end row, rtl (material-blue-light).png
diff --git a/...ndDate is start in row, hover is end view & start row (material-blue-light).png b/...ndDate is start in row, hover is end view & start row (material-blue-light).png
diff --git a/...e is start in row, hover is end view & start row, rtl (material-blue-light).png b/...e is start in row, hover is end view & start row, rtl (material-blue-light).png
diff --git a/...ns/DRB range, endDate is start in view & start in row (material-blue-light).png b/...ns/DRB range, endDate is start in view & start in row (material-blue-light).png
diff --git a/...B range, endDate is start in view & start in row, rtl (material-blue-light).png b/...B range, endDate is start in view & start in row, rtl (material-blue-light).png
diff --git a/... range, endDate is start in view, hover is end in row (material-blue-light).png b/... range, endDate is start in view, hover is end in row (material-blue-light).png
diff --git a/...e, endDate is start in view, hover is end in row, rtl (material-blue-light).png b/...e, endDate is start in view, hover is end in row, rtl (material-blue-light).png
diff --git a/...ndDate is start view & end cell row, hover inside row (material-blue-light).png b/...ndDate is start view & end cell row, hover inside row (material-blue-light).png
diff --git a/...e is start view & end cell row, hover inside row, rtl (material-blue-light).png b/...e is start view & end cell row, hover inside row, rtl (material-blue-light).png
diff --git a/...talons/DRB range, hover is end in view & end cell row (material-blue-light).png b/...talons/DRB range, hover is end in view & end cell row (material-blue-light).png
diff --git a/...s/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png b/...s/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png
diff --git a/...talons/DRB range, hover is end in view & start in row (material-blue-light).png b/...talons/DRB range, hover is end in view & start in row (material-blue-light).png
diff --git a/...s/DRB range, hover is end in view & start in row, rtl (material-blue-light).png b/...s/DRB range, hover is end in view & start in row, rtl (material-blue-light).png
diff --git a/...lons/DRB range, hover is start in view & end cell row (material-blue-light).png b/...lons/DRB range, hover is start in view & end cell row (material-blue-light).png
diff --git a/...DRB range, hover is start in view & end cell row, rtl (material-blue-light).png b/...DRB range, hover is start in view & end cell row, rtl (material-blue-light).png
diff --git a/...lons/DRB range, hover is start in view & start in row (material-blue-light).png b/...lons/DRB range, hover is start in view & start in row (material-blue-light).png
diff --git a/...DRB range, hover is start in view & start in row, rtl (material-blue-light).png b/...DRB range, hover is start in view & start in row, rtl (material-blue-light).png
diff --git a/...range, startDate cell is start in view & end cell row (material-blue-light).png b/...range, startDate cell is start in view & end cell row (material-blue-light).png
diff --git a/..., startDate cell is start in view & end cell row, rtl (material-blue-light).png b/..., startDate cell is start in view & end cell row, rtl (material-blue-light).png
diff --git a/...e, startDate inside row, hover is start in view & row (material-blue-light).png b/...e, startDate inside row, hover is start in view & row (material-blue-light).png
diff --git a/...artDate inside row, hover is start in view & row, rtl (material-blue-light).png b/...artDate inside row, hover is start in view & row, rtl (material-blue-light).png
diff --git a/...nge, startDate is end cell row, hover is start in row (material-blue-light).png b/...nge, startDate is end cell row, hover is start in row (material-blue-light).png
diff --git a/...startDate is end cell row, hover is start in row, rtl (material-blue-light).png b/...startDate is end cell row, hover is start in row, rtl (material-blue-light).png
diff --git a/...nge, startDate is end in view & row, hover inside row (material-blue-light).png b/...nge, startDate is end in view & row, hover inside row (material-blue-light).png
diff --git a/...startDate is end in view & row, hover inside row, rtl (material-blue-light).png b/...startDate is end in view & row, hover inside row, rtl (material-blue-light).png
diff --git a/...tartDate is end in view & start row, hover is end row (material-blue-light).png b/...tartDate is end in view & start row, hover is end row (material-blue-light).png
diff --git a/...ate is end in view & start row, hover is end row, rtl (material-blue-light).png b/...ate is end in view & start row, hover is end row, rtl (material-blue-light).png
diff --git a/...DRB range, startDate is end in view, hover inside row (material-blue-light).png b/...DRB range, startDate is end in view, hover inside row (material-blue-light).png
diff --git a/...ange, startDate is end in view, hover inside row, rtl (material-blue-light).png b/...ange, startDate is end in view, hover inside row, rtl (material-blue-light).png
diff --git a/...ge, startDate is start in row, hover is start in view (material-blue-light).png b/...ge, startDate is start in row, hover is start in view (material-blue-light).png
diff --git a/...tartDate is start in row, hover is start in view, rtl (material-blue-light).png b/...tartDate is start in row, hover is start in view, rtl (material-blue-light).png
diff --git a/...nge, startDate is start in view, hover is end in view (material-blue-light).png b/...nge, startDate is start in view, hover is end in view (material-blue-light).png
diff --git a/...startDate is start in view, hover is end in view, rtl (material-blue-light).png b/...startDate is start in view, hover is end in view, rtl (material-blue-light).png
diff --git a/...tartDate is start view & row, hover is end view & row (material-blue-light).png b/...tartDate is start view & row, hover is end view & row (material-blue-light).png
diff --git a/...ate is start view & row, hover is end view & row, rtl (material-blue-light).png b/...ate is start view & row, hover is end view & row, rtl (material-blue-light).png
diff --git a/packages/devextreme-scss/scss/widgets/material/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateBox/_index.scss
@@ -34,6 +34,10 @@
       width: auto;
     }
   }
+
+  > .dx-overlay-content:first-child {
+    overflow: visible;
+  }
 }
 
 .dx-datebox-datetime-time-side {