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

fix(datetime): datetime locale with h23 will respect max time range (#24610)

Browse Source 
Resolves #24588
This commit is contained in:
Sean Perkins
2022-01-20 12:47:06 -05:00
committed by GitHub
parent f295134624
commit 5925e7608e
3 changed files with 96 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -257,5 +257,35 @@ describe('generateTime()', () => {
expect(minutes.length).toEqual(60);
});
});
it('should respect the min & max bounds', () => {
const refValue = {
day: undefined,
month: undefined,
year: undefined,
hour: 20,
minute: 30
}
const minParts = {
day: undefined,
month: undefined,
year: undefined,
hour: 19,
minute: 30
}
const maxParts = {
day: undefined,
month: undefined,
year: undefined,
hour: 20,
minute: 40
};
const { hours } = generateTime(refValue, 'h23', minParts, maxParts);
expect(hours).toStrictEqual([19, 20]);
});
})
})

142
core/src/components/datetime/test/minmax/index.html
View File

@@ -1,89 +1,77 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime - Min/Max</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;
<head>
<meta charset="UTF-8">
<title>Datetime - Min/Max</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;
}
margin-top: 10px;
margin-left: 5px;
}
h2 {
font-size: 12px;
font-weight: normal;
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 - Min/Max</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Value inside Bounds</h2>
<ion-datetime
id="inside"
min="2021-09"
max="2021-10"
></ion-datetime>
</div>
<div class="grid-item">
<h2>Value Outside Bounds</h2>
<ion-datetime
id="outside"
min="2021-06-05"
max="2021-06-19"
value="2021-06-20"
></ion-datetime>
</div>
<div class="grid-item">
<h2>AM/PM Min/Max</h2>
<ion-datetime
presentation="time"
min="09:30"
max="14:50"
value="10:30"
></ion-datetime>
</div>
<div class="grid-item">
<h2>h23 Min</h2>
<ion-datetime
presentation="time"
hour-cycle="h23"
min="19:30"
value="20:30"
></ion-datetime>
</div>
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
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 - Min/Max</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Value inside Bounds</h2>
<ion-datetime id="inside" min="2021-09" max="2021-10"></ion-datetime>
</div>
</ion-content>
<div class="grid-item">
<h2>Value Outside Bounds</h2>
<ion-datetime id="outside" min="2021-06-05" max="2021-06-19" value="2021-06-20"></ion-datetime>
</div>
<div class="grid-item">
<h2>AM/PM Min/Max</h2>
<ion-datetime presentation="time" min="09:30" max="14:50" value="10:30"></ion-datetime>
</div>
<div class="grid-item">
<h2>h23 Min</h2>
<ion-datetime presentation="time" hour-cycle="h23" min="19:30" value="20:30"></ion-datetime>
</div>
<div class="grid-item">
<h2>locale: en-GB</h2>
<ion-datetime locale="en-GB" presentation="time" min="19:30" value="20:30" max="20:40"></ion-datetime>
</div>
</div>
</ion-content>
<script>
<script>
const datetime = document.querySelector('ion-datetime');
datetime.addEventListener('ionChange', (ev) => {
console.log('Change', ev.detail.value);
})
</script>
</ion-app>
</body>
</script>
</ion-app>
</body>
</html>

2
core/src/components/datetime/utils/data.ts
View File

@@ -219,7 +219,7 @@ export const generateTime = (
if (maxParts.hour !== undefined) {
processedHours = processedHours.filter(hour => {
const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
return convertedHour <= maxParts.hour!;
return (use24Hour ? hour : convertedHour) <= maxParts.hour!;
});
isPMAllowed = maxParts.hour >= 13;
}