javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): hide footer when month-year picker is open (#25205)

Browse Source
This commit is contained in:
Amanda Johnston
2022-04-29 14:29:30 -05:00
committed by GitHub
parent ad94e872bd
commit aa5e1b9621
4 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/datetime/datetime.scss
View File

@ -153,6 +153,10 @@
} }
} }
:host(.month-year-picker-open) .datetime-footer {
display: none;
}
:host(.datetime-readonly), :host(.datetime-readonly),
:host(.datetime-disabled) { :host(.datetime-disabled) {
pointer-events: none; pointer-events: none;

2
core/src/components/datetime/datetime.tsx
View File

@ -1763,6 +1763,7 @@ export class Datetime implements ComponentInterface {
const isMonthAndYearPresentation = const isMonthAndYearPresentation =
presentation === 'year' || presentation === 'month' || presentation === 'month-year'; presentation === 'year' || presentation === 'month' || presentation === 'month-year';
const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation; const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
renderHiddenInput(true, el, name, value, disabled); renderHiddenInput(true, el, name, value, disabled);
@ -1778,6 +1779,7 @@ export class Datetime implements ComponentInterface {
['datetime-readonly']: readonly, ['datetime-readonly']: readonly,
['datetime-disabled']: disabled, ['datetime-disabled']: disabled,
'show-month-and-year': shouldShowMonthAndYear, 'show-month-and-year': shouldShowMonthAndYear,
'month-year-picker-open': monthYearPickerOpen,
[`datetime-presentation-${presentation}`]: true, [`datetime-presentation-${presentation}`]: true,
[`datetime-size-${size}`]: true, [`datetime-size-${size}`]: true,
}), }),

23
core/src/components/datetime/test/month-year-picker/datetime.e2e.ts Normal file
View File

@ -0,0 +1,23 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('datetime: month-year picker', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/datetime/test/month-year-picker');
});
test('should hide the footer when picker is open', async ({ page }) => {
const datetimeFooter = page.locator('#date-time .datetime-footer');
expect(datetimeFooter).toBeVisible();
const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
await pickerButton.click();
await page.waitForChanges();
expect(datetimeFooter).not.toBeVisible();
});
test('should not hide the footer on month-year presentation', async ({ page }) => {
const monthyearFooter = page.locator('#month-year .datetime-footer');
expect(monthyearFooter).toBeVisible();
});
});

62
core/src/components/datetime/test/month-year-picker/index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Datetime - Month-Year Picker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(250px, 1fr));
grid-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Month-Year Picker</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Default Presentation</h2>
<ion-datetime
id="date-time"
value="2021-10-01T10:18"
locale="en-US"
show-default-buttons="true"
></ion-datetime>
</div>
<div class="grid-item">
<h2>Month-Year Presentation</h2>
<ion-datetime
id="month-year"
presentation="month-year"
value="2021-10-01T10:18"
locale="en-US"
show-default-buttons="true"
></ion-datetime>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>