Migrating from ghl-ui TimePicker to HighRise TimePicker

This guide will help you migrate from the ghl-ui TimePicker component to the new HighRise TimePicker component.

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"
+   label="Select Time"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Appointment">
-     <UITimePicker
-       v-model="formModel.appointmentTime"
-       label="Select Time"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Appointment"
+     path="appointmentTime"
+     required
+   >
+     <HLTimePicker
+       id="appointment-time"
+       v-model:value="formModel.appointmentTime"
+       label="Select Time"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Changed to use value prop
status	status	New prop for validation status
validation-message	validation-message	New prop for validation feedback
clearable	clearable	New prop for clearing selection
size	size	New size options: 'sm', 'md', 'lg'
use12Hours	use12Hours	New prop for 12/24 hour format
minuteStep	minuteStep	New prop for minute interval

Examples

Basic TimePicker

<template>
  <HLTimePicker id="basic-timepicker" v-model:value="selectedTime" label="Select Time" />
</template>

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

const selectedTime = ref(null)
</script>

TimePicker with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Appointment" path="appointmentTime" required>
      <HLTimePicker
        id="appointment-time"
        v-model:value="formModel.appointmentTime"
        label="Select Time"
        :status="validationStatus"
        :validation-message="validationMessage"
      />
    </HLFormItem>
  </HLForm>
</template>

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

const formModel = ref({
  appointmentTime: null,
})

const validationStatus = computed(() => {
  if (!formModel.value.appointmentTime) return 'error'
  return undefined
})

const validationMessage = computed(() => {
  if (!formModel.value.appointmentTime) return 'Please select a time'
  return undefined
})

const rules = {
  appointmentTime: [
    {
      required: true,
      message: 'Please select a time',
      trigger: 'change',
    },
  ],
}
</script>

TimePicker with Different Sizes

<template>
  <div class="space-y-4">
    <HLTimePicker id="timepicker-lg" v-model:value="value" size="lg" label="Large TimePicker" />
    <HLTimePicker id="timepicker-md" v-model:value="value" size="md" label="Medium TimePicker" />
    <HLTimePicker id="timepicker-sm" v-model:value="value" size="sm" label="Small TimePicker" />
  </div>
</template>

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

const value = ref(null)
</script>

TimePicker with 12-Hour Format

<template>
  <HLTimePicker id="timepicker-12h" v-model:value="selectedTime" label="Select Time" :use12Hours="true" />
</template>

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

const selectedTime = ref(null)
</script>

TimePicker with Minute Step

<template>
  <HLTimePicker id="timepicker-step" v-model:value="selectedTime" label="Select Time" :minuteStep="15" />
</template>

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

const selectedTime = ref(null)
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Use appropriate size variants
5. Consider mobile responsiveness
6. Add proper ARIA labels
7. Handle loading states appropriately
8. Use descriptive labels
9. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment
13. Consider time format localization
14. Handle timezone differences appropriately
15. Use appropriate minute steps for your use case
16. Consider 12/24 hour format based on user preferences

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support
13. Supports time range selection
14. Handles time formatting and parsing
15. Supports custom time formats
16. Provides clear time input validation
17. Supports timezone conversion
18. Handles AM/PM selection in 12-hour format