javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(datetime): add firstDayOfWeek property (#23692)

Browse Source 
resolves #23556

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
This commit is contained in:
Hans Krywalsky
2021-08-17 16:45:39 +02:00
committed by GitHub
parent bc4e8267aa
commit ea348f005a
15 changed files with 186 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/datetime/test/data.spec.ts
View File

@@ -30,6 +30,10 @@ describe('getDaysOfWeek()', () => {
it('should return Spanish narrow names given a locale and mode', () => {
expect(getDaysOfWeek('es-ES', 'md')).toEqual(['D', 'L', 'M', 'X', 'J', 'V', 'S']);
});
it('should return English short names given a locale, mode and startOfWeek', () => {
expect(getDaysOfWeek('en-US', 'ios', 1)).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
})
})
describe('generateTime()', () => {

15
core/src/components/datetime/test/first-day-of-week/e2e.ts Normal file
View File

@@ -0,0 +1,15 @@
import { newE2EPage } from '@stencil/core/testing';
test('first-day-of-week', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/first-day-of-week?ionic:_testing=true'
});
const screenshotCompares = [];
screenshotCompares.push(await page.compareScreenshot());
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
});

71
core/src/components/datetime/test/first-day-of-week/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime - First day of week</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(1, minmax(250px, 1fr));
grid-gap: 60px 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
ion-datetime {
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - First day of week</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Default</h2>
<ion-datetime first-day-of-week="1"></ion-datetime>
<ion-button onclick="increase()">Increase firstDayOfWeek</ion-button>
<div>
<span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
</div>
</div>
</div>
</ion-content>
</ion-app>
</body>
<script>
function increase() {
const datetime = document.querySelector('ion-datetime');
datetime.firstDayOfWeek = datetime.firstDayOfWeek + 1;
const span = document.getElementById('start-of-week');
span.innerText = datetime.firstDayOfWeek;
}
</script>
</html>