Skip to content

Commit 8c2d033

Browse files
JoaoFerreira-FrontEndJoaoFerreira-FrontEnd
committed
- fix focus of hidden day;
- create specific test page for showDaysOutsideCurrentMonth;
1 parent af7472b commit 8c2d033

File tree

3 files changed

+364
-3
lines changed

3 files changed

+364
-3
lines changed

‎core/src/components/datetime/datetime.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2373,6 +2373,11 @@ export class Datetime implements ComponentInterface {
23732373
return;
23742374
}
23752375

2376+
if(hiddenDay){
2377+
//the user selected a day outside the current month, let's not focus on this button since the month will be re-render;
2378+
this.el.blur();
2379+
}
2380+
23762381
this.setWorkingParts({
23772382
...this.workingParts,
23782383
month: _month,

‎core/src/components/datetime/test/custom/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
color: #8462d1;
9292
}
9393

94-
#custom-calendar-days::part(calendar-day):not(.calendar-day-hidden-day):focus {
94+
#custom-calendar-days::part(calendar-day):focus {
9595
background-color: rgb(154 209 98 / 0.2);
9696
box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
9797
}
@@ -200,8 +200,6 @@ <h2>Grid Style</h2>
200200

201201
return true;
202202
};
203-
204-
customDatetime.showDaysOutsideCurrentMonth = true
205203
</script>
206204
</body>
207205
</html>

