36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<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>
|