diff --git a/tpl/Admin/Configuration/data_cleanup.tpl b/tpl/Admin/Configuration/data_cleanup.tpl
index 963e3fd35..2defb66e4 100644
--- a/tpl/Admin/Configuration/data_cleanup.tpl
+++ b/tpl/Admin/Configuration/data_cleanup.tpl
@@ -1,4 +1,4 @@
-{include file='globalheader.tpl' }
+{include file='globalheader.tpl'}
 
 <div id="page-data-cleanup" class="admin-page">
 
@@ -13,7 +13,7 @@
                         <div class="d-flex align-items-start">
                             <i class="bi bi-calendar-check fs-5 link-primary mt-1 me-2"></i>
                             <div>
-                                <h6 class="mb-0 d-inline">{translate key=Reservations}
+                                <h6 class="mb-0 d-block">{translate key=Reservations}
                                     <span class="badge bg-primary ms-2">{$ReservationCount}</span>
                                 </h6>
                                 <div class="text-muted small">{translate key=DeleteReservationsBefore}</div>
@@ -23,10 +23,7 @@
                     <div class="col-12 col-md-5">
                         <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
                             <div class="flex-grow-1">
-                                <input type="date" id="reservationDeleteDate" class="form-control form-control-sm"
-                                    value="{formatdate date=$DeleteDate format='Y-m-d'}" />
-                                <input type="hidden" id="formattedReservationDeleteDate"
-                                    value="{formatdate date=$DeleteDate key=system}" />
+                                <input type="text" id="reservationDeleteDate" class="form-control form-control-sm" />
                             </div>
                             <div style="min-width: 120px;">
                                 {delete_button id='deleteReservations' class='btn-sm w-100'}
@@ -43,7 +40,7 @@
                         <div class="d-flex align-items-start">
                             <i class="bi bi-trash fs-5 text-warning mt-1 me-2"></i>
                             <div>
-                                <h6 class="mb-0 d-inline">{translate key=DeletedReservations}
+                                <h6 class="mb-0 d-block">{translate key=DeletedReservations}
                                     <span class="badge bg-warning text-dark ms-2">{$DeletedReservationCount}</span>
                                 </h6>
                                 <div class="text-muted small">{translate key=PermanentlyPurgeAllDeletedReservations}
@@ -52,7 +49,7 @@
                         </div>
                     </div>
                     <div class="col-12 col-md-5 text-md-end">
-                        <button id="purgeReservations" type="button" class="btn btn-sm btn-warning w-100 w-md-auto">
+                        <button id="purgeReservations" type="button" class="btn btn-sm btn-warning w-100">
                             <i class="bi bi-eraser me-1"></i>{translate key=Purge}
                         </button>
                     </div>
@@ -66,7 +63,7 @@
                         <div class="d-flex align-items-start">
                             <i class="bi bi-clock-history fs-5 link-primary mt-1 me-2"></i>
                             <div>
-                                <h6 class="mb-0 d-inline">{translate key=ManageBlackouts}
+                                <h6 class="mb-0 d-block">{translate key=ManageBlackouts}
                                     <span class="badge bg-primary ms-2">{$BlackoutsCount}</span>
                                 </h6>
                                 <div class="text-muted small">{translate key=DeleteBlackoutsBefore}</div>
@@ -76,10 +73,7 @@
                     <div class="col-12 col-md-5">
                         <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
                             <div class="flex-grow-1">
-                                <input type="date" id="blackoutDeleteDate" class="form-control form-control-sm"
-                                    value="{formatdate date=$DeleteDate format='Y-m-d'}" />
-                                <input type="hidden" id="formattedBlackoutDeleteDate"
-                                    value="{formatdate date=$DeleteDate key=system}" />
+                                <input type="text" id="blackoutDeleteDate" class="form-control form-control-sm" />
                             </div>
                             <div style="min-width: 120px;">
                                 {delete_button id='deleteBlackouts' class='btn-sm w-100'}
@@ -96,7 +90,7 @@
                         <div class="d-flex align-items-start">
                             <i class="bi bi-person-x fs-5 link-primary mt-1 me-2"></i>
                             <div>
