Fix datetime fields.

Author: dereuromark

templates/Admin/QueuedJobs/edit.php

@@ -18,9 +18,9 @@
 			<div class="card-body">
 				<?= $this->Form->create($queuedJob) ?>
 				<?= $this->Form->control('notbefore', [
-					'type' => 'datetime-local',
-					'value' => $queuedJob->notbefore?->format('Y-m-d\TH:i'),
-					'class' => 'form-control',
+					'type' => 'text',
+					'value' => $queuedJob->notbefore?->format('Y-m-d H:i'),
+					'class' => 'form-control flatpickr-datetime',
 				]) ?>
 				<?= $this->Form->control('priority', ['class' => 'form-control']) ?>
 				<div class="mt-3">

templates/Admin/QueuedJobs/test.php

@@ -25,9 +25,9 @@
 				</div>
 
 				<?= $this->Form->control('notbefore', [
-					'type' => 'datetime-local',
-					'value' => (new \Cake\I18n\DateTime())->addMinutes(5)->format('Y-m-d\TH:i'),
-					'class' => 'form-control',
+					'type' => 'text',
+					'value' => (new \Cake\I18n\DateTime())->addMinutes(5)->format('Y-m-d H:i'),
+					'class' => 'form-control flatpickr-datetime',
 					'label' => __d('queue', 'Schedule For (Not Before)'),
 				]) ?>
 

templates/layout/queue.php

@@ -31,6 +31,10 @@
 	<!-- Chart.js for stats page -->
 	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 
+	<!-- Flatpickr for datetime inputs -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
+	<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
+
 	<style>
 		:root {
 			--queue-primary: #0d6efd;
@@ -394,9 +398,35 @@
 		<!-- Main Content -->
 		<main class="queue-main flex-grow-1">
 			<!-- Flash Messages -->
-			<div class="queue-flash">
-				<?= $this->Flash->render() ?>
-			</div>
+			<?php
+			$flashMessages = $this->getRequest()->getSession()->consume('Flash.flash');
+			if ($flashMessages) {
+				echo '<div class="queue-flash">';
+				foreach ($flashMessages as $flash) {
+					$element = $flash['element'] ?? 'flash/default';
+					$alertClass = match ($element) {
+						'flash/success' => 'alert-success',
+						'flash/error' => 'alert-danger',
+						'flash/warning' => 'alert-warning',
+						default => 'alert-info',
+					};
+					$icon = match ($element) {
+						'flash/success' => 'fa-check-circle',
+						'flash/error' => 'fa-exclamation-circle',
+						'flash/warning' => 'fa-exclamation-triangle',
+						default => 'fa-info-circle',
+					};
+					?>
+					<div class="alert <?= $alertClass ?> alert-dismissible fade show" role="alert">
+						<i class="fas <?= $icon ?> me-2"></i>
+						<?= h($flash['message']) ?>
+						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+					</div>
+					<?php
+				}
+				echo '</div>';
+			}
+			?>
 
 			<?= $this->fetch('content') ?>
 		</main>
@@ -426,6 +456,18 @@
 				return new bootstrap.Tooltip(tooltipTriggerEl);
 			});
 
+			// Initialize flatpickr datetime inputs with D M Y display format
+			document.querySelectorAll('.flatpickr-datetime').forEach(function(el) {
+				flatpickr(el, {
+					enableTime: true,
+					dateFormat: 'Y-m-d H:i',
+					altInput: true,
+					altFormat: 'd M Y H:i',
+					time_24hr: true,
+					allowInput: true,
+				});
+			});
+
 			// Confirmation dialogs for postLink forms
 			document.querySelectorAll('form[data-confirm-message]').forEach(function(form) {
 				form.addEventListener('submit', function(e) {