diff --git a/core/api.txt b/core/api.txt index 866f713e28..cae05be7db 100644 --- a/core/api.txt +++ b/core/api.txt @@ -430,6 +430,7 @@ ion-datetime,css-prop,--wheel-fade-background-rgb ion-datetime,css-prop,--wheel-highlight-background ion-datetime,part,calendar-day ion-datetime,part,calendar-day active +ion-datetime,part,calendar-day disabled ion-datetime,part,calendar-day today ion-datetime,part,month-year-button ion-datetime,part,time-button diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index acbd124e9d..d0b596d67c 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -90,6 +90,7 @@ import { * calendar. * @part calendar-day active - The currently selected calendar day. * @part calendar-day today - The calendar day that contains the current day. + * @part calendar-day disabled - The calendar day that is disabled. */ @Component({ tag: 'ion-datetime', @@ -2126,7 +2127,9 @@ export class Datetime implements ComponentInterface { // "Filler days" at the beginning of the grid should not get the calendar day // CSS parts added to them if (!isCalendarPadding) { - dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`; + dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${ + isCalDayDisabled ? ' disabled' : '' + }`; } return ( diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png index 8468868363..72f920c6bf 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png index c489c8cc28..de18f3e5e5 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png index 5a6b7753e7..481a43feb4 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Chrome-linux.png index a76d6f3ec2..3b04e3bf1b 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Firefox-linux.png index 53a74c74bf..1eca3d918b 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Safari-linux.png index d9b6664e93..bb10cc524f 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png index a218889e2f..a5e75a33bc 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png index f50d4b34d3..f840bdf7e2 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png index ca087afff9..93de791a50 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Chrome-linux.png index 08ce6a48b7..8a374f429d 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png index 2fcb1ca12b..b5883c2dc7 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Safari-linux.png index 740bf512d4..a3441c102c 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png index 062446e6eb..da66eea8ba 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png index 1729a0d34a..936a496a77 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png index 39a6c581db..63db256896 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png index b8a8824184..fb3fccde48 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png index 5116f506ab..d0a468a1e9 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Safari-linux.png index 35ae2875de..4145cbb8cc 100644 Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index f90cb604bb..f6912ed8be 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -99,6 +99,11 @@ box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); } + #custom-calendar-days::part(calendar-day disabled) { + background: rgba(0 0 0 / 0.2); + color: black; + } + /* * Custom Material Design Datetime Day Parts * ------------------------------------------- @@ -190,6 +195,14 @@ backgroundColor: 'lightblue', }, ]; + + customDatetime.isDateEnabled = (date) => { + if (date === '2023-06-22') { + return false; + } + + return true; + };