diff --git a/assets/src/app.tsx b/assets/src/app.tsx
index 85c56534d..72f6b4cac 100644
--- a/assets/src/app.tsx
+++ b/assets/src/app.tsx
@@ -45,11 +45,23 @@ const sortable = {
   },
 } as ViewHook
 
+const LimitTime = {
+  mounted() {
+    this.el.addEventListener("input", (_e) => {
+      let match = this.el.value.match(/^(\d{2})(\d{2})$/)
+      if (match) {
+        this.el.value = `${match[1]}:${match[2]}`
+      }
+    })
+  },
+} as ViewHook
+
 // https://github.com/fidr/phoenix_live_react
 const hooks = {
   LiveReact,
   sortable,
   ...live_select,
+  LimitTime,
 }
 
 const csrfToken = document
diff --git a/lib/arrow_web/components/limit_section.ex b/lib/arrow_web/components/limit_section.ex
index 7ed2d49c1..0ed930333 100644
--- a/lib/arrow_web/components/limit_section.ex
+++ b/lib/arrow_web/components/limit_section.ex
@@ -159,6 +159,7 @@ defmodule ArrowWeb.LimitSection do
                     :if={normalize_value("checkbox", input_value(f_day_of_week, :active?))}
                     field={f_day_of_week[:start_time]}
                     disabled={normalize_value("checkbox", input_value(f_day_of_week, :all_day?))}
+                    phx-hook="LimitTime"
                   />
                 </div>
                 <div class="col col-lg-3">