switch between 12 and 24 formats

src/js/admin-general-view.js

@@ -41,6 +41,7 @@ module.exports = {
       config: "",
       current_time: "",
       is_loading_time: false,
+      is_24_hr_format: false,
       selected_date: null,
       selected_hours: `${new Date().getHours()}`,
       selected_minutes: `${new Date().getMinutes()}`,
@@ -174,28 +175,31 @@ module.exports = {
     },
 
     change_date_time: async function () {
-      if (!this.selected_date || !this.selected_hours || !this.selected_minutes) {
+      if (!this.selected_date || !this.selected_hours === "" || !this.selected_minutes === "") {
         alert("Please enter all required fields.");
         return;
       }
 
-      const hours = parseInt(this.selected_hours, 10);
+      let hours = parseInt(this.selected_hours, 10);
       const minutes = parseInt(this.selected_minutes, 10);
 
-      if (hours < 1 || hours > 12 || minutes < 1 || minutes > 59) {
-        return alert("Invalid Time");
-      }
-
-      let converted_hours = hours;
-
-      if (this.selected_meridiem === "PM" && hours !== 12) {
-        converted_hours += 12;
-      } else if (this.selected_meridiem === "AM" && hours === 12) {
-        converted_hours = 0;
+      if (this.is_24_hr_format) {
+        if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+          return alert("Invalid Time");
+        }
+      } else {
+        if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59) {
+          return alert("Invalid Time");
+        }
+        if (this.selected_meridiem === "PM" && hours !== 12) {
+          hours += 12;
+        } else if (this.selected_meridiem === "AM" && hours === 12) {
+          hours = 0;
+        }
       }
 
       try {
-        const datetime = `${this.selected_date} ${converted_hours.toString().padStart(2, "0")}:${minutes
+        const datetime = `${this.selected_date} ${hours.toString().padStart(2, "0")}:${minutes
           .toString()
           .padStart(2, "0")}:00`;
 

src/pug/templates/admin-general-view.pug

@@ -69,14 +69,44 @@ script#admin-general-view-template(type="text/x-template")
       strong Current Date/Time: 
       span(v-if="isLoadingTime") Loading...
       span(v-else) {{ current_time }}
+    
+    label
+      input(type="checkbox" v-model="is_24_hr_format") 
+      |  Use 24-hour format
+
     .pure-form
       input(id="date" type="date" v-model="selected_date" required)
-      input(id="hours" type="number" v-model="selected_hours" placeholder="HH" maxlength="2" min="1" max="12" style="width:45px" required)
-      input(id="minutes" type="number" v-model="selected_minutes" placeholder="MM" maxlength="2" min="0" max="59" style="width:48px" required)
-      select(v-model="selected_meridian" style="width:60px")
-        option(value="AM") AM
+
+      input(
+          id="hours" 
+          type="number" 
+          v-model="selected_hours" 
+          placeholder="HH" 
+          maxlength="2" 
+          :min="is_24_hr_format ? 0 : 1" 
+          :max="is_24_hr_format ? 23 : 12" 
+          style="width:45px" 
+          required
+      )
+
+      input(
+        id="minutes" 
+        type="number" 
+        v-model="selected_minutes" 
+        placeholder="MM" 
+        maxlength="2" 
+        min="0" 
+        max="59" 
+        style="width:48px" 
+        required
+      )
+      
+      select(:disabled="is_24_hr_format" v-model="selected_meridian" style="width:65px")
+        option(value="AM" selected) AM
         option(value="PM") PM
+
       button.pure-button.pure-button-primary(@click="change_date_time", style="margin:5px") Update Date/Time 
+      
       .tip
         strong Note:
         | Internet connected controllers times is set automatically.

src/stylus/style.styl

@@ -1027,6 +1027,7 @@ tt.save
     font-style italic
     font-size 90%
     line-height 1.5
+    white-space pre-line
 
 .modal-mask
   position fixed