edit time rezerv

src/components/owner/HmTimePickers.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex min-w-0 flex-1 items-center gap-1 rounded-xl border border-border bg-surface-2 px-2 py-2">
+    <select
+      :value="hour"
+      class="min-w-0 flex-1 appearance-none bg-transparent text-center text-lg font-semibold tabular-nums outline-none"
+      @change="onHour(($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="h in hours" :key="h" :value="h">{{ h }}</option>
+    </select>
+    <span class="font-semibold text-muted">:</span>
+    <select
+      :value="minute"
+      class="min-w-0 flex-1 appearance-none bg-transparent text-center text-lg font-semibold tabular-nums outline-none"
+      @change="onMinute(($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="m in minutes" :key="m" :value="m">{{ m }}</option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
+
+const hour = defineModel<string>('hour', { required: true });
+const minute = defineModel<string>('minute', { required: true });
+
+function onHour(v: string) {
+  hour.value = v;
+}
+
+function onMinute(v: string) {
+  minute.value = v;
+}
+</script>