‎core/src/components/datetime/test/showDaysOutsideCurrentMonth/index.html‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Datetime - Custom</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
8+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
9+
<script src="../../../../../scripts/testing/scripts.js"></script>
10+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
11+
<style>
12+
.grid {
13+
display: grid;
14+
grid-template-columns: repeat(3, minmax(250px, 1fr));
15+
grid-row-gap: 20px;
16+
grid-column-gap: 20px;
17+
}
18+
19+
h2 {
20+
font-size: 12px;
21+
font-weight: normal;
22+
23+
color: #6f7378;
24+
25+
margin-top: 10px;
26+
margin-left: 5px;
27+
}
28+
29+
@media screen and (max-width: 800px) {
30+
.grid {
31+
grid-template-columns: 1fr;
32+
padding: 0;
33+
}
34+
}
35+
36+
/*
37+
* Custom Datetime Time / Wheel Parts
38+
* -------------------------------------------
39+
*/
40+
41+
.custom-grid-wheel {
42+
--background: rgb(245, 235, 247);
43+
--background-rgb: 245, 235, 247;
44+
}
45+
46+
.custom-grid-wheel::part(time-button) {
47+
color: rgb(128, 30, 171);
48+
}
49+
50+
.custom-grid-wheel::part(time-button active) {
51+
background-color: rgb(248, 215, 255);
52+
}
53+
54+
.custom-grid-wheel {
55+
--wheel-highlight-background: rgb(218, 216, 255);
56+
--wheel-highlight-border-radius: 16px;
57+
--wheel-fade-background-rgb: 245, 235, 247;
58+
}
59+
60+
ion-picker {
61+
--highlight-background: rgb(218, 216, 255);
62+
--highlight-border-radius: 16px;
63+
--fade-background-rgb: 245, 235, 247;
64+
65+
background-color: rgb(245, 235, 247);
66+
}
67+
.custom-grid-wheel::part(wheel-item),
68+
ion-picker-column-option {
69+
color: rgb(255, 134, 154);
70+
}
71+
72+
.custom-grid-wheel::part(wheel-item active),
73+
ion-picker-column-option.option-active {
74+
color: rgb(128, 30, 171);
75+
}
76+
77+
/*
78+
* Custom Datetime Day Parts
79+
* -------------------------------------------
80+
*/
81+
82+
#custom-calendar-days::part(calendar-day) {
83+
background-color: #ffe2e6;
84+
85+
color: #da5296;
86+
87+
margin: 2px 0;
88+
}
89+
90+
#custom-calendar-days::part(calendar-day today) {
91+
color: #8462d1;
92+
}
93+
94+
#custom-calendar-days::part(calendar-day):not(.calendar-day-hidden-day):focus {
95+
background-color: rgb(154 209 98 / 0.2);
96+
box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
97+
}
98+
99+
#custom-calendar-days::part(calendar-day disabled) {
100+
background: rgba(0 0 0 / 0.2);
101+
color: black;
102+
}
103+
104+
/*
105+
* Custom Material Design Datetime Day Parts
106+
* -------------------------------------------
107+
*/
108+
109+
#custom-calendar-days.md::part(calendar-day active),
110+
#custom-calendar-days.md::part(calendar-day active):focus {
111+
background-color: #9ad162;
112+
border-color: #9ad162;
113+
color: #fff;
114+
}
115+
116+
#custom-calendar-days.md::part(calendar-day today) {
117+
border-color: #8462d1;
118+
}
119+
120+
/*
121+
* Custom iOS Datetime Day Parts
122+
* -------------------------------------------
123+
*/
124+
125+
#custom-calendar-days.ios::part(calendar-day active),
126+
#custom-calendar-days.ios::part(calendar-day active):focus {
127+
background-color: rgb(154 209 98 / 0.2);
128+
color: #9ad162;
129+
}
130+
</style>
131+
132+
<style>
133+
body {
134+
padding: 20px;
135+
}
136+
137+
ion-datetime {
138+
border: 1px solid black;
139+
}
140+
</style>
141+
</head>
142+
143+
<body>
144+
<ion-app>
145+
<ion-header translucent="true">
146+
<ion-toolbar>
147+
<ion-title>Datetime - ShowDaysOutsideCustomMonth</ion-title>
148+
</ion-toolbar>
149+
</ion-header>
150+
<ion-content class="ion-padding">
151+
<div class="grid">
152+
<div class="grid-item">
153+
<h2>Grid Style</h2>
154+
<ion-datetime id="custom-grid" value="2020-03-14T14:23:00.000Z" class="custom-grid-wheel"></ion-datetime>
155+
</div>
156+
<div class="grid-item">
157+
<h2>Wheel Style</h2>
158+
<ion-datetime
159+
id="custom-wheel"
160+
prefer-wheel="true"
161+
value="2020-03-14T14:23:00.000Z"
162+
class="custom-grid-wheel"
163+
></ion-datetime>
164+
</div>
165+
<div class="grid-item">
166+
<h2>Grid Style</h2>
167+
<ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
168+
</div>
169+
</div>
170+
171+
<div class="grid">
172+
<div class="grid-item">
173+
<h2>Disable Specific Date</h2>
174+
<ion-datetime id="specificDate" value="2021-10-01" showdaysoutsidecurrentmonth="true"></ion-datetime>
175+
</div>
176+
177+
<div class="grid-item">
178+
<h2>Disable Weekends</h2>
179+
<ion-datetime id="weekends" value="2021-10-01"></ion-datetime>
180+
</div>
181+
182+
<div class="grid-item">
183+
<h2>Disable Date Range</h2>
184+
<ion-datetime id="dateRange" value="2021-10-01"></ion-datetime>
185+
</div>
186+
187+
<div class="grid-item">
188+
<h2>Disable Month</h2>
189+
<ion-datetime id="month" value="2021-10-01"></ion-datetime>
190+
</div>
191+
192+
<div class="grid-item">
193+
<h2>Change firstDayOfWeek</h2>
194+
<ion-datetime id="firstDayOfWeek" first-day-of-week="1" value="2022-05-03"></ion-datetime>
195+
<button onclick="increase()">Increase firstDayOfWeek</button>
196+
<div>
197+
<span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
198+
</div>
199+
</div>
200+
</div>
201+
<div>
202+
<label for="presentation">Presentation</label>
203+
<select id="presentation" onchange="changePresentation(event)">
204+
<option value="date-time" selected>date-time</option>
205+
<option value="time-date">time-date</option>
206+
<option value="date">date</option>
207+
<option value="time">time</option>
208+
</select>
209+
<label for="size">Size</label>
210+
<select id="size" onchange="changeSize(event)">
211+
<option value="fixed" selected>fixed</option>
212+
<option value="cover">cover</option>
213+
</select>
214+
<br /><br />
215+
<ion-datetime id="display" value="2022-02-22T16:30:00"></ion-datetime>
216+
217+
</div>
218+
</ion-content>
219+
</ion-app>
220+
221+
<script>
222+
const customGrid = document.querySelector('#custom-grid');
223+
const customWheel = document.querySelector('#custom-wheel');
224+
const customDatetime = document.querySelector('#custom-calendar-days');
225+
226+
// Mock the current day to always have the same screenshots
227+
const mockToday = '2023-06-10T16:22';
228+
Date = class extends Date {
229+
constructor(...args) {
230+
if (args.length === 0) {
231+
super(mockToday);
232+
} else {
233+
super(...args);
234+
}
235+
}
236+
};
237+
238+
customDatetime.highlightedDates = [
239+
{
240+
date: '2023-06-02',
241+
textColor: 'purple',
242+
backgroundColor: 'pink',
243+
},
244+
{
245+
date: '2023-06-04',
246+
textColor: 'firebrick',
247+
backgroundColor: 'salmon',
248+
},
249+
{
250+
date: '2023-06-06',
251+
textColor: 'blue',
252+
backgroundColor: 'lightblue',
253+
},
254+
];
255+
256+
customDatetime.isDateEnabled = (date) => {
257+
if (date === '2023-06-22') {
258+
return false;
259+
}
260+
261+
return true;
262+
};
263+
customGrid.showDaysOutsideCurrentMonth = true;
264+
customWheel.showDaysOutsideCurrentMonth = true;
265+
customDatetime.showDaysOutsideCurrentMonth = true;
266+
267+
const specificDateDisabled = document.querySelector('#specificDate');
268+
specificDateDisabled.isDateEnabled = (dateIsoString) => {
269+
const date = new Date(dateIsoString);
270+
// Disables October 10, 2021.
271+
if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
272+
return false;
273+
}
274+
return true;
275+
};
276+
specificDateDisabled.showDaysOutsideCurrentMonth = true;
277+
278+
const weekendsDisabled = document.querySelector('#weekends');
279+
weekendsDisabled.isDateEnabled = (dateIsoString) => {
280+
const date = new Date(dateIsoString);
281+
// Disables Sunday and Saturday
282+
if (date.getUTCDay() === 0 || date.getUTCDay() === 6) {
283+
return false;
284+
}
285+
return true;
286+
};
287+
weekendsDisabled.showDaysOutsideCurrentMonth = true;
288+
289+
const dateRangeDisabled = document.querySelector('#dateRange');
290+
dateRangeDisabled.isDateEnabled = (dateIsoString) => {
291+
const date = new Date(dateIsoString);
292+
// Disables dates between October 10, 2021 and October 20, 2021.
293+
if (date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
294+
if (date.getUTCDate() >= 10 && date.getUTCDate() <= 20) {
295+
return false;
296+
}
297+
}
298+
return true;
299+
};
300+
dateRangeDisabled.showDaysOutsideCurrentMonth = true;
301+
302+
const monthDisabled = document.querySelector('#month');
303+
monthDisabled.isDateEnabled = (dateIsoString) => {
304+
const date = new Date(dateIsoString);
305+
// Disables October (every year)
306+
if (date.getUTCMonth() === 9) {
307+
return false;
308+
}
309+
return true;
310+
};
311+
monthDisabled.showDaysOutsideCurrentMonth = true;
312+
313+
const firstDayOfWeek = document.querySelector('#firstDayOfWeek');
314+
firstDayOfWeek.showDaysOutsideCurrentMonth = true;
315+
function increase() {
316+
firstDayOfWeek.firstDayOfWeek = firstDayOfWeek.firstDayOfWeek + 1;
317+
318+
const span = document.getElementById('start-of-week');
319+
span.innerText = firstDayOfWeek.firstDayOfWeek;
320+
}
321+
322+
const display = document.querySelector('#display');
323+
display.showDaysOutsideCurrentMonth = true;
324+
325+
const mutationObserver = new MutationObserver(() => {
326+
window.dispatchEvent(new CustomEvent('ionWorkingPartsDidChange'));
327+
});
328+
329+
const initCalendarMonthChangeObserver = async () => {
330+
if (!display.componentOnReady) return;
331+
await display.componentOnReady();
332+
333+
// We have to requestAnimationFrame to allow the display to render completely.
334+
requestAnimationFrame(() => {
335+
const calendarBody = display.shadowRoot.querySelector('.calendar-body');
336+
if (calendarBody) {
337+
mutationObserver.observe(calendarBody, {
338+
childList: true,
339+
subtree: true,
340+
});
341+
}
342+
});
343+
};
344+
345+
const changePresentation = (ev) => {
346+
mutationObserver.disconnect();
347+
display.presentation = ev.target.value;
348+
initCalendarMonthChangeObserver();
349+
};
350+
351+
const changeSize = (ev) => {
352+
display.size = ev.target.value;
353+
};
354+
355+
initCalendarMonthChangeObserver();
356+
</script>
357+
</body>
358+
</html>

0 commit comments

Comments
 (0)