Add DateTimeRange input/picker/calendar

.deployment/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /web
 # install packages outside of PyPI
 RUN apt-get upgrade -y
 RUN apt-get install -y curl make
-RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash -
 RUN apt-get install -y nodejs npm
 RUN pip install --upgrade pip
 
@@ -16,9 +16,8 @@ COPY package-lock.json /web/package-lock.json
 RUN npm ci
 
 # install Python specific requirements
-RUN pip install django psycopg2-binary Pillow uWSGI docutils Sphinx sphinx-toolbox
+RUN pip install django psycopg2-binary Pillow uWSGI docutils Sphinx sphinx-toolbox furo
 RUN pip install https://github.com/jrief/django-sphinx-view/archive/refs/heads/main.zip
-RUN pip install https://github.com/jrief/furo/archive/refs/heads/json-build.zip
 
 # copy project relevant files into container
 ADD assets /web/assets

.github/workflows/tests.yml

@@ -4,17 +4,17 @@ on:
   push:
     branches:
       - main
-      - version_1
     paths-ignore:
       - '**.md'
       - '**.rst'
+      - '/docs/**'
   pull_request:
     branches:
       - main
-      - version_1
     paths-ignore:
       - '**.md'
       - '**.rst'
+      - '/docs/**'
 
 jobs:
   build:
@@ -23,10 +23,10 @@ jobs:
       matrix:
         python-version: ["3.9", "3.10", "3.11"]
         django-version: ["4.1.*", "4.2.*"]
-        node-version: ["16.x"]
+        node-version: ["18.x"]
         include:
           - build-client: "esbuild"
-          - build-client: "rollup"
+          - build-client: "esbuild"  # rollup is not working in NodeJS 18
             python-version: "3.10"
             django-version: "4.1.*"
 

CHANGELOG.md

@@ -1,5 +1,18 @@
 ## Changes
 
+1.2
+  * Add widgets `DatePicker`, `DateTextbox`, `DateCalendar`, `DateTimePicker`, `DateTimeTextbox`
+    and `DateTimeCalendar`. They can be used as alternative widgets to Django's `DateInput` and
+    `DateTimeInput` widgets.
+  * Add range fields `DateRangeField` and `DateTimeRangeField` which can be used in forms to query
+    for a date- or datetime range. With these two fields six more widgets are added to the library:
+    `DateRangeCalendar`, `DateRangeTextbox`, `DateRangePicker`, `DateTimeRangeCalendar`,
+    `DateTimeRangeTextbox` and `DateTimeRangePicker`.
+  * The calendar widget now supports 12 hours time format.
+  * Fix: In rare occasions, the styling of widgets has been loaded twice.
+  * Fix: Field choices declared as callables are now supported.
+  * Prepared rendering for Django-5.0.
+
 - 1.1.2
   * Drop support for Django-4.0.
 
@@ -9,7 +22,7 @@
 
 - 1.1
   * Form collections containing only empty fields won't be submitted. This applies to collections
-    added using `extra_siblings` as to collections added using the appropriate button.
+    added using `extra_siblings` as to collections added using the appropriate "Add <label>" button.
   * Fix problem when using MultiWidget widgets. Under some configurations an error was raised
     stating “Duplicate name 'xxx' on multiple input fields”.
 

client/django-formset.monolith.ts

@@ -5,10 +5,10 @@ import {StyleHelpers} from './django-formset/helpers';
 // remember to always reflect imports below here also in django-formset.ts
 import {DjangoSelectizeElement} from './django-formset/DjangoSelectize';
 import {SortableSelectElement} from './django-formset/SortableSelect';
-import {DualSelectorElement} from "./django-formset/DualSelector";
-import {RichTextAreaElement} from "./django-formset/RichtextArea";
-import {DjangoSlugElement} from "./django-formset/DjangoSlug";
-import {DatePickerElement, DateTimePickerElement} from "./django-formset/DateTimePicker";
+import {DualSelectorElement} from './django-formset/DualSelector';
+import {RichTextAreaElement} from './django-formset/RichtextArea';
+import {DjangoSlugElement} from './django-formset/DjangoSlug';
+import {DateFieldElement, DatePickerElement, DateTimeFieldElement, DateTimePickerElement} from './django-formset/DateTime';
 
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -25,10 +25,30 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	customElementNames.push('django-richtext');
 	window.customElements.define('django-slug', DjangoSlugElement, {extends: 'input'});
 	customElementNames.push('django-slug');
