@@ -175,6 +175,190 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
175175176176expect(backgroundColor).toBe('rgb(0, 0, 255)');
177177});
178+179+test('should be able to customize datetime header parts', async ({ page }, testInfo) => {
180+testInfo.annotations.push({
181+type: 'issue',
182+description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
183+});
184+185+await page.setContent(
186+`
187+ <style>
188+ ion-datetime::part(datetime-header) {
189+ background-color: orange;
190+ }
191+192+ ion-datetime::part(datetime-title) {
193+ background-color: pink;
194+ }
195+196+ ion-datetime::part(datetime-selected-date) {
197+ background-color: violet;
198+ }
199+ </style>
200+ <ion-datetime value="2020-03-14T14:23:00.000Z">
201+ <span slot="title">Select Date</span>
202+ </ion-datetime>
203+ `,
204+config
205+);
206+207+const datetime = page.locator('ion-datetime');
208+const header = datetime.locator('.datetime-header');
209+const title = datetime.locator('.datetime-title');
210+const selectedDate = datetime.locator('.datetime-selected-date');
211+212+const headerBackgroundColor = await header.evaluate((el) => {
213+return window.getComputedStyle(el).backgroundColor;
214+});
215+216+const titleBackgroundColor = await title.evaluate((el) => {
217+return window.getComputedStyle(el).backgroundColor;
218+});
219+220+const selectedDateBackgroundColor = await selectedDate.evaluate((el) => {
221+return window.getComputedStyle(el).backgroundColor;
222+});
223+224+expect(headerBackgroundColor).toBe('rgb(255, 165, 0)');
225+expect(titleBackgroundColor).toBe('rgb(255, 192, 203)');
226+expect(selectedDateBackgroundColor).toBe('rgb(238, 130, 238)');
227+});
228+229+test('should be able to customize calendar header part', async ({ page }) => {
230+await page.setContent(
231+`
232+ <style>
233+ ion-datetime::part(calendar-header) {
234+ background-color: orange;
235+ }
236+ </style>
237+ <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
238+ `,
239+config
240+);
241+242+const datetime = page.locator('ion-datetime');
243+const header = datetime.locator('.calendar-header');
244+245+const backgroundColor = await header.evaluate((el) => {
246+return window.getComputedStyle(el).backgroundColor;
247+});
248+249+expect(backgroundColor).toBe('rgb(255, 165, 0)');
250+});
251+252+test('should be able to customize month/year picker part', async ({ page }, testInfo) => {
253+testInfo.annotations.push({
254+type: 'issue',
255+description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
256+});
257+258+await page.setContent(
259+`
260+ <style>
261+ ion-datetime::part(month-year-button) {
262+ background-color: lightblue;
263+ }
264+ </style>
265+ <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
266+ `,
267+config
268+);
269+270+const datetime = page.locator('ion-datetime');
271+const monthYearButton = datetime.locator('.calendar-month-year-toggle');
272+273+const backgroundColor = await monthYearButton.evaluate((el) => {
274+return window.getComputedStyle(el).backgroundColor;
275+});
276+277+expect(backgroundColor).toBe('rgb(173, 216, 230)');
278+});
279+280+test('should be able to customize navigation button parts', async ({ page }, testInfo) => {
281+testInfo.annotations.push({
282+type: 'issue',
283+description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
284+});
285+286+await page.setContent(
287+`
288+ <style>
289+ ion-datetime::part(navigation-button) {
290+ background-color: firebrick;
291+ }
292+293+ ion-datetime::part(previous-button) {
294+ color: blue;
295+ }
296+297+ ion-datetime::part(next-button) {
298+ color: green;
299+ }
300+ </style>
301+ <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
302+ `,
303+config
304+);
305+306+const datetime = page.locator('ion-datetime');
307+const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
308+const nextButton = datetime.locator('.calendar-next-prev ion-button').last();
309+310+const prevBackgroundColor = await prevButton.evaluate((el) => {
311+return window.getComputedStyle(el).backgroundColor;
312+});
313+314+const prevColor = await prevButton.evaluate((el) => {
315+return window.getComputedStyle(el).color;
316+});
317+318+const nextBackgroundColor = await nextButton.evaluate((el) => {
319+return window.getComputedStyle(el).backgroundColor;
320+});
321+322+const nextColor = await nextButton.evaluate((el) => {
323+return window.getComputedStyle(el).color;
324+});
325+326+// Verify the navigation-button part applies the styles
327+expect(prevBackgroundColor).toBe('rgb(178, 34, 34)');
328+expect(nextBackgroundColor).toBe('rgb(178, 34, 34)');
329+// Verify the previous-button part applies the styles
330+expect(prevColor).toBe('rgb(0, 0, 255)');
331+// Verify the next-button part applies the styles
332+expect(nextColor).toBe('rgb(0, 128, 0)');
333+});
334+335+test('should be able to customize days of the week part', async ({ page }, testInfo) => {
336+testInfo.annotations.push({
337+type: 'issue',
338+description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
339+});
340+341+await page.setContent(
342+`
343+ <style>
344+ ion-datetime::part(calendar-days-of-week) {
345+ background-color: green;
346+ }
347+ </style>
348+ <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
349+ `,
350+config
351+);
352+353+const datetime = page.locator('ion-datetime');
354+const daysOfWeek = datetime.locator('.calendar-days-of-week');
355+356+const backgroundColor = await daysOfWeek.evaluate((el) => {
357+return window.getComputedStyle(el).backgroundColor;
358+});
359+360+expect(backgroundColor).toBe('rgb(0, 128, 0)');
361+});
178362});
179363});
180364