diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 7507681e0d9..7935d69f441 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -11,7 +11,7 @@
:host(.datetime-presentation-date-time),
:host(.datetime-presentation-time-date),
:host(.datetime-presentation-date) {
- min-height: 300px;
+ min-height: 350px;
}
// Header
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index c5e5c6c26a0..a5ea17f4cd8 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -19,19 +19,14 @@
overflow: hidden;
}
-:host(.datetime-presentation-date-time),
-:host(.datetime-presentation-time-date),
-:host(.datetime-presentation-date) {
- height: 100%;
-}
-
:host(.datetime-size-fixed) {
- width: 350px;
+ width: auto;
+ max-width: 350px;
+ height: auto;
}
:host(.datetime-size-cover) {
width: 100%;
- min-width: 350px;
}
:host .calendar-body,
diff --git a/core/src/components/datetime/test/display/e2e.ts b/core/src/components/datetime/test/display/e2e.ts
new file mode 100644
index 00000000000..e763b6b3407
--- /dev/null
+++ b/core/src/components/datetime/test/display/e2e.ts
@@ -0,0 +1,54 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('display', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/datetime/test/display?ionic:_testing=true'
+ });
+
+ const screenshotCompares = [];
+
+ await page.select('#presentation', 'date-time');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'time-date');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'time');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'date');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#size', 'cover');
+ await page.select('#presentation', 'date-time');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'time-date');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'time');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ await page.select('#presentation', 'date');
+ await page.waitForChanges();
+
+ screenshotCompares.push(await page.compareScreenshot());
+
+ for (const screenshotCompare of screenshotCompares) {
+ expect(screenshotCompare).toMatchScreenshot();
+ }
+});
diff --git a/core/src/components/datetime/test/display/index.html b/core/src/components/datetime/test/display/index.html
new file mode 100644
index 00000000000..a69f6a91367
--- /dev/null
+++ b/core/src/components/datetime/test/display/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Datetime - Standalone
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+