Replace moment date format with vanilla JS

resources/assets/js/date.js

@@ -0,0 +1,26 @@
+/**
+ * Formats a Date to HH:MM, e.g. 09:23 or 13:37
+ *
+ * @param {Date} date
+ * @returns {string|undefined} Formatted time or undefined for non-Date
+ */
+export const formatTime = (date) => {
+    if (!date instanceof Date) return;
+
+    return String(date.getHours()).padStart(2, '0') + ':'
+        + String(date.getMinutes()).padStart(2, '0');
+}
+
+/**
+ * Formats a Date to YYYY-MM-DD, e.g. 2023-05-18
+ *
+ * @param {Date} date
+ * @returns {string|undefined} Formatted date or undefined for non-Date
+ */
+export const formatDay = (date) => {
+    if (!date instanceof Date) return;
+
+    return String(date.getFullYear()) + '-'
+        + String(date.getMonth() + 1).padStart(2, '0') + '-'
+        + String(date.getDate()).padStart(2, '0');
+}

resources/assets/js/forms.js

@@ -1,5 +1,5 @@
-const moment = require('moment');
 require('select2')
+import { formatDay, formatTime } from "./date";
 
 /**
  * Sets all checkboxes to the wanted state
@@ -26,25 +26,25 @@ global.checkOwnTypes = (id, shiftsList) => {
 };
 
 /**
- * @param {moment} date
+ * Sets the values of the input fields with the IDs to from/to:
- */
+ * - date portion of from → start_day
-global.formatDay = (date) => {
+ * - time portion of from → start_time
-    return date.format('YYYY-MM-DD');
+ * - date portion of to → end_day
-};
+ * - time portion of to → end_time
-
+ *
-/**
+ * @param {Date} from
- * @param {moment} date
+ * @param {Date} to
- */
-global.formatTime = (date) => {
-    return date.format('HH:mm');
-};
-
-/**
- * @param {moment} from
- * @param {moment} to
  */
 global.setInput = (from, to) => {
-    var fromDay = $('#start_day'), fromTime = $('#start_time'), toDay = $('#end_day'), toTime = $('#end_time');
+    const fromDay = $('#start_day');
+    const fromTime = $('#start_time');
+    const toDay = $('#end_day');
+    const toTime = $('#end_time');
+
+    if (!fromDay || !fromTime || !toDay || !toTime) {
+        console.warn("cannot set input date because of missing field");
+        return;
+    }
 
     fromDay.val(formatDay(from)).trigger('change');
     fromTime.val(formatTime(from));
@@ -56,13 +56,14 @@ global.setInput = (from, to) => {
 global.setDay = (days) => {
     days = days || 0;
 
-    var from = moment();
+    var from = new Date();
-    from.hours(0).minutes(0).seconds(0);
+    from.setHours(0, 0, 0, 0);
 
-    from.add(days, 'd');
+    // add days, Date handles the overflow
+    from.setDate(from.getDate() + days);
 
-    var to = from.clone();
+    var to = new Date(from);
-    to.hours(23).minutes(59);
+    to.setHours(23, 59);
 
     setInput(from, to);
 };
@@ -70,10 +71,12 @@ global.setDay = (days) => {
 global.setHours = (hours) => {
     hours = hours || 1;
 
-    var from = moment();
+    var from = new Date();
-    var to = from.clone();
+    var to = new Date(from);
 
-    to.add(hours, 'h');
+    // convert hours to add to milliseconds (60 minutes * 60 seconds * 1000 for milliseconds)
+    const msToAdd = hours * 60 * 60 * 1000;
+    to.setTime(to.getTime() + msToAdd, 'h');
     if (to < from) {
         setInput(to, from);
         return;
@@ -100,12 +103,14 @@ $(function () {
     $('.input-group.time').each(function () {
         var elem = $(this);
         elem.find('button').on('click', function () {
+            const now = new Date();
             var input = elem.children('input').first();
-            input.val(moment().format('HH:mm'));
+            input.val(formatTime(now));
             var daySelector = $('#' + input.attr('id').replace('time', 'day'));
             var days = daySelector.children('option');
+            const yyyyMMDD = formatDay(now);
             days.each(function (i) {
-                if ($(days[i]).val() === moment().format('YYYY-MM-DD')) {
+                if ($(days[i]).val() === yyyyMMDD) {
                     daySelector.val($(days[i]).val());
                     return false;
                 }
@@ -148,6 +153,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
     filter.classList.remove('show');
 });
+
 $(() => {
     if (typeof (localStorage) === 'undefined') {
         return;