Time select

Default

Use Time Select for time input.

The available time range is 00:00 to 23:59

This component requires the <client-only> </client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Code copied

<template>
  <div class="center">
    <s-time-select
      v-model="value"
      start="08:30"
      step="00:15"
      end="18:30"
      placeholder="Select time"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Time Formats

Use format to control format of time(hours and minutes).

Check the list here of all available formats of Day.js.

Pay attention to capitalization

Code copied

<template>
  <div class="center">
    <s-time-select
      v-model="value"
      start="00:00"
      step="00:30"
      end="23:59"
      placeholder="Select time"
      format="hh:mm A"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Fixed time ranges

If start( end ) time is picked at first, then the status of end( start ) time’s options will change accordingly.

Code copied

<template>
  <div class="center time-range">
    <s-time-select
      v-model="startTime"
      :max-time="endTime"
      class="mr-4"
      placeholder="Start time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    <s-time-select
      v-model="endTime"
      :min-time="startTime"
      placeholder="End time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const startTime = ref('')
const endTime = ref('')
</script>

Disabled

whether TimeSelect is disabled

Code copied

<template>
  <div class="center">
    <s-time-select
      v-model="value"
      start="08:30"
      step="00:15"
      end="18:30"
      placeholder="Select time"
      disabled
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

API