Date(Time)-Box, -Picker and -Calendar can dynamically be disabled now

jrief · jrief · commit 5896ec9bd06f · 2025-12-30T13:47:51.000+01:00
diff --git a/client/django-formset/Calendar.scss b/client/django-formset/Calendar.scss
@@ -1,5 +1,10 @@
 @import "colors";
 
+@mixin disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
 .dj-calendar {
 	background-color: var(--django-formset-background-color);
 	border: var(--border-width) var(--border-style) var(--border-color);
@@ -189,7 +194,7 @@
 					}
 
 					&[disabled] {
-						opacity: 0.5;
+						@include disabled;
 					}
 
 					&:not([disabled]):hover {
@@ -224,11 +229,20 @@
 [is="django-daterangecalendar"], [is="django-datetimerangecalendar"] {
 	& + .dj-calendar {
 		.sheet-body ul.monthdays {
-			grid-template-rows: repeat(6, 1fr);
+			grid-template-rows: repeat(6, 1fr);  // keeps height consistent across months
 		}
 	}
 }
 
+[is="django-datecalendar"], [is="django-datetimecalendar"],
+[is="django-daterangecalendar"], [is="django-datetimerangecalendar"],
+[is="django-datepicker"], [is="django-datetimepicker"],
+[is="django-daterangepicker"], [is="django-datetimerangepicker"] {
+	&[disabled] ~ .dj-calendar .sheet-body ul > li {
+		@include disabled;
+	}
+}
+
 // Calendar popup dialog
 [aria-haspopup="dialog"] + .dj-calendar {
 	width: max-content;
diff --git a/client/django-formset/Calendar.ts b/client/django-formset/Calendar.ts
@@ -202,19 +202,17 @@ export class CalendarSheet extends Widget {
 			if (this.minDate && date < this.minDate || this.maxDate && date > this.maxDate) {
 				elem.toggleAttribute('disabled', true);
 			}
-			if (!elem.hasAttribute('disabled')) {
-				elem.addEventListener('click', (event: Event) => {
-					if (event.target instanceof HTMLLIElement) {
-						this.setDate(event.target);
-						this.markSelectedDates();
-						if (!this.settings.withRange || this.dateRange[0] && this.dateRange[1]) {
-							this.settings.close();
-						}
+			elem.addEventListener('click', (event: Event) => {
+				if (event.target instanceof HTMLLIElement) {
+					this.setDate(event.target);
+					this.markSelectedDates();
+					if (!this.settings.withRange || this.dateRange[0] && this.dateRange[1]) {
+						this.settings.close();
 					}
-				}, {once: true});
-				if (this.settings.withRange) {
-					elem.addEventListener('mouseenter', this.hoverDateItem);
 				}
+			}, {once: true});
+			if (this.settings.withRange) {
+				elem.addEventListener('mouseenter', this.hoverDateItem);
 			}
 		});
 
@@ -234,15 +232,13 @@ export class CalendarSheet extends Widget {
 			if (this.element.querySelectorAll(`${selector} > li[data-date]:not([disabled])`).length === 0) {
 				elem.toggleAttribute('disabled', true);
 			}
-			if (!elem.hasAttribute('disabled')) {
-				elem.addEventListener('click', (event: Event) => {
-					if (event.target instanceof HTMLLIElement) {
-						this.selectHour(event.target);
-					}
-				});
-				if (this.settings.withRange) {
-					elem.addEventListener('mouseenter', this.hoverDateItem);
+			elem.addEventListener('click', (event: Event) => {
+				if (event.target instanceof HTMLLIElement) {
+					this.selectHour(event.target);
 				}
+			});
+			if (this.settings.withRange) {
+				elem.addEventListener('mouseenter', this.hoverDateItem);
 			}
 		});
 
@@ -258,11 +254,9 @@ export class CalendarSheet extends Widget {
 			if (this.minWeekDate && date < this.minWeekDate || this.maxWeekDate && date > this.maxWeekDate) {
 				elem.toggleAttribute('disabled', true);
 			}
-			if (!elem.hasAttribute('disabled')) {
-				elem.addEventListener('click', this.selectDay);
-				if (this.settings.withRange) {
-					elem.addEventListener('mouseenter', this.hoverDateItem);
-				}
+			elem.addEventListener('click', this.selectDay);
+			if (this.settings.withRange) {
+				elem.addEventListener('mouseenter', this.hoverDateItem);
 			}
 		});
 	}
@@ -275,11 +269,9 @@ export class CalendarSheet extends Widget {
 			if (this.minMonthDate && date < this.minMonthDate || this.maxMonthDate && date > this.maxMonthDate) {
 				elem.toggleAttribute('disabled', true);
 			}
-			if (!elem.hasAttribute('disabled')) {
-				elem.addEventListener('click', this.selectMonth);
-				if (this.settings.withRange) {
-					elem.addEventListener('mouseenter', this.hoverDateItem);
-				}
+			elem.addEventListener('click', this.selectMonth);
+			if (this.settings.withRange) {
+				elem.addEventListener('mouseenter', this.hoverDateItem);
 			}
 		});
 	}
@@ -292,11 +284,9 @@ export class CalendarSheet extends Widget {
 			if (this.minYearDate && date < this.minYearDate || this.maxYearDate && date > this.maxYearDate) {
 				elem.toggleAttribute('disabled', true);
 			}
-			if (!elem.hasAttribute('disabled')) {
-				elem.addEventListener('click', this.selectYear);
-				if (this.settings.withRange) {
-					elem.addEventListener('mouseenter', this.hoverDateItem);
-				}
+			elem.addEventListener('click', this.selectYear);
+			if (this.settings.withRange) {
+				elem.addEventListener('mouseenter', this.hoverDateItem);
 			}
 		});
 	}
@@ -711,7 +701,7 @@ export class CalendarSheet extends Widget {
 			await this.fetchCalendar(new Date(), ViewMode.weeks);
 			todayElem = this.element.querySelector(`li[data-date="${todayDateString}"]`);
 		}
-		if (todayElem && !todayElem.hasAttribute('disabled')) {
+		if (!this.settings.inputElement.disabled && todayElem && !todayElem.hasAttribute('disabled')) {
 			this.setDate(todayElem);
 			this.markSelectedDates();
 		}
@@ -891,7 +881,8 @@ export class CalendarSheet extends Widget {
 			}
 		}
 		inputElement.style.transition = '';
-		StyleHelpers.pushMediaQueryStyles(
+		StyleHelpers.replaceMediaQueryStyles(
+			-1,
 			sheet,
 			this.baseSelector,
 			{
diff --git a/client/django-formset/DateTime.scss b/client/django-formset/DateTime.scss
@@ -10,6 +10,7 @@
 		flex-direction: row-reverse;
 		flex-wrap: nowrap;
 		justify-content: flex-end;
+		background-color: var(--background-color);
 		border: var(--border-width) var(--border-style) var(--border-color);
 		border-radius: var(--border-radius);
 
diff --git a/client/django-formset/DateTime.ts b/client/django-formset/DateTime.ts
@@ -38,6 +38,7 @@ class DateTimeField extends Widget {
 	private hasFocus: HTMLElement|null = null;
 	private cleanup?: Function;
 	private isOpen: boolean = false;
+	private mediaStylesIndex: number = -1;
 	private static readonly simpleComponents = ['django-datefield', 'django-datepicker', 'django-daterangefield', 'django-daterangepicker']
 	private static readonly rangeComponents = ['django-daterangefield', 'django-daterangepicker', 'django-datetimerangefield', 'django-datetimerangepicker'];
 
@@ -218,7 +219,24 @@ class DateTimeField extends Widget {
 		});
 		document.addEventListener('click', this.handleClick);
 		document.addEventListener('keydown', this.handleKeypress);
-	}
+		const observer = new MutationObserver(this.attributesChanged);
+		observer.observe(this.inputElement, {attributes: true});
+	}
+
+	private attributesChanged = (mutations: MutationRecord[]) => {
+		if (mutations.find(m => m.attributeName === 'disabled')) {
+			this.inputFields.forEach(inputField => inputField.contentEditable = this.inputElement.disabled ? 'false' : 'true');
+			this.mediaStylesIndex = StyleHelpers.replaceMediaQueryStyles(
+				this.mediaStylesIndex,
+				this.styleSheet,
+				`${this.baseSelector} + [role="textbox"]`,
+				{
+					'--background-color': 'background-color',
+				},
+				this.inputElement,
+			);
+		}
+	};
 
 	private openCalendar() {
 		if (!this.calendarOpener)

Original file line number	Diff line number	Diff line change
`@@ -202,19 +202,17 @@ export class CalendarSheet extends Widget {`
`202`	`202`	`if (this.minDate && date < this.minDate \|\| this.maxDate && date > this.maxDate) {`
`203`	`203`	`elem.toggleAttribute('disabled', true);`
`204`	`204`	`}`
`205`		`- if (!elem.hasAttribute('disabled')) {`
`206`		`- elem.addEventListener('click', (event: Event) => {`
`207`		`- if (event.target instanceof HTMLLIElement) {`
`208`		`- this.setDate(event.target);`
`209`		`- this.markSelectedDates();`
`210`		`- if (!this.settings.withRange \|\| this.dateRange[0] && this.dateRange[1]) {`
`211`		`- this.settings.close();`
`212`		`- }`
	`205`	`+ elem.addEventListener('click', (event: Event) => {`
	`206`	`+ if (event.target instanceof HTMLLIElement) {`
	`207`	`+ this.setDate(event.target);`
	`208`	`+ this.markSelectedDates();`
	`209`	`+ if (!this.settings.withRange \|\| this.dateRange[0] && this.dateRange[1]) {`
	`210`	`+ this.settings.close();`
`213`	`211`	`}`
`214`		`- }, {once: true});`
`215`		`- if (this.settings.withRange) {`
`216`		`- elem.addEventListener('mouseenter', this.hoverDateItem);`
`217`	`212`	`}`
	`213`	`+ }, {once: true});`
	`214`	`+ if (this.settings.withRange) {`
	`215`	`+ elem.addEventListener('mouseenter', this.hoverDateItem);`
`218`	`216`	`}`
`219`	`217`	`});`
`220`	`218`
`@@ -234,15 +232,13 @@ export class CalendarSheet extends Widget {`
`234`	`232`	if (this.element.querySelectorAll(`${selector} > li[data-date]:not([disabled])`).length === 0) {
`235`	`233`	`elem.toggleAttribute('disabled', true);`
`236`	`234`	`}`
`237`		`- if (!elem.hasAttribute('disabled')) {`
`238`		`- elem.addEventListener('click', (event: Event) => {`
`239`		`- if (event.target instanceof HTMLLIElement) {`
`240`		`- this.selectHour(event.target);`
`241`		`- }`
`242`		`- });`
`243`		`- if (this.settings.withRange) {`
`244`		`- elem.addEventListener('mouseenter', this.hoverDateItem);`
	`235`	`+ elem.addEventListener('click', (event: Event) => {`
	`236`	`+ if (event.target instanceof HTMLLIElement) {`
	`237`	`+ this.selectHour(event.target);`
`245`	`238`	`}`
	`239`	`+ });`
	`240`	`+ if (this.settings.withRange) {`
	`241`	`+ elem.addEventListener('mouseenter', this.hoverDateItem);`
`246`	`242`	`}`
`247`	`243`	`});`
`248`	`244`
`@@ -258,11 +254,9 @@ export class CalendarSheet extends Widget {`
`258`	`254`	`if (this.minWeekDate && date < this.minWeekDate \|\| this.maxWeekDate && date > this.maxWeekDate) {`
`259`	`255`	`elem.toggleAttribute('disabled', true);`
`260`	`256`	`}`
`261`		`- if (!elem.hasAttribute('disabled')) {`
`262`		`- elem.addEventListener('click', this.selectDay);`
`263`		`- if (this.settings.withRange) {`
`264`		`- elem.addEventListener('mouseenter', this.hoverDateItem);`
`265`		`- }`
	`257`	`+ elem.addEventListener('click', this.selectDay);`
	`258`	`+ if (this.settings.withRange) {`
	`259`	`+ elem.addEventListener('mouseenter', this.hoverDateItem);`
`266`	`260`	`}`
`267`	`261`	`});`
`268`	`262`	`}`
`@@ -275,11 +269,9 @@ export class CalendarSheet extends Widget {`
`275`	`269`	`if (this.minMonthDate && date < this.minMonthDate \|\| this.maxMonthDate && date > this.maxMonthDate) {`
`276`	`270`	`elem.toggleAttribute('disabled', true);`
`277`	`271`	`}`
`278`		`- if (!elem.hasAttribute('disabled')) {`
`279`		`- elem.addEventListener('click', this.selectMonth);`
`280`		`- if (this.settings.withRange) {`
`281`		`- elem.addEventListener('mouseenter', this.hoverDateItem);`
`282`		`- }`
	`272`	`+ elem.addEventListener('click', this.selectMonth);`
	`273`	`+ if (this.settings.withRange) {`
	`274`	`+ elem.addEventListener('mouseenter', this.hoverDateItem);`
`283`	`275`	`}`
`284`	`276`	`});`
`285`	`277`	`}`
`@@ -292,11 +284,9 @@ export class CalendarSheet extends Widget {`
`292`	`284`	`if (this.minYearDate && date < this.minYearDate \|\| this.maxYearDate && date > this.maxYearDate) {`
`293`	`285`	`elem.toggleAttribute('disabled', true);`
`294`	`286`	`}`
`295`		`- if (!elem.hasAttribute('disabled')) {`
`296`		`- elem.addEventListener('click', this.selectYear);`
`297`		`- if (this.settings.withRange) {`
`298`		`- elem.addEventListener('mouseenter', this.hoverDateItem);`
`299`		`- }`
	`287`	`+ elem.addEventListener('click', this.selectYear);`
	`288`	`+ if (this.settings.withRange) {`
	`289`	`+ elem.addEventListener('mouseenter', this.hoverDateItem);`
`300`	`290`	`}`
`301`	`291`	`});`
`302`	`292`	`}`
`@@ -711,7 +701,7 @@ export class CalendarSheet extends Widget {`
`711`	`701`	`await this.fetchCalendar(new Date(), ViewMode.weeks);`
`712`	`702`	todayElem = this.element.querySelector(`li[data-date="${todayDateString}"]`);
`713`	`703`	`}`
`714`		`- if (todayElem && !todayElem.hasAttribute('disabled')) {`
	`704`	`+ if (!this.settings.inputElement.disabled && todayElem && !todayElem.hasAttribute('disabled')) {`
`715`	`705`	`this.setDate(todayElem);`
`716`	`706`	`this.markSelectedDates();`
`717`	`707`	`}`
`@@ -891,7 +881,8 @@ export class CalendarSheet extends Widget {`
`891`	`881`	`}`
`892`	`882`	`}`
`893`	`883`	`inputElement.style.transition = '';`
`894`		`- StyleHelpers.pushMediaQueryStyles(`
	`884`	`+ StyleHelpers.replaceMediaQueryStyles(`
	`885`	`+ -1,`
`895`	`886`	`sheet,`
`896`	`887`	`this.baseSelector,`
`897`	`888`	`{`