From 2d8f74bf70a9478b519a10a141ba4f4496de99e2 Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:37:35 -0500
Subject: [PATCH] Disable native icon for datetime-local field and use our own
 icons for stylizing (#18633)

---
 .../manage/events.component.html              | 74 +++++++++++++++----
 apps/web/src/scss/tailwind.css                | 64 ++++++++++++++++
 2 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/manage/events.component.html b/apps/web/src/app/admin-console/organizations/manage/events.component.html
index 83665a4b99e..da4de1846fa 100644
--- a/apps/web/src/app/admin-console/organizations/manage/events.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.html
@@ -14,24 +14,70 @@
   <div class="tw-mt-4 tw-flex tw-items-center">
     <bit-form-field>
       <bit-label>{{ "from" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="datetime-local"
-        placeholder="{{ 'startDate' | i18n }}"
-        formControlName="start"
-        (change)="dirtyDates = true"
-      />
+      <div class="tw-relative">
+        <input
+          #startInput
+          bitInput
+          type="datetime-local"
+          placeholder="{{ 'startDate' | i18n }}"
+          formControlName="start"
+          (change)="dirtyDates = true"
+          class="datetime-input"
+        />
+        <svg
+          class="datetime-calendar-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Open date picker"
+          role="button"
+          tabindex="0"
+          (click)="startInput.showPicker()"
+          (keydown.enter)="startInput.showPicker()"
+          (keydown.space)="startInput.showPicker()"
+        >
+          <path
+            d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
     </bit-form-field>
     <span class="tw-mx-2">-</span>
     <bit-form-field>
       <bit-label>{{ "to" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="datetime-local"
-        placeholder="{{ 'endDate' | i18n }}"
-        formControlName="end"
-        (change)="dirtyDates = true"
-      />
+      <div class="tw-relative">
+        <input
+          #endInput
+          bitInput
+          type="datetime-local"
+          placeholder="{{ 'endDate' | i18n }}"
+          formControlName="end"
+          (change)="dirtyDates = true"
+          class="datetime-input"
+        />
+        <svg
+          class="datetime-calendar-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Open date picker"
+          role="button"
+          tabindex="0"
+          (click)="endInput.showPicker()"
+          (keydown.enter)="endInput.showPicker()"
+          (keydown.space)="endInput.showPicker()"
+        >
+          <path
+            d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
     </bit-form-field>
     <form>
       <button
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index a6641a2446e..0a7bb527fc0 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -79,6 +79,70 @@
   .theme_dark img.new-logo-themed {
     content: url("../images/logo-white.svg");
   }
+
+  /**
+   * Custom calendar icon for date/datetime inputs
+   * Hides native macOS picker and uses custom SVG calendar icon
+   */
+
+  /* Hide the native calendar picker indicator completely */
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+  input[type="time"]::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /* Wrapper for datetime input to ensure proper positioning */
+  bit-form-field .tw-relative {
+    display: flex;
+    align-items: stretch;
+  }
+
+  /* Ensure datetime inputs have proper padding and alignment */
+  .datetime-input {
+    padding-right: 2.5rem !important;
+    padding-top: 0.625rem !important;
+    padding-bottom: 0.625rem !important;
+    height: 44px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Position and style for custom datetime calendar icon */
+  .datetime-calendar-icon {
+    position: absolute;
+    top: 50%;
+    right: 0.75rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Light mode calendar icon color - dark for visibility */
+  .theme_light .datetime-calendar-icon {
+    color: #333333;
+  }
+
+  /* Dark mode calendar icon color - light for visibility */
+  .theme_dark .datetime-calendar-icon {
+    color: #cccccc;
+  }
+
+  /* Hover effect for calendar icon */
+  .datetime-calendar-icon:hover {
+    opacity: 0.7;
+  }
+
+  /* Focus styling for accessibility */
+  .datetime-calendar-icon:focus {
+    outline: 2px solid rgba(var(--color-primary-600));
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
 }
 
 /**