Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Time Picker

A component for selecting time with optional timezone and AM/PM support.

Basic Usage

Basic time picker with 24-hour format:

HH:mm:ss

Vue

<template>
  <HLTimePicker v-model:value="time" format="HH:mm:ss" />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const time = ref(null)
</script>

With Custom Prefix and Suffix

Using both prefix and suffix slots to add custom icons:

HH:mm:ss

Vue

<template>
  <HLTimePicker v-model:value="time" format="HH:mm:ss">
    <template #prefix>
      <HLIcon>
        <CalendarIcon />
      </HLIcon>
    </template>
    <template #suffix>
      <HLIcon>
        <InfoCircleIcon />
      </HLIcon>
    </template>
  </HLTimePicker>
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'
  import { InfoCircleIcon, CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'

  const time = ref(null)
</script>

With AM/PM and Timezone

The time picker provides independent am/pm and timezone selectors that emit respective values. Timezones should be passed as an array of objects with the following structure:

interface HLTimezone {
  label: string // Display name shown to users
  value: string // Timezone identifier (IANA timezone or custom)
  default?: boolean // Set to true for the default selected timezone
}
// IANA timezone identifiers
const timezones = [
  { label: 'Eastern Time', value: 'America/New_York', default: true },
  { label: 'Central Time', value: 'America/Chicago' },
  { label: 'Mountain Time', value: 'America/Denver' },
  { label: 'Pacific Time', value: 'America/Los_Angeles' },
  { label: 'UTC', value: 'UTC' },
]

WARNING

The time picker does not automatically adjust the displayed time when timezone or AM/PM changes. This gives you full control to implement your own timezone conversion and formatting logic.

hh:mm A

AM

Select timezone

Vue

<template>
  <HLTimePicker
    v-model:value="time"
    format="hh:mm a"
    :showAMPM="true"
    :timezones="timezones"
    @update:value="handleTimeChange"
    @update:ampm="handleAmPmChange"
    @update:timezone="handleTimezoneChange"
  />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const time = ref(null)
  const selectedAmPm = ref('AM')
  const selectedTimezone = ref(null)
  const timezones = [
    { label: 'UTC', value: 'UTC' },
    { label: 'America/New_York', value: 'America/New_York' },
    { label: 'America/Chicago', value: 'America/Chicago' },
    { label: 'America/Denver', value: 'America/Denver' },
    { label: 'America/Los_Angeles', value: 'America/Los_Angeles' },
  ]
  // Handle independent value changes
  const handleTimeChange = timeValue => {
    time.value = timeValue
    // Apply your timezone conversion logic here
    console.log('Time:', timeValue, 'AM/PM:', selectedAmPm.value, 'Timezone:', selectedTimezone.value)
  }

  const handleAmPmChange = ampm => {
    selectedAmPm.value = ampm
    // Apply your 12-hour conversion logic here
  }
  const handleTimezoneChange = timezone => {
    selectedTimezone.value = timezone
    // Apply your timezone conversion logic here
  }
</script>

With Shortcuts

Time picker with predefined time shortcuts:

HH:mm:ss

Vue

<template>
  <HLTimePicker v-model:value="time" :shortcuts="shortcuts" />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const time = ref(null)

  const shortcuts = {
    Now: () => Date.now(),
    'Start of Day': () => {
      const date = new Date()
      date.setHours(0, 0, 0, 0)
      return date.getTime()
    },
    'End of Day': () => {
      const date = new Date()
      date.setHours(23, 59, 59, 999)
      return date.getTime()
    },
  }
</script>

Without CTA (Action Buttons)

Time picker without confirm and clear buttons:

HH:mm:ss

Vue

<template>
  <HLTimePicker v-model:value="time" :showCTA="false" />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const time = ref(null)
</script>

With Form Validation

Time picker with error state and validation message:

Time

HH:mm:ss

Please enter a valid time

Vue

<template>
  <HLFormItem label="Time" validation-status="error" feedback="Please enter a valid time">
    <HLTimePicker v-model:value="time" status="error">
      <template #suffix>
        <HLIcon color="var(--error-600)">
          <InfoCircleIcon />
        </HLIcon>
      </template>
    </HLTimePicker>
  </HLFormItem>
</template>
<script setup>
  import { HLTimePicker, HLFormItem, HLIcon } from '@platform-ui/highrise'
  import { InfoCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const time = ref(null)
</script>

With Custom Placeholders

Time picker with custom placeholder text for time, timezone, and AM/PM selectors:

Enter time

AM

Choose your timezone

Vue

<template>
  <HLTimePicker
    v-model:value="time"
    :showAMPM="true"
    :timezones="timezones"
    :placeholder="{
      time: 'Enter time',
      timezone: 'Choose your timezone',
    }"
  />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const timezones = [
    { label: 'UTC', value: 'UTC' },
    { label: 'America/New_York', value: 'America/New_York' },
    { label: 'America/Chicago', value: 'America/Chicago' },
    { label: 'America/Denver', value: 'America/Denver' },
    { label: 'America/Los_Angeles', value: 'America/Los_Angeles' },
  ]
  const time = ref(null)
</script>

Disabling Time

You can restrict time selection by disabling certain hours or minutes or seconds.

When a disabled time is selected, the component will automatically choose the next valid option in this order:

• The current time (if it is enabled).
• The first available enabled time (used as a fallback).

Business hours only (9 AM - 5 PM)

Vue

<template>
  <HLTimePicker
    v-model:value="time"
    format="HH:mm:ss"
    :is-hour-disabled="(hour) => hour < 9 || hour > 17"
    :placeholder="{ time: 'Business hours only (9 AM - 5 PM)' }"
  />
</template>
<script setup>
  import { HLTimePicker } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const time = ref(null)
</script>

Props

Prop	Type	Default	Description
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of the time picker input
format	string	'HH:mm:ss'	Time format string (follows date-fns format)
showAMPM	boolean	false	Whether to show AM/PM selector
disabled	boolean | TimePickerDisabledState	false	Disable the entire component or specific parts
placeholder	TimePickerPlaceholders	{ time: 'Select time', timezone: 'Select timezone' }	Placeholder text for inputs
timezones	HLTimezone[]	[]	Array of timezone options
ampmSelectWidth	string | number	Determined based on the input size	Custom width for AM/PM selector
timeInputWidth	string | number	Determined based on the input size	Custom width for time input
showCTA	boolean	true	Whether to show the confirm and clear buttons
shortcuts	Record<string, number | (() => number)>	{}	Predefined shortcuts for quick time selection
status	'success' | 'error' | 'warning' | undefined	undefined	Validation status of the input
defaultValue	number | undefined	undefined	Default time value when input is cleared
value	number | null	null	Value set to the time picker
isHourDisabled	(hour: number) => boolean	undefined	Function to determine if a specific hour should be disabled
isMinuteDisabled	(minute: number, selectedHour?: number) => boolean	undefined	Function to determine if a specific minute should be disabled, optionally based on selected hour
isSecondDisabled	(second: number, selectedHour?: number, selectedMinute?: number) => boolean	undefined	Function to determine if a specific second should be disabled, based on selected hour and minute

Interfaces

TimePickerDisabledState Interface

interface TimePickerDisabledState {
  time?: boolean // Disable time input
  timezone?: boolean // Disable timezone selector
  ampm?: boolean // Disable AM/PM selector
}

TimePickerPlaceholders Interface

interface TimePickerPlaceholders {
  time?: string // Placeholder for time input
  timezone?: string // Placeholder for timezone selector
}

HLTimezone Interface (for timezones)

interface HLTimezone {
  label: string // Display label for the timezone
  value: string // Timezone value (e.g., 'America/Los_Angeles')
  default?: boolean // Whether this timezone is the default selection
}

Slots

Name	Parameters	Description
prefix	-	Content to be placed before the time input
suffix	-	Content to be placed after the time input

Emits

Event	Arguments	Description
update:value	(value: number | null) => void	Emitted when time value changes
update:formatted-value	(value: string | null) => void	Emitted when formatted time string changes
update:clear	() => void	Emitted when time is cleared
update:confirm	(value: number | null) => void	Emitted when time is confirmed with selected value
update:ampm	(value: 'AM' | 'PM') => void	Emitted when AM/PM selection changes
update:timezone	(timezone: HLTimezone | null) => void	Emitted when timezone selection changes
update:fallback	(fallbackInfo: HLTimePickerFallbackInfo) => void	Emitted when the timepicker falls back to a valid time

Methods

Method	Arguments	Description
focus	() => void	Focus the time picker input
blur	() => void	Remove focus from the time picker input