Migrating from ghl-ui DatePicker to HighRise DatePicker

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

Component Implementation Changes

Import Changes

- import { UIDatePicker } from '@gohighlevel/ghl-ui'
+ import { HLDatePicker } from '@platform-ui/highrise'

Basic Usage Changes

- <UIDatePicker
-   v-model="selectedDate"
-   label="Select Date"
- />
-
+ <HLDatePicker
+   id="date-picker"
+   v-model:value="selectedDate"
+   placeholder="Select date"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Appointment">
-     <UIDatePicker
-       v-model="formModel.appointmentDate"
-       label="Select Date"
-     />
-   </UIFormItem>
- </UIForm>
-
+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem label="Appointment" path="appointmentDate" required>
+     <HLDatePicker
+       id="appointment-date"
+       v-model:value="formModel.appointmentDate"
+       placeholder="Select date"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Emits update:value and update:formatted-value
type	type	'date' | 'daterange' | 'month' | 'year' | 'week'
format	format	Defaults change per type; accepts date-fns patterns
placeholder	placeholder	For ranges, pass ['Start', 'End']; startPlaceholder/endPlaceholder removed
clearable	clearable	Same behavior, default false
shortcuts	shortcuts	Same structure for quick-pick presets
-	show	Control panel visibility; sync with @update:show
-	showCTA	Enables confirm/cancel footer; defers emission until confirm
-	updateValueOnConfirm	When showCTA is true, emit immediately (false) or on confirm (true)
disabled	disabled	Unchanged
status	status	Visual status: 'success' | 'warning' | 'error'
isDateDisabled	isDateDisabled	Predicate for disabling dates

Examples

Basic DatePicker

<template>
  <HLDatePicker id="basic-datepicker" v-model:value="selectedDate" placeholder="Select date" />
</template>

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

const selectedDate = ref(null)
</script>

DatePicker with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Appointment" path="appointmentDate" required>
      <HLDatePicker id="appointment-date" v-model:value="formModel.appointmentDate" placeholder="Select date" :status="validationStatus" />
    </HLFormItem>
  </HLForm>
</template>

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

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

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

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

DatePicker with Different Sizes

<template>
  <div class="space-y-4">
    <HLDatePicker id="datepicker-lg" v-model:value="value" size="lg" placeholder="Large DatePicker" />
    <HLDatePicker id="datepicker-md" v-model:value="value" size="md" placeholder="Medium DatePicker" />
    <HLDatePicker id="datepicker-sm" v-model:value="value" size="sm" placeholder="Small DatePicker" />
  </div>
</template>

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

const value = ref(null)
</script>

DatePicker with Clearable Option

<template>
  <HLDatePicker id="clearable-datepicker" v-model:value="selectedDate" placeholder="Select date" clearable />
</template>

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

const selectedDate = ref(null)
</script>

Best Practices

1. Bind both v-model:value and, when needed, @update:formatted-value for display-ready values.
2. Use placeholder (or a two-item array) to guide users; labels belong on HLFormItem.
3. Enable show-cta when you need explicit confirmation; otherwise rely on immediate emission.
4. Guard selections with is-date-disabled rather than post-validating.
5. Align format with backend expectations; defaults differ by picker type.
6. Constrain selectable years via min-year / max-year when applicable.
7. Keep type="daterange" only when your model accepts arrays; otherwise stick to date.
8. Sync controlled visibility with show + @update:show to avoid stale open states.
9. Set auto-complete-off when browser autofill conflicts with date inputs.
10. Pair status with form validation feedback for consistent UI states.

Additional Notes

1. Events: update:value, update:formatted-value, update:show, confirm, cancel, clear, focus, blur.
2. showCTA defers value emission until confirm; combine with update-value-on-confirm="false" for immediate updates.
3. placeholder replaces startPlaceholder / endPlaceholder; pass an array for range placeholders.
4. Range, month, year, and week pickers reuse the same component via the type prop.
5. Style via container classes; component theme tokens come from HighRise defaults.