Fill in empty dates with valid dates for date picker groups.

This builds on openwebwork#2348, and was requested by @Alex-Jordan in that pull
request (see openwebwork#2348 (review)).

This makes it so that if a date is not filled in, then it will be filled
by javascript with a date as needed to ensure it satisfies the usual
date requirements on open, reduced scoring, close, and answer dates.

The class value is taken into account for this when editing a set for
users.

This applies on both the problem set detail page and the user detail
page. This javascript is also used on the sets manager page when editing
set dates where this change does not apply, but it is designed to still
work without conflict there.

htdocs/js/DatePicker/datepicker.js

@@ -25,17 +25,35 @@
 
 		const groupRules = [
 			open_rule,
-			document.querySelector('input[id="' + name + '.due_date_id"]'),
-			document.querySelector('input[id="' + name + '.answer_date_id"]')
+			document.getElementById(`${name}.due_date_id`),
+			document.getElementById(`${name}.answer_date_id`)
 		];
 
-		const reduced_rule = document.querySelector('input[id="' + name + '.reduced_scoring_date_id"]');
+		const reduced_rule = document.getElementById(`${name}.reduced_scoring_date_id`);
 		if (reduced_rule) groupRules.splice(1, 0, reduced_rule);
 
+		// Compute the time difference between the current browser timezone and the course timezone.
+		// flatpickr gives the time in the browser's timezone, and this is used to adjust to the course timezone.
+		// Note that this is in seconds.
+		const timezoneAdjustment =
+			new Date(new Date().toLocaleString('en-US')).getTime() -
+			new Date(
+				new Date().toLocaleString('en-US', { timeZone: open_rule.dataset.timezone ?? 'America/New_York' })
+			).getTime();
+
+		const classValues = groupRules.map(
+			(rule) =>
+				new Date(
+					parseInt(document.getElementsByName(`${rule.name}.class_value`)[0]?.dataset.classValue || '0') *
+						1000 -
+						timezoneAdjustment
+				)
+		);
+
 		const update = () => {
 			for (let i = 1; i < groupRules.length; ++i) {
-				const prevFieldDate = groupRules[i - 1].parentNode._flatpickr.selectedDates[0];
-				const thisFieldDate = groupRules[i].parentNode._flatpickr.selectedDates[0];
+				const prevFieldDate = groupRules[i - 1]?.parentNode._flatpickr.selectedDates[0] || classValues[i - 1];
+				const thisFieldDate = groupRules[i]?.parentNode._flatpickr.selectedDates[0] || classValues[i];
 				if (prevFieldDate && thisFieldDate && prevFieldDate > thisFieldDate) {
 					groupRules[i].parentNode._flatpickr.setDate(prevFieldDate, true);
 				}
@@ -47,15 +65,6 @@
 
 			luxon.Settings.defaultLocale = rule.dataset.locale ?? 'en';
 
-			// Compute the time difference between the current browser timezone and the course timezone.
-			// flatpickr gives the time in the browser's timezone, and this is used to adjust to the course timezone.
-			// Note that this is in seconds.
-			const timezoneAdjustment =
-				new Date(new Date().toLocaleString('en-US')).getTime() -
-				new Date(
-					new Date().toLocaleString('en-US', { timeZone: rule.dataset.timezone ?? 'America/New_York' })
-				).getTime();
-
 			const fp = flatpickr(rule.parentNode, {
 				allowInput: true,
 				enableTime: true,

lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm

@@ -1015,7 +1015,8 @@ sub fieldHTML ($c, $userID, $setID, $problemID, $globalRecord, $userRecord, $fie
 				size              => $properties{size} || 5,
 				class             => 'form-control-plaintext form-control-sm',
 				'aria-labelledby' => "$recordType.$recordID.$field.label",
-				$field =~ /date/ || $field eq 'restricted_release' || $field eq 'source_file' ? (dir => 'ltr') : ()
+				$field =~ /date/ || $field eq 'restricted_release' || $field eq 'source_file' ? (dir => 'ltr') : (),
+				data => { class_value => $globalValue }
 			)
 			: ''
 		) if $forUsers;

templates/ContentGenerator/Instructor/UserDetail/set_date_table.html.ep

@@ -46,7 +46,8 @@
 						id => "set.$setID.$field.class_value", readonly => undef, dir => 'ltr',
 						class => 'form-control-plaintext form-control-sm w-auto',
 						size => 16,
-						defined $userRecord ? ('aria-labelledby' => "set.$setID.${field}_id") : () =%>
+						defined $userRecord ? ('aria-labelledby' => "set.$setID.${field}_id") : (),
+						data => { class_value => $globalRecord->$field } =%>
 				</td>
 			% }
 			% if (defined $userRecord) {