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

This reverts commit 2d8f74bf70a9478b519a10a141ba4f4496de99e2.
---
 .../manage/events.component.html              | 74 ++++---------------
 apps/web/src/scss/tailwind.css                | 64 ----------------
 2 files changed, 14 insertions(+), 124 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 da4de1846fa..83665a4b99e 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,70 +14,24 @@
   <div class="tw-mt-4 tw-flex tw-items-center">
     <bit-form-field>
       <bit-label>{{ "from" | i18n }}</bit-label>
-      <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>
+      <input
+        bitInput
+        type="datetime-local"
+        placeholder="{{ 'startDate' | i18n }}"
+        formControlName="start"
+        (change)="dirtyDates = true"
+      />
     </bit-form-field>
     <span class="tw-mx-2">-</span>
     <bit-form-field>
       <bit-label>{{ "to" | i18n }}</bit-label>
-      <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>
+      <input
+        bitInput
+        type="datetime-local"
+        placeholder="{{ 'endDate' | i18n }}"
+        formControlName="end"
+        (change)="dirtyDates = true"
+      />
     </bit-form-field>
     <form>
       <button
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index 0a7bb527fc0..a6641a2446e 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -79,70 +79,6 @@
   .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;
-  }
 }
 
 /**