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

Examples

Basic DatePicker

<template>
  <HLDatePicker id="basic-datepicker" v-model:value="selectedDate" label="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"
        label="Select Date"
        :status="validationStatus"
        :validation-message="validationMessage"
      />
    </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 validationMessage = computed(() => {
  if (!formModel.value.appointmentDate) return 'Please select a date'
  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" label="Large DatePicker" />
    <HLDatePicker id="datepicker-md" v-model:value="value" size="md" label="Medium DatePicker" />
    <HLDatePicker id="datepicker-sm" v-model:value="value" size="sm" label="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" label="Select Date" clearable />
</template>

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

const selectedDate = 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 date format localization
14. Handle timezone differences appropriately

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 date range selection
14. Handles date formatting and parsing
15. Supports custom date formats
16. Provides clear date input validation