switch between 12 and 24 formats

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.