diff --git a/e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png
index aa12c3868302..b12a725bed36 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/dateBox.ts b/e2e/testcafe-devextreme/tests/editors/dateBox/dateBox.ts
index bab5546588f5..211efcf97aee 100644
--- 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/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-blue-light).png
new file mode 100644
index 000000000000..e14d39c9cce1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (generic-light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (generic-light).png
new file mode 100644
index 000000000000..f9ccbf76acc6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (material-blue-light).png
new file mode 100644
index 000000000000..11d383df0305
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (material-blue-light).png
index 49daa374466f..d415c73860f4 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (material-blue-light).png
index 445effb4006b..546077a3adc9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png
index 90d3508d859e..46155596a3ff 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (material-blue-light).png
index 3b5beece1759..0c517009ede2 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (material-blue-light).png
index 188e53812386..f548c8d9c830 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (material-blue-light).png
index d072dd273a9f..2b48996a99bd 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png
index 72a42596c2fd..710ffc1b980c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (material-blue-light).png
index 3fec2e8d41b3..4c56a5e9c477 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view, rtl (material-blue-light).png
index 64188e3ddc36..7ea8df0d7e3f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (material-blue-light).png
index cd8128ba9ef7..adc17c2e1499 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view, rtl (material-blue-light).png
index 7600993a19f0..a33a63e8af0a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (material-blue-light).png
index 996c6cfb2d0a..a3772179f664 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png
index 71a5cb871bbd..a3937e346ddc 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (material-blue-light).png
index 7ee72d46e14b..c10b1679361f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row, rtl (material-blue-light).png
index 8ae1505416c7..5b4b73f4451a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (material-blue-light).png
index 93b501ccf48e..237b7543f4f0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row, rtl (material-blue-light).png
index ce58270b82ef..4bd8d69960fd 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (material-blue-light).png
index 2f1337299aa1..2bb9402eb54d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row, rtl (material-blue-light).png
index 04761f72fa5e..866c1dd1044a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (material-blue-light).png
index ba9c7406c625..2cc84c1b348c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row, rtl (material-blue-light).png
index 49d74c53b3f8..e124e6fc37d5 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (material-blue-light).png
index b151e7cd41e9..684332257799 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row, rtl (material-blue-light).png
index 5217fad1cdf1..6784b3cc0630 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (material-blue-light).png
index 490a0ffbe28d..63041cee9301 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row, rtl (material-blue-light).png
index f026abac3d06..7dce762eb5df 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (material-blue-light).png
index 12c23346142a..613eba73fec9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png
index cb8ae8c02504..e300a7db1f69 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (material-blue-light).png
index d724cfedc5a4..1a6950b1163b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row, rtl (material-blue-light).png
index ab409d09d1ef..48a31e3469aa 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (material-blue-light).png
index 63c24d976cca..aae0ef0e5ddc 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row, rtl (material-blue-light).png
index 2f4936822fdc..c1d058bc76ce 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (material-blue-light).png
index 07d0d579f287..3fa530178c3d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row, rtl (material-blue-light).png
index 49d9f23e285f..21b8a23fe95a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (material-blue-light).png
index 7bcbedbcbd08..652614f68233 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row, rtl (material-blue-light).png
index b25feffeefde..3face94b1f61 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (material-blue-light).png
index a498ad82a6a9..54c247d46f9e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png
index 779a2ed98a4d..5c7badc312bb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (material-blue-light).png
index bc705b64911b..149e99b3063f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row, rtl (material-blue-light).png
index 0c2cb1136a8c..28105f021608 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (material-blue-light).png
index a2018b181a8f..2eccbd263d64 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row, rtl (material-blue-light).png
index 92cfc3887035..6cde9756a70d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (material-blue-light).png
index 7b55ef0e0879..3fadf08d6624 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row, rtl (material-blue-light).png
index b24a68739220..f579274baf01 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (material-blue-light).png
index 2c17e08be7f6..3156f8f1abac 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row, rtl (material-blue-light).png
index 4c236551fff3..1da1afd0aca7 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (material-blue-light).png
index 475bf7241311..1167b2e48765 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view, rtl (material-blue-light).png
index 0f8c65ba37bc..25e9d3c1bf30 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (material-blue-light).png
index ab06ac3b503f..e5048a5bbc3b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view, rtl (material-blue-light).png
index 21bc7156a288..bff191ebff3b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view, rtl (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (material-blue-light).png
index c909738289c5..2cbc2bd98ec0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row, rtl (material-blue-light).png
index 0df7b9f0a653..f2c2a7945717 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row, rtl (material-blue-light).png differ
diff --git a/packages/devextreme-scss/scss/widgets/material/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/dateBox/_index.scss
index 7572451b7d1c..952d9c9a7a5f 100644
--- 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 {