Migrating from ghl-ui TimePicker to HighRise TimePicker

HighRise HLTimePicker is a headless time picker with richer control over AM/PM display, timezones, and disabled states. Values are timestamps (number | null), and labels should be provided by surrounding form items instead of a label prop.

Component Implementation Changes

Import Changes

- import { UITimePicker } from '@gohighlevel/ghl-ui'
+ import { HLTimePicker } from '@platform-ui/highrise'

Basic Usage Changes

- <UITimePicker v-model="selectedTime" label="Select Time" />
+ <HLTimePicker
+   id="time-picker"
+   v-model:value="selectedTime"
+   format="HH:mm:ss"
+   :placeholder="{ time: 'Select time' }"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Appointment">
-     <UITimePicker v-model="formModel.appointmentTime" label="Select Time" />
-   </UIFormItem>
- </UIForm>
+ <HLForm :model="formModel">
+   <HLFormItem label="Appointment" path="appointmentTime" required>
+     <HLTimePicker
+       id="appointment-time"
+       v-model:value="formModel.appointmentTime"
+       format="hh:mm a"
+       :show-a-m-p-m="true"
+       :placeholder="{ time: 'Select time' }"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model (value)	v-model:value	Uses timestamp (number) or null
defaultValue	default-value	Same type as value; used as the initial timestamp
format	format	Same format tokens; combine with show-a-m-p-m to show AM/PM select
placeholder (string)	placeholder.time	HighRise expects { time, timezone } object
timeZone	timezones + v-model:timezone	Pass array of { label, value, default? } and bind selected timezone
status	status	Forwarded to the inputs (error, warning, success)
size (small | medium | large)	size (sm | md | lg)	Size tokens align with other HighRise inputs
isHourDisabled / isMinuteDisabled / isSecondDisabled	Same names	Same signature; passed through to the panel
–	show-a-m-p-m	Forces AM/PM select even when format already includes it
–	showCTA, autoClose, shortcuts	Control footer actions and quick-pick shortcuts
–	disabled (boolean or { time, timezone, ampm })	Disable specific parts independently
–	ampmSelectWidth, timeInputWidth	Fine-tune input widths

Events

ghl-ui Event	HighRise Event	Notes
@update:value	@update:value	Same behavior
@confirm	@update:confirm	Emits timestamp when confirm is clicked
–	@update:formatted-value	Emits formatted string matching format
–	@update:clear	Emits when cleared
–	@update:timezone	Emits selected timezone object
–	@update:ampm	Emits AM / PM selection
–	@update:fallback	Emits when requested time is adjusted/blocked

Examples

Basic TimePicker

<template>
  <HLTimePicker id="basic-timepicker" v-model:value="selectedTime" format="HH:mm:ss" :placeholder="{ time: 'Select time' }" />
</template>

<script setup>
import { ref } from 'vue'
import { HLTimePicker } from '@platform-ui/highrise'

const selectedTime = ref<number|null>(null)
</script>

TimePicker with AM/PM and Timezone

<template>
  <HLTimePicker
    id="timepicker-12h"
    v-model:value="selectedTime"
    v-model:timezone="selectedTimezone"
    format="hh:mm a"
    :show-a-m-p-m="true"
    :timezones="timezones"
    :placeholder="{ time: 'Pick a time', timezone: 'Select timezone' }"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLTimePicker } from '@platform-ui/highrise'

const selectedTime = ref<number|null>(null)
const selectedTimezone = ref(null)
const timezones = [
  { label: 'UTC', value: 'UTC', default: true },
  { label: 'America/New_York', value: 'America/New_York' },
  { label: 'Europe/London', value: 'Europe/London' },
]
</script>

Disabled Segments and Validation

<template>
  <HLTimePicker
    id="timepicker-disabled"
    v-model:value="selectedTime"
    format="HH:mm"
    :disabled="{ timezone: true }"
    :status="hasError ? 'error' : undefined"
    :placeholder="{ time: 'HH:mm' }"
    @update:clear="handleClear"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import { HLTimePicker } from '@platform-ui/highrise'

const selectedTime = ref<number|null>(null)
const hasError = computed(() => !selectedTime.value)
const handleClear = () => {
  selectedTime.value = null
}
</script>

Best Practices

1. Bind with v-model:value; keep time values as timestamps for consistency.
2. Supply format and show-a-m-p-m together when you want explicit AM/PM toggles.
3. Use the placeholder object so time and timezone inputs are labeled correctly.
4. Pass timezones plus v-model:timezone when you need timezone awareness.
5. Disable specific parts (time, timezone, ampm) instead of the whole control when needed.