Fix Firefox Timepicker on Create Event

app/static/js/createEvents.js

@@ -1,6 +1,5 @@
 import searchUser from './searchUser.js'
 let pendingmultipleEvents = []
-
 // updates max and min dates of the datepickers as the other datepicker changes
 // No need for / for Firefox compatiblity 
 function updateDate(obj) {
@@ -35,6 +34,24 @@ function format24to12HourTime(timeStr) {
   return formattedTime;
 }
 
+function format12to24HourTime(timeStr) {
+  // break the time into hours, minutes, and meridian (AM, PM)
+  const [timePart, meridian] = timeStr.split(" ");
+  let [hours, minutes] = timePart.split(":").map(Number);
+
+  if (meridian === "PM" && hours !== 12) {
+      hours += 12;
+  } else if (meridian === "AM" && hours === 12) {
+      hours = 0; // midnight
+  }
+
+  // format hours and minutes to always be 2 digits
+  const formattedHours = hours.toString().padStart(2, "0");
+  const formattedMinutes = minutes.toString().padStart(2, "0");
+
+  return `${formattedHours}:${formattedMinutes}`;
+}
+
 function calculateRecurringEventFrequency(){
   var eventDatesAndName = {name:$("#inputEventName").val(),
                             isRecurring: true,
@@ -91,8 +108,21 @@ function isDateInPast(dateString) {
   return date < today;
 }
 
-function createOfferingModalRow({eventName=null, eventDate=null, startTime=null, endTime=null, isDuplicate=false}={}){
+function initializeFlatpickr(obj) {
+  flatpickr(obj, {
+    enableTime: true,
+    wrap: true,
+    noCalendar: true,
+    dateFormat: "h:i K",
+    time_24hr: false,
+    minTime: "08:00",
+    maxTime: "22:00",
+    minuteIncrement: 15,
+    allowInput: true 
+  });
+}
 
+function createOfferingModalRow({eventName=null, eventDate=null, startTime=null, endTime=null, isDuplicate=false}={}){
   let clonedMultipleOffering = $("#multipleOfferingEvent").clone().removeClass('d-none').removeAttr("id");
   // insert values for the newly created row
   if (eventName) {clonedMultipleOffering.find('.multipleOfferingNameField').val(eventName)}
@@ -103,7 +133,17 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
 
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
+  if (navigator.userAgent.indexOf("Chrome") == -1) {
+    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr1'))
+    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr2'))
+    $(".timepicker").prop("type", "text");
+    $(".timeIcons").prop("hidden", false);
 
+    var formattedStartTime = format24to12HourTime(clonedMultipleOffering.find(".multipleOfferingStartTime").prop("defaultValue"));
+    var formattedEndTime = format24to12HourTime(clonedMultipleOffering.find(".multipleOfferingEndTime").prop("defaultValue"));
+    clonedMultipleOffering.find(".multipleOfferingStartTime").val(formattedStartTime);
+    clonedMultipleOffering.find(".multipleOfferingEndTime").val(formattedEndTime);
+  }
   //this is so that the trash icon can be used to delete the event
   clonedMultipleOffering.find(".deleteMultipleOffering").on("click", function() {
     let attachedRow = $(this).closest(".eventOffering")
@@ -155,7 +195,15 @@ $('#multipleOfferingSave').on('click', function() {
 
   // Check if the start time is after the end time
   for(let i = 0; i < startTimeInputs.length; i++){
-    if(startTimeInputs[i].value < endTimeInputs[i].value){
+    let startTime = startTimeInputs[i].value
+    let endTime = endTimeInputs[i].value
+
+    if (navigator.userAgent.indexOf("Chrome") == -1) {
+      startTime = format12to24HourTime(startTime)
+      endTime = format12to24HourTime(endTime)
+    }
+
+    if(startTime < endTime){
       $(startTimeInputs[i]).removeClass('border-red');
       $(endTimeInputs[i]).removeClass('border-red');
     } else {
@@ -211,11 +259,17 @@ $('#multipleOfferingSave').on('click', function() {
   else {
     let offerings = [];
     eventOfferings.each(function(index, element) {
+      let startTime = $(element).find('.multipleOfferingStartTime').val() 
+      let endTime = $(element).find('.multipleOfferingEndTime').val()
+      if (navigator.userAgent.indexOf("Chrome") == -1) {
+        startTime = format12to24HourTime(startTime)
+        endTime = format12to24HourTime(endTime)
+      }
       offerings.push({
         eventName: $(element).find('.multipleOfferingNameField').val(),
         eventDate: $(element).find('.multipleOfferingDatePicker').val(),
-        startTime: $(element).find('.multipleOfferingStartTime').val(),
-        endTime: $(element).find('.multipleOfferingEndTime').val()
+        startTime: startTime,
+        endTime: endTime
       });
     });
 
@@ -415,14 +469,8 @@ $(".startDatePicker, .endDatePicker").change(function () {
 
   // everything except Chrome
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    $('input.timepicker').timepicker({
-      timeFormat: 'hh:mm p',
-      scrollbar: true,
-      dropdown: true,
-      dynamic: true,
-      minTime: "08:00am",
-      maxTime: "10:00pm"
-    });
+    initializeFlatpickr(".flatpickr")
+
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
 

app/templates/events/createEvent.html

@@ -31,14 +31,14 @@
   {{super()}}
 <script type="module" src="/static/js/createEvents.js"></script>
 <script type="module" src="/static/js/displayFilesMacro.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 {% endblock %}
 
 {% block styles %}
-  {{super()}}
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all"
+  {{super()}} <link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all"
   rel="stylesheet" type="text/css" />
-<link rel="stylesheet" href="/static/css/createEvent.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+  <link rel="stylesheet" href="/static/css/createEvent.css">
 {% endblock %}
 
 {% block app_content %}
@@ -99,32 +99,32 @@ <h1 id="pageTitle">{{page_title}}</h1>
   <div class="row col-md-12">
     <div class="form-group col-md-6">
       <label class="form-label me-2" for="startTime-{{pageLocation}}"><strong>Start Time</strong></label>
-      <div class="input-group">
+      <div class="input-group flatpickr">
         {% if eventData.timeStart %}
           {% set startTime = eventData.timeStart %}
         {% else %}
           {% set startTime = "12:00" %}
         {% endif %}
         <input autocomplete="off" type="time" class="form-control timepicker startTime" value="{{startTime}}"
-          name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" id="startTime-{{pageLocation}}"
+          name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" data-input id="startTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" hidden><i
-            class="bi bi-clock"></i></span>
+        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" data-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
+            class="bi bi-clock"></i></a>
       </div>
     </div>
     <div class='form-group col-md-6'>
       <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-      <div class="input-group">
+      <div class="input-group flatpickr">
         {% if eventData.timeEnd %}
           {% set endTime = eventData.timeEnd %}
         {%else%}
           {% set endTime = "13:00" %}
         {% endif %}
-        <input autocomplete="off" type="time" class="form-control timepicker endTime" value="{{endTime}}" name="timeEnd"
+        <input autocomplete="off" type="time" class="form-control timepicker endTime" data-input value="{{endTime}}" name="timeEnd"
           aria-describedby="timeIcon2" placeholder="Pick an end time" class="startTime" id="endTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <span class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" hidden><i
-            class="bi bi-clock"></i></span>
+        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
+            class="bi bi-clock"></i></a>
       </div>
     </div>
   </div>
@@ -489,32 +489,33 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           <div class="form-group col-md-3">
             <label class="form-label me-2" for="multipleOfferingStartTime-{{pageLocation}}"><strong>Start
                 Time</strong></label>
-            <div class="input-group">
+            <div class="input-group flatpickr" id="flatpickr1">
               {% if eventData.timeStart %}
                 {% set startTime = eventData.timeStart %}
               {% else %}
                 {% set startTime = "12:00" %}
               {% endif %}
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingStartTime"
-                value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time"
+                value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" data-input placeholder="Pick a start time"
                 id="multipleOfferingStartTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" hidden><i
-                  class="bi bi-clock"></i></span>
+              <a class="input-group-text timeIcons" data-toggle id="timeIcon1-{{pageLocation}}"
+              hidden><i
+                  class="bi bi-clock"></i></a>
             </div>
           </div>
           <div class='form-group col-md-3'>
             <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-            <div class="input-group pb-5">
+            <div class="input-group flatpickr" id="flatpickr2">
               {% if eventData.timeEnd %}
                 {% set endTime = eventData.timeEnd %}
               {%else%}
                 {% set endTime = "13:00" %}
               {% endif %}
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingEndTime"
-                value="{{endTime}}" name="timeEnd" aria-describedby="timeIcon2" placeholder="Pick an end time"
+                value="{{endTime}}" name="timeEnd" aria-describedby="timeIcon2" data-input placeholder="Pick an end time"
                 id="multipleOfferingEndTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <span class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" hidden><i
-                  class="bi bi-clock"></i></span>
+              <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
+                  class="bi bi-clock"></i></a>
             </div>
           </div>
           <div class="col-md-1 deleteMultipleOfferingWrapper">