+	window.customElements.define('django-datefield', DateFieldElement, {extends: 'input'});
+	customElementNames.push('django-datefield');
+	window.customElements.define('django-datecalendar', DateFieldElement, {extends: 'input'});
+	customElementNames.push('django-datecalendar');
 	window.customElements.define('django-datepicker', DatePickerElement, {extends: 'input'});
 	customElementNames.push('django-datepicker');
+	window.customElements.define('django-datetimefield', DateTimeFieldElement, {extends: 'input'});
+	customElementNames.push('django-datetimefield');
+	window.customElements.define('django-datetimecalendar', DateFieldElement, {extends: 'input'});
+	customElementNames.push('django-datetimecalendar');
 	window.customElements.define('django-datetimepicker', DateTimePickerElement, {extends: 'input'});
 	customElementNames.push('django-datetimepicker');
+	window.customElements.define('django-daterangefield', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-daterangefield');
+	window.customElements.define('django-daterangecalendar', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-daterangecalendar');
+	window.customElements.define('django-daterangepicker', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-daterangepicker');
+	window.customElements.define('django-datetimerangefield', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-datetimerangefield');
+	window.customElements.define('django-datetimerangecalendar', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-datetimerangecalendar');
+	window.customElements.define('django-datetimerangepicker', DateTimePickerElement, {extends: 'input'});
+	customElementNames.push('django-datetimerangepicker');
 
 	const foundIds = new Set<string>();
 	document.querySelectorAll('django-formset [id]').forEach(element => {

client/django-formset.ts

@@ -67,20 +67,90 @@ window.addEventListener('DOMContentLoaded', (event) => {
 				}).catch(err => reject(err));
 			}));
 		}
+		if (fragmentRoot.querySelector('input[is="django-datefield"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateFieldElement}) => {
+					defineComponent(resolve, 'django-datefield', DateFieldElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-datecalendar"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/Calendar').then(({DateCalendarElement}) => {
+					defineComponent(resolve, 'django-datecalendar', DateCalendarElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
 		if (fragmentRoot.querySelector('input[is="django-datepicker"]')) {
 			promises.push(new Promise((resolve, reject) => {
-				import('./django-formset/DateTimePicker').then(({DatePickerElement}) => {
+				import('./django-formset/DateTime').then(({DatePickerElement}) => {
 					defineComponent(resolve, 'django-datepicker', DatePickerElement, {extends: 'input'});
 				}).catch(err => reject(err));
 			}));
 		}
+		if (fragmentRoot.querySelector('input[is="django-datetimefield"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateTimeFieldElement}) => {
+					defineComponent(resolve, 'django-datetimefield', DateTimeFieldElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-datetimecalendar"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/Calendar').then(({DateCalendarElement}) => {
+					defineComponent(resolve, 'django-datetimecalendar', DateCalendarElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
 		if (fragmentRoot.querySelector('input[is="django-datetimepicker"]')) {
 			promises.push(new Promise((resolve, reject) => {
-				import('./django-formset/DateTimePicker').then(({DateTimePickerElement}) => {
+				import('./django-formset/DateTime').then(({DateTimePickerElement}) => {
 					defineComponent(resolve, 'django-datetimepicker', DateTimePickerElement, {extends: 'input'});
 				}).catch(err => reject(err));
 			}));
 		}
+		if (fragmentRoot.querySelector('input[is="django-daterangefield"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateRangeFieldElement}) => {
+					defineComponent(resolve, 'django-daterangefield', DateRangeFieldElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-daterangecalendar"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/Calendar').then(({DateCalendarElement}) => {
+					defineComponent(resolve, 'django-daterangecalendar', DateCalendarElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-daterangepicker"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateRangePickerElement}) => {
+					defineComponent(resolve, 'django-daterangepicker', DateRangePickerElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-datetimerangefield"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateTimeRangeFieldElement}) => {
+					defineComponent(resolve, 'django-datetimerangefield', DateTimeRangeFieldElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-datetimerangecalendar"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/Calendar').then(({DateCalendarElement}) => {
+					defineComponent(resolve, 'django-datetimerangecalendar', DateCalendarElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
+		if (fragmentRoot.querySelector('input[is="django-datetimerangepicker"]')) {
+			promises.push(new Promise((resolve, reject) => {
+				import('./django-formset/DateTime').then(({DateTimeRangePickerElement}) => {
+					defineComponent(resolve, 'django-datetimerangepicker', DateTimeRangePickerElement, {extends: 'input'});
+				}).catch(err => reject(err));
+			}));
+		}
 	}
 
 	document.querySelectorAll('template.empty-collection').forEach(element => {