Time Picker

The Time Picker component provides an intuitive interface for users to select a specific time from a dropdown list of options. It's designed to be flexible and user-friendly, supporting both 12-hour and 24-hour formats with customizable time intervals.

Overview

The Time Picker component offers:

• Choice between 12-hour (AM/PM) and 24-hour time formats
• Customizable time intervals (e.g., every 15, 30, or 60 minutes)
• Optional input field for direct time entry or dropdown-only selection
• Full integration with form validation systems
• Responsive layout with full-width support
• Accessibility features for keyboard navigation

Key Features

• Time Format Options: Choose between 12-hour format with AM/PM indicators or 24-hour format using the format prop
• Customizable Intervals: Configure the time increments (in minutes) between options using the interval prop
• Input Control: Enable or disable manual time entry with the disableTyping prop to restrict selection to dropdown options only
• Form Integration: Supports error states, helper text, and disabled states for seamless form integration
• Responsive Design: Adapts to different container widths with the fullWidth prop for flexible layouts

Basic Usage

The simplest implementation of the Time Picker requires only a v-model directive to bind the selected time value.

Select a time

<template>
  <spr-time-picker v-model="selectedValue" label="Select a time" id="time-basic" />
</template>

<script setup>
import { ref } from 'vue';

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

TIP

By default, the Time Picker uses 24-hour format with 30-minute intervals. The dropdown will display times from 00:00 to 23:30.

Time Formats

The Time Picker supports both 12-hour (AM/PM) and 24-hour formats. Use the format prop to specify your preferred format.

12-hour format (AM/PM)

24-hour format

<template>
  <div class="spr-flex spr-flex-col spr-gap-4">
    <!-- 12-hour format with AM/PM -->
    <spr-time-picker v-model="selectedValue1" label="12-hour format (AM/PM)" format="12" id="time-format-12" />

    <!-- 24-hour format -->
    <spr-time-picker v-model="selectedValue2" label="24-hour format" format="24" id="time-format-24" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

Format Examples

• 12-hour format: "09:30 AM", "12:00 PM", "06:45 PM"
• 24-hour format: "09:30", "12:00", "18:45"

Custom Time Intervals

You can adjust the interval between time options using the interval prop. The value is specified in minutes.

15-minute intervals

30-minute intervals (default)

60-minute intervals (hourly)

<template>
  <div class="spr-flex spr-flex-col spr-gap-4">
    <!-- 15-minute intervals -->
    <spr-time-picker v-model="selectedValue3" label="15-minute intervals" interval="15" id="time-interval-15" />

    <!-- 30-minute intervals (default) -->
    <spr-time-picker
      v-model="selectedValue4"
      label="30-minute intervals (default)"
      interval="30"
      id="time-interval-30"
    />

    <!-- Hourly intervals -->
    <spr-time-picker
      v-model="selectedValue5"
      label="60-minute intervals (hourly)"
      interval="60"
      id="time-interval-60"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

TIP

Smaller intervals provide more precise time selection but result in longer dropdown lists. Consider your use case when choosing the appropriate interval.

Input Control Options

Disable Typing

Use the disableTyping prop to prevent users from manually entering a time. This restricts selection to the dropdown options only.

Selection only (no typing)

<template>
  <spr-time-picker
    v-model="selectedValue6"
    label="Selection only (no typing)"
    disableTyping
    format="12"
    id="time-disable-typing"
  />
</template>

<script setup>
import { ref } from 'vue';

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

Custom Placeholder

You can customize the input placeholder text using the placeholder prop.

With custom placeholder

<template>
  <spr-time-picker
    v-model="selectedValue7"
    label="With custom placeholder"
    placeholder="Select meeting time..."
    id="time-custom-placeholder"
  />
</template>

<script setup>
import { ref } from 'vue';

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

Form Integration

Helper Text

Add explanatory text below the input field using the helperText prop.

Opening hours

Select the time your business opens

<template>
  <spr-time-picker
    v-model="selectedValue8"
    label="Opening hours"
    helperText="Select the time your business opens"
    id="time-helper-text"
  />
</template>

<script setup>
import { ref } from 'vue';

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

Error State

Display an error state using the error prop to indicate validation issues.

Meeting time

Please select a valid meeting time

<template>
  <spr-time-picker
    v-model="selectedValue9"
    label="Meeting time"
    error
    helperText="Please select a valid meeting time"
    id="time-error"
  />
</template>

<script setup>
import { ref } from 'vue';

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

Disabled State

Disable the time picker using the disabled prop when you want to prevent interaction.

Appointment time (disabled)

<template>
  <spr-time-picker v-model="selectedValue10" label="Appointment time (disabled)" disabled id="time-disabled" />
</template>

<script setup>
import { ref } from 'vue';

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

Layout Options

Full Width

Use the fullWidth prop to make the time picker expand to the full width of its container.

Full width time picker

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

<script setup>
import { ref } from 'vue';

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

API Reference

Props

Name	Description	Type	Default
modelValue	The selected time value (used with v-model)	string	Required
format	Time format to display	'12' | '24'	'24'
interval	Time interval in minutes between options	number	30
label	Label text displayed above the input field	string	''
placeholder	Placeholder text for the input field	string	Format-dependent ('HH : MM' or 'HH : MM AM/PM')
disableTyping	When true, prevents manual text entry in the input field	boolean	false
error	When true, displays the field in an error state	boolean	false
helperText	Helper text displayed below the input field	string	''
disabled	When true, disables the time picker	boolean	false
fullWidth	When true, the time picker expands to the full width of its container	boolean	false
id	HTML ID attribute for the input element	string	'time-picker'

Events

Name	Description	Parameters
update:modelValue	Emitted when the selected time changes	string: The new time value

Products Uses