Replace time selects with circular dial pickers in JalaliDateInput.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/JalaliDateInput.vue

@@ -94,14 +94,51 @@ const monthTitle = computed(
 );
 
 const hours = Array.from({ length: 24 }, (_, i) => i);
+const minuteMarks = Array.from({ length: 12 }, (_, i) => i * 5);
 const minutes = computed(() => {
-  const steps = Array.from({ length: 12 }, (_, i) => i * 5);
+  if (!minuteMarks.includes(draftMinute.value)) {
-  if (!steps.includes(draftMinute.value)) {
+    return [...minuteMarks, draftMinute.value].sort((a, b) => a - b);
-    return [...steps, draftMinute.value].sort((a, b) => a - b);
   }
-  return steps;
+  return minuteMarks;
 });
 
+const draftTimeLabel = computed(
+  () =>
+    `${toFaDigits(String(draftHour.value).padStart(2, '0'))}:${toFaDigits(String(draftMinute.value).padStart(2, '0'))}`,
+);
+
+function dialPoint(index: number, total: number, radius: number) {
+  const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
+  return {
+    left: `calc(50% + ${Math.cos(angle) * radius}px)`,
+    top: `calc(50% + ${Math.sin(angle) * radius}px)`,
+  };
+}
+
+function hourDialStyle(hour: number) {
+  // حلقه داخلی ۰–۱۱، حلقه بیرونی ۱۲–۲۳
+  const ring = hour < 12 ? 46 : 72;
+  const index = hour % 12;
+  return dialPoint(index, 12, ring);
+}
+
+function minuteDialStyle(minute: number) {
+  const index = minuteMarks.includes(minute)
+    ? minuteMarks.indexOf(minute)
+    : Math.round(minute / 5) % 12;
+  return dialPoint(index, 12, 64);
+}
+
+function setHour(hour: number) {
+  draftHour.value = hour;
+  applyTime();
+}
+
+function setMinute(minute: number) {
+  draftMinute.value = minute;
+  applyTime();
+}
+
 const cells = computed<Cell[]>(() => {
   const { jy, jm } = cursor.value;
   const first = jalaliToDate(jy, jm, 1);
@@ -178,8 +215,8 @@ function place() {
   const panel = panelRef.value;
   if (!trigger) return;
   const rect = trigger.getBoundingClientRect();
-  const width = panel?.offsetWidth || 320;
+  const width = panel?.offsetWidth || (props.mode === 'time' ? 340 : 320);
-  const height = panel?.offsetHeight || 360;
+  const height = panel?.offsetHeight || (props.mode === 'time' ? 420 : 360);
   let nextLeft = rect.left;
   if (getComputedStyle(document.documentElement).direction === 'rtl') {
     nextLeft = rect.right - width;
@@ -298,6 +335,14 @@ watch(open, (value) => {
   window.removeEventListener('keydown', onKeydown, true);
 });
 
+watch(
+  () => model.value,
+  () => {
+    if (props.mode === 'time') syncDraftFrom(null);
+  },
+  { immediate: true },
+);
+
 onBeforeUnmount(() => {
   window.removeEventListener('resize', onWindowChange);
   window.removeEventListener('scroll', onWindowChange, true);
@@ -307,19 +352,40 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="wrap" :class="{ disabled }">
+  <div class="wrap" :class="{ disabled, 'time-only': mode === 'time' }">
     <button
       :id="id"
       ref="triggerRef"
       class="trigger"
+      :class="{ 'clock-trigger': mode === 'time' }"
       type="button"
       :disabled="disabled"
       :aria-expanded="open"
       :aria-required="required || undefined"
       @click="toggle"
     >
-      <span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
+      <template v-if="mode === 'time'">
-      <UiIcon :name="triggerIcon" :size="18" />
+        <span class="clock-face" aria-hidden="true">
+          <i
+            class="hand hour-hand"
+            :style="{
+              transform: `rotate(${(draftHour % 12) * 30 + draftMinute * 0.5}deg)`,
+            }"
+          />
+          <i
+            class="hand minute-hand"
+            :style="{ transform: `rotate(${draftMinute * 6}deg)` }"
+          />
+          <i class="hub" />
+        </span>
+        <span class="clock-text" :class="{ empty: !display }">
+          {{ display || emptyLabel }}
+        </span>
+      </template>
+      <template v-else>
+        <span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
+        <UiIcon :name="triggerIcon" :size="18" />
+      </template>
     </button>
 
     <Teleport to="body">
@@ -328,6 +394,7 @@ onBeforeUnmount(() => {
         id="jalali-picker"
         ref="panelRef"
         class="panel"
+        :class="{ 'panel-time': mode === 'time' }"
         role="dialog"
         :style="{ top: `${top}px`, left: `${left}px` }"
       >
@@ -359,23 +426,50 @@ onBeforeUnmount(() => {
           </div>
         </template>
 
-        <div v-if="mode === 'datetime' || mode === 'time'" class="time">
+        <div v-if="mode === 'datetime' || mode === 'time'" class="time-dials">
-          <label>
+          <p v-if="mode === 'time'" class="time-title">{{ draftTimeLabel }}</p>
-            ساعت
+          <div class="dials">
-            <select v-model.number="draftHour" @change="applyTime">
+            <div class="dial-block">
-              <option v-for="h in hours" :key="h" :value="h">{{ toFaDigits(String(h).padStart(2, '0')) }}</option>
+              <span class="dial-label">ساعت</span>
-            </select>
+              <div class="dial" role="listbox" aria-label="ساعت">
-          </label>
+                <span class="dial-center">{{ toFaDigits(String(draftHour).padStart(2, '0')) }}</span>
-          <label>
+                <button
-            دقیقه
+                  v-for="h in hours"
-            <select v-model.number="draftMinute" @change="applyTime">
+                  :key="`h-${h}`"
-              <option v-for="m in minutes" :key="m" :value="m">{{ toFaDigits(String(m).padStart(2, '0')) }}</option>
+                  type="button"
-            </select>
+                  class="tick"
-          </label>
+                  :class="{ on: draftHour === h, outer: h >= 12 }"
+                  :style="hourDialStyle(h)"
+                  @click="setHour(h)"
+                >
+                  {{ toFaDigits(h) }}
+                </button>
+              </div>
+            </div>
+            <div class="dial-block">
+              <span class="dial-label">دقیقه</span>
+              <div class="dial" role="listbox" aria-label="دقیقه">
+                <span class="dial-center">{{ toFaDigits(String(draftMinute).padStart(2, '0')) }}</span>
+                <button
+                  v-for="m in minutes"
+                  :key="`m-${m}`"
+                  type="button"
+                  class="tick"
+                  :class="{ on: draftMinute === m }"
+                  :style="minuteDialStyle(m)"
+                  @click="setMinute(m)"
+                >
+                  {{ toFaDigits(String(m).padStart(2, '0')) }}
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
 
         <footer class="foot">
-          <button type="button" class="link" @click="pickToday">امروز</button>
+          <button type="button" class="link" @click="pickToday">
+            {{ mode === 'time' ? 'الان' : 'امروز' }}
+          </button>
           <button
             v-if="clearable && !required && model"
             type="button"
@@ -415,6 +509,68 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
+.clock-trigger {
+  justify-content: flex-start;
+  gap: 0.8rem;
+  min-height: 52px;
+  border-radius: 16px;
+  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
+}
+
+.clock-face {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background:
+    radial-gradient(circle at center, #fff 0 38%, transparent 39%),
+    conic-gradient(from 0deg, #ecfdf5, #ccfbf1, #ecfdf5);
+  border: 2px solid #99f6e4;
+  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.08);
+}
+
+.hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  transform-origin: center bottom;
+  border-radius: 99px;
+  background: #0f766e;
+}
+
+.hour-hand {
+  width: 2.5px;
+  height: 11px;
+  margin-inline-start: -1.25px;
+}
+
+.minute-hand {
+  width: 2px;
+  height: 15px;
+  margin-inline-start: -1px;
+  background: #14b8a6;
+}
+
+.hub {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 5px;
+  height: 5px;
+  margin: -2.5px;
+  border-radius: 50%;
+  background: #0f766e;
+}
+
+.clock-text {
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  font-size: 1.05rem;
+  color: #0f172a;
+}
+
 .trigger:focus {
   outline: 2px solid var(--accent-soft, #ccfbf1);
   border-color: var(--accent, #0d9488);
@@ -426,6 +582,8 @@ onBeforeUnmount(() => {
 
 .trigger .empty {
   color: #94a3b8;
+  font-weight: 600;
+  font-size: 0.92rem;
 }
 
 .trigger :deep(.ico) {
@@ -449,6 +607,10 @@ onBeforeUnmount(() => {
   font-family: IRANSans, Tahoma, sans-serif;
 }
 
+.panel-time {
+  width: min(22.5rem, calc(100vw - 16px));
+}
+
 .nav {
   display: flex;
   align-items: center;
@@ -519,28 +681,102 @@ onBeforeUnmount(() => {
   color: #64748b;
 }
 
-.time {
+.time-dials {
+  margin-top: 0.55rem;
+  display: grid;
+  gap: 0.65rem;
+}
+
+.time-title {
+  margin: 0;
+  text-align: center;
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #0f766e;
+  letter-spacing: 0.04em;
+}
+
+.dials {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  gap: 0.65rem;
-  margin-top: 0.65rem;
 }
 
-.time label {
+.dial-block {
   display: grid;
-  gap: 0.28rem;
+  gap: 0.4rem;
-  color: #64748b;
+  justify-items: center;
-  font-size: 0.75rem;
 }
 
-.time select {
+.dial-label {
-  width: 100%;
+  font-size: 0.75rem;
-  min-height: 38px;
+  color: #64748b;
-  border: 1px solid #e2e8f0;
+  font-weight: 700;
-  border-radius: 10px;
+}
-  padding: 0.3rem 0.5rem;
+
-  background: #fff;
+.dial {
+  position: relative;
+  width: 148px;
+  height: 148px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at center, #ffffff 0 28%, transparent 29%),
+    radial-gradient(circle at center, #f0fdfa 0 70%, #ecfeff 100%);
+  border: 2px solid #99f6e4;
+  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.06);
+}
+
+.dial-center {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #0d9488;
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.95rem;
+  z-index: 2;
+  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.28);
+}
+
+.tick {
+  position: absolute;
+  z-index: 1;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: #475569;
   font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+
+.tick.outer {
+  font-size: 0.68rem;
+  color: #64748b;
+}
+
+.tick:hover {
+  background: #ccfbf1;
+  color: #0f766e;
+}
+
+.tick.on {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.35);
 }
 
 .foot {
@@ -573,4 +809,15 @@ onBeforeUnmount(() => {
   font-weight: 800;
   font-size: 0.8rem;
 }
+
+@media (max-width: 420px) {
+  .dials {
+    grid-template-columns: 1fr;
+  }
+
+  .dial {
+    width: 160px;
+    height: 160px;
+  }
+}
 </style>