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

Time picker with 12-hour format and timezone selection:

hh:mm A

AM

Select timezone

Vue

<template>
  <HLTimePicker v-model:value="time" format="hh:mm a" :showAMPM="true" :timezones="timezones" />
</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>

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>

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	SelectOption[]	[]	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

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
}

SelectOption Interface (for timezones)

interface SelectOption {
  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

Events

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

Methods

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