From 24ccbf0ee8e5eeac3894470e9b66bca92f3b92ad Mon Sep 17 00:00:00 2001
From: Ali Ramazani <ramazanim@berea.edu>
Date: Sat, 7 Sep 2024 18:10:29 -0400
Subject: [PATCH 1/3] fixed event date course offering datepicker

---
 app/static/js/createEvents.js        | 16 ++++++++++++++++
 app/templates/admin/createEvent.html |  7 ++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 676804afa..4e9464c2d 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -178,6 +178,22 @@ $(document).ready(function() {
       $("#checkBonners").prop('checked', true);
   }
 }
+
+// Initialize datepicker for multiple offering modal
+$(".multipleOfferingDatePicker").datepicker({
+  dateFormat: 'mm/dd/yy',
+  minDate: new Date(),
+  onSelect: function() {
+    $(this).focus();
+  }
+});
+
+$(document).on('click', '.input-group-text, .multipleOfferingDatePicker', function (e) {
+  // Prevent click from showing datepicker when it's not the datepicker or calendar icon
+  e.stopPropagation();
+  $(this).closest('.input-group').find('.multipleOfferingDatePicker').datepicker('show');
+});
+
 // Initialize datepicker with proper options
 $.datepicker.setDefaults({
   dateFormat: 'yy/mm/dd', // Ensures compatibility across browsers
diff --git a/app/templates/admin/createEvent.html b/app/templates/admin/createEvent.html
index 1a468a8bb..b01f899f8 100644
--- a/app/templates/admin/createEvent.html
+++ b/app/templates/admin/createEvent.html
@@ -480,12 +480,17 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
                   Date</strong></label>
               <div class='input-group date multipleOfferingDate' id="multipleOfferingDate-{{pageLocation}}"
                 data-page-location="{{pageLocation}}">
-                <input autocomplete="off" type='date'
+                <input autocomplete="off" type='text'
                   class="form-control datePicker multipleOfferingDatePicker readonly"
                   value="{{ eventData.multipleOfferingDate.strftime('%m-%d-%Y') if eventData.multipleOfferingDate and eventData.multipleOfferingDate.strftime else eventData.multipleOfferingDate}}"
                   name="multipleOfferingDate" placeholder="Pick a start date"
                   id='multipleOfferingDatePicker-{{pageLocation}}' data-page-location="{{pageLocation}}" />
+                  <div class="input-group-text" id="calendarIconStart-{{pageLocation}}"
+        onclick="$('#startDatePicker-{{pageLocation}}').datepicker('show')">
+        <span><i class="bi bi-calendar-plus-fill"></i></span>
+      </div>
               </div>
+              
             </div>
             <div class="form-group col-md-3">
               <label class="form-label me-2" for="multipleOfferingStartTime-{{pageLocation}}"><strong>Start

From 2faa3cc52083b080022352871160b536bbecc94e Mon Sep 17 00:00:00 2001
From: Ali Ramazani <ramazanim@berea.edu>
Date: Sat, 7 Sep 2024 20:00:52 -0400
Subject: [PATCH 2/3] fixed datepicker in multime time offerings, subsequent
 ones to be fixed

---
 app/templates/admin/createEvent.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/templates/admin/createEvent.html b/app/templates/admin/createEvent.html
index b01f899f8..65bd60b6f 100644
--- a/app/templates/admin/createEvent.html
+++ b/app/templates/admin/createEvent.html
@@ -484,7 +484,8 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
                   class="form-control datePicker multipleOfferingDatePicker readonly"
                   value="{{ eventData.multipleOfferingDate.strftime('%m-%d-%Y') if eventData.multipleOfferingDate and eventData.multipleOfferingDate.strftime else eventData.multipleOfferingDate}}"
                   name="multipleOfferingDate" placeholder="Pick a start date"
-                  id='multipleOfferingDatePicker-{{pageLocation}}' data-page-location="{{pageLocation}}" />
+                  id='multipleOfferingDatePicker-{{pageLocation}}' data-page-location="{{pageLocation}}" oncli
+                  ="alert('hi')">
                   <div class="input-group-text" id="calendarIconStart-{{pageLocation}}"
         onclick="$('#startDatePicker-{{pageLocation}}').datepicker('show')">
         <span><i class="bi bi-calendar-plus-fill"></i></span>

From 80006a303b1a070f41c539142bf732408d9c62a8 Mon Sep 17 00:00:00 2001
From: Ali Ramazani <ramazanim@berea.edu>
Date: Sat, 14 Sep 2024 14:01:16 -0400
Subject: [PATCH 3/3] fixed the datepicker display issue in modal

---
 app/static/css/createEvent.css       | 17 ++++++++++-------
 app/templates/admin/createEvent.html | 11 +++++------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/static/css/createEvent.css b/app/static/css/createEvent.css
index 638498de2..67bbe48c2 100644
--- a/app/static/css/createEvent.css
+++ b/app/static/css/createEvent.css
@@ -1,9 +1,9 @@
 .toggleHeader{
     padding-bottom: 10px;
-    font-weight: bold;  
+    font-weight: bold;
     text-align: center;
     margin-left: 50%; /* Position the header at 50% of the viewport width */
-    transform: translateX(-50%);  
+    transform: translateX(-50%);
     width: 170px
 }
 .columnDivide{
@@ -12,14 +12,14 @@
     margin-left: 10px;
     margin-right: -30px;
 }.addMultipleBtn{
-    border-radius: 5px; 
-    margin-left: auto; 
+    border-radius: 5px;
+    margin-left: auto;
     margin-right: auto;
 }
 
 .deleteRow{
-    border-radius: 5px;  
-    position:relative; 
+    border-radius: 5px;
+    position:relative;
     top: 12px;
 }
 .invalidFeedback {
@@ -49,9 +49,12 @@
     }
 }
 .border-red {
-    border: 2px solid red;  
+    border: 2px solid red;
 }
 .divStripes {
     background-color: #fff
   }
 
+#ui-datepicker-div {
+    z-index: 4000 !important;
+}
diff --git a/app/templates/admin/createEvent.html b/app/templates/admin/createEvent.html
index 65bd60b6f..ed326c971 100644
--- a/app/templates/admin/createEvent.html
+++ b/app/templates/admin/createEvent.html
@@ -70,7 +70,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
     <div class='input-group date startDate' id="startDate-{{pageLocation}}" data-page-location="{{pageLocation}}">
       <input autocomplete="off" type='text' class="form-control datePicker startDatePicker readonly"
         value="{{ eventData.startDate.strftime('%Y/%m/%d') if eventData.startDate and eventData.startDate.strftime else eventData.startDate}}"