-                                <h6 class="mb-0 d-inline">{translate key=Users}
+                                <h6 class="mb-0 d-block">{translate key=Users}
                                     <span class="badge bg-primary ms-2">{$UserCount}</span>
                                 </h6>
                                 <div class="text-muted small">{translate key=PermanentlyDeleteUsers}</div>
@@ -106,10 +100,7 @@
                     <div class="col-12 col-md-5">
                         <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2">
                             <div class="flex-grow-1">
-                                <input type="date" id="userDeleteDate" class="form-control form-control-sm"
-                                    value="{formatdate date=$DeleteDate format='Y-m-d'}" />
-                                <input type="hidden" id="formattedUserDeleteDate"
-                                    value="{formatdate date=$DeleteDate key=system}" />
+                                <input type="text" id="userDeleteDate" class="form-control form-control-sm" />
                             </div>
                             <div style="min-width: 120px;">
                                 {delete_button id='deleteUsers' class='btn-sm w-100'}
@@ -239,38 +230,37 @@
 </div>
 
 {include file="javascript-includes.tpl"}
-{jsfile src="js/moment.min.js"}
 {jsfile src="ajax-helpers.js"}
 
-{control type="DatePickerSetupControl" ControlId="reservationDeleteDate" AltId="formattedReservationDeleteDate"}
-{control type="DatePickerSetupControl" ControlId="blackoutDeleteDate" AltId="formattedBlackoutDeleteDate"}
-{control type="DatePickerSetupControl" ControlId="userDeleteDate" AltId="formattedUserDeleteDate"}
+{control type="DatePickerSetupControl" ControlId="reservationDeleteDate" DefaultDate=$DeleteDate}
+{control type="DatePickerSetupControl" ControlId="blackoutDeleteDate" DefaultDate=$DeleteDate}
+{control type="DatePickerSetupControl" ControlId="userDeleteDate" DefaultDate=$DeleteDate}
 
 <script type="text/javascript">
-    $(document).ready(function() {
-        $('#deleteReservations').click(function(e) {
-            $('#formDeleteReservationDate').val($('#formattedReservationDeleteDate').val());
-            ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getReservationCount&date=' + $('#formattedReservationDeleteDate').val(), null, function (data) {
+    document.addEventListener('DOMContentLoaded', function() {
+        document.getElementById('deleteReservations').addEventListener('click', function(e) {
+            $('#formDeleteReservationDate').val($('#reservationDeleteDate').val());
+            ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getReservationCount&date=' + $('#reservationDeleteDate').val(), null, function (data) {
             $('#deleteReservationCount').text(data.count);
             $('#deleteReservationsDialog').modal('show');
         })
     });
 
-    $('#purgeReservations').click(function(e) {
+    document.getElementById('purgeReservations').addEventListener('click', function(e) {
         $('#purgeReservationsDialog').modal('show');
     });
 
-    $('#deleteBlackouts').click(function(e) {
-    $('#formDeleteBlackoutDate').val($('#formattedBlackoutDeleteDate').val());
-    ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getBlackoutCount&date=' + $('#formattedBlackoutDeleteDate').val(), null, function (data) {
+    document.getElementById('deleteBlackouts').addEventListener('click', function(e) {
+    $('#formDeleteBlackoutDate').val($('#blackoutDeleteDate').val());
+    ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getBlackoutCount&date=' + $('#blackoutDeleteDate').val(), null, function (data) {
     $('#deleteBlackoutCount').text(data.count);
     $('#deleteBlackoutDialog').modal('show');
     })
     });
 
-    $('#deleteUsers').click(function(e) {
-    $('#formDeleteUserDate').val($('#formattedUserDeleteDate').val());
-    ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getUserCount&date=' + $('#formattedUserDeleteDate').val(), null, function (data) {
+    document.getElementById('deleteUsers').addEventListener('click', function(e) {
+    $('#formDeleteUserDate').val($('#userDeleteDate').val());
+    ajaxGet('{$smarty.server.SCRIPT_NAME}?dr=getUserCount&date=' + $('#userDeleteDate').val(), null, function (data) {
     $('#deleteUserCount').text(data.count);
     $('#deleteUsersDialog').modal('show');
     })