TimePicker

allows users to select a time from a dropdown list. It supports both 12-hour and 24-hour formats and can be configured to disable typing.

Key Features

• Time Format: The component supports both 12-hour and 24-hour time formats, which can be specified using the format prop.
• Interval: The time options can be generated at specified intervals (e.g., every 30 minutes) using the interval prop.
• Disable Typing: The disableTyping prop can be used to make the input field read-only, preventing users from typing in the input field.

Basic Usage

Timepicker value:

<template>
  <spr-time-picker v-model="selectedValue" :label="`Timepicker value: ${selectedValue || ''}`" id="time-basic" />
</template>

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

const selectedValue = ref('');
</script>

Format

12 hour format

24 hour format

<template>
  <div class="spr-flex spr-flex-col spr-gap-4">
    <spr-time-picker v-model="selectedValue1" label="12 hour format" format="12" id="time-format-12" />
    <spr-time-picker v-model="selectedValue2" label="24 hour format" format="24" id="time-format-24" />
  </div>
</template>

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

const selectedValue1 = ref('');
const selectedValue2 = ref('');
</script>

Disable Typing

Timepicker

<template>
  <spr-time-picker v-model="selectedValue3" label="Timepicker" disableTyping format="12" id="time-format-typing" />
</template>

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

const selectedValue3 = ref('');
</script>

Error

Timepicker

<template>
  <spr-time-picker v-model="selectedValue4" label="Timepicker" disableTyping format="12" error="true" id="time-error" />
</template>

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

const selectedValue4 = ref('');
</script>

Helper Text

Timepicker

This is a helper text

<template>
  <spr-time-picker v-model="selectedValue5" label="Timepicker" id="time-disabled" helperText="This is a helper text" />
</template>

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

const selectedValue5 = ref('');
</script>

Disabled

Timepicker

<template>
  <spr-time-picker v-model="selectedValue5" label="Timepicker" disabled id="time-disabled" />
</template>

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

const selectedValue5 = ref('');
</script>

Full width

Timepicker

<template>
  <spr-time-picker v-model="selectedValue6" label="Timepicker" fullWidth id="time-full-width" />
</template>

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

const selectedValue6 = ref('');
</script>

API Reference

Name	Description	Type	Default
format	set time format	'12' | '24'	24
disableTyping	make the input field read-only	boolean	false
interval	set time interval	string	30
label	Field Label	string	''
fullWidth	Set full width to option	boolean	false
placeholder	Set placeholder text for the input field	string	''

Product Uses