-        name="startDate" placeholder="Pick a start date" id='startDatePicker-{{pageLocation}}'
+        name="startDate" placeholder="Pick a start date" id='startDatePicker-main'
         data-page-location="{{pageLocation}}">
       <div class="input-group-text" id="calendarIconStart-{{pageLocation}}"
         onclick="$('#startDatePicker-{{pageLocation}}').datepicker('show')">
@@ -84,7 +84,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
     <label class="required form-label me-2" for="endDate-{{pageLocation}}"><strong>End Date</strong></label>
     <div class='input-group date endDate' id="endDate-{{pageLocation}}" data-page-location="{{pageLocation}}">
       <input autocomplete="off" type='text' class="form-control datePicker endDatePicker"
-        id='endDatePicker-{{pageLocation}}'
+        id='endDatePicker-main'
         value="{{eventData.endDate.strftime('%Y-%m-%d') if eventData.endDate and eventData.endDate.strftime else eventData.endDate}}"
         name="endDate" placeholder="Pick an end date" data-page-location="{{pageLocation}}">
       <div class="input-group-text" id="calendarIconEnd-{{pageLocation}}">
@@ -481,13 +481,12 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
               <div class='input-group date multipleOfferingDate' id="multipleOfferingDate-{{pageLocation}}"
                 data-page-location="{{pageLocation}}">
                 <input autocomplete="off" type='text'
-                  class="form-control datePicker multipleOfferingDatePicker readonly"
+                  class="form-control multipleOfferingDatePicker readonly"
                   value="{{ eventData.multipleOfferingDate.strftime('%m-%d-%Y') if eventData.multipleOfferingDate and eventData.multipleOfferingDate.strftime else eventData.multipleOfferingDate}}"
                   name="multipleOfferingDate" placeholder="Pick a start date"
-                  id='multipleOfferingDatePicker-{{pageLocation}}' data-page-location="{{pageLocation}}" oncli
-                  ="alert('hi')">
+                  id='multipleOfferingDatePicker-modal' data-page-location="{{pageLocation}}">
                   <div class="input-group-text" id="calendarIconStart-{{pageLocation}}"
-        onclick="$('#startDatePicker-{{pageLocation}}').datepicker('show')">
+        onclick="$('#multipleOfferingDatePicker-modal').datepicker('show')">
         <span><i class="bi bi-calendar-plus-fill"></i></span>
       </div>
               </div>