Accessibility: Work in progress

Translations: Not Needed

Date Picker

A versatile date picker component that allows users to select dates, date ranges, months, and years with a modern, accessible interface. The component supports various formats, sizes, and customization options.

Basic Usage

A simple date picker with default settings:

vue

<template>
  <HLContentWrap>
    <HLDatePicker id="date-picker-with-default" type="date" clearable />
  </HLContentWrap>
</template>
<script setup>
import { HLDatePicker } from '@platform-ui/highrise'
</script>

With Custom Format

Format the date picker to display the date in a custom format. Format is passed as a string. Supported formats are listed in Date Formats.

vue

<template>
  <HLContentWrap>
    <HLDatePicker id="date-picker-with-custom-format" type="date" format="dd - MM - yyyy" clearable />
  </HLContentWrap>
</template>
<script setup lang="ts">
import { HLDatePicker } from '@platform-ui/highrise'
</script>

<!-- Output example: 15 - 05 - 2023 -->

With CTA buttons

A simple date picker with default settings:

vue

<template>
  <HLContentWrap>
    <HLDatePicker id="date-picker-with-cta" type="date" clearable showCTA />
  </HLContentWrap>
</template>
<script setup lang="ts">
import { HLDatePicker } from '@platform-ui/highrise'
</script>

All Sizes

Vue

html

<template>
  <HLDatePicker id="date-picker-with-all-sizes" size="lg" />
  <HLDatePicker id="date-picker-with-all-sizes" size="md" />
  <HLDatePicker id="date-picker-with-all-sizes" size="sm" />
  <HLDatePicker id="date-picker-with-all-sizes" size="xs" />
  <HLDatePicker id="date-picker-with-all-sizes" size="2xs" />
  <HLDatePicker id="date-picker-with-all-sizes" size="3xs" />
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
</script>

Month Picker

Vue

html

<template>
  <HLDatePicker id="date-picker-with-month-picker" type="month" clearable format="MM/yyyy" />
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
</script>

Year Picker

Year Grid

Vue

html

<template>
  <HLDatePicker id="date-picker-with-year-grid" type="year" clearable yearGrid />
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
</script>

Year Scroll

Vue

html

<template>
  <HLDatePicker id="date-picker-with-year-scroll" type="year" clearable />
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
</script>

With Shortcuts

Add quick selection options:

vue

<template>
  <HLDatePicker id="date-picker-with-shortcuts" type="date" :shortcuts="shortcuts" showCTA />
</template>
<script setup lang="ts">
const shortcuts = {
  Yesterday: () => Date.now() - 24 * 60 * 60 * 1000,
  'My Anniversary': () => 1715020800000,
  'GHL Birthday': () => 1521454800000,
}
</script>

Date Range Selection

Vue

html

<template>
  <HLDatePicker type="daterange" clearable :placeholder="['Start date', 'End date']" />
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
</script>

Custom Prefix Icon

You might want to use different icon for the prefix.

Vue

html

<template>
  <HLDatePicker type="date">
    <template #prefix>
      <div class="hr-input__prefix-icon">
        <ClockIcon />
      </div>
    </template>
  </HLDatePicker>
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
  import { ClockIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Custom Trigger

Vue

html

<template>
  <HLDatePicker type="date" v-model:show="isOpen">
    <template #trigger>
      <HLButton size="md" variant="secondary" @click="isOpen = !isOpen">
        <template #iconLeft>
          <CalendarIcon />
        </template>
        Select a date
      </HLButton>
    </template>
  </HLDatePicker>
</template>
<script setup lang="ts">
  import { HLDatePicker } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  const isOpen = ref(false)
</script>

Disabled Dates

You can disable specific dates using the isDateDisabled prop. This function receives a timestamp and should return true for dates that should be disabled. In this example, all dates before the 15th of each month are disabled.

vue

<template>
  <HLDatePicker id="date-picker-with-disabled-dates" type="date" :isDateDisabled="disabledDates" />
</template>
<script setup lang="ts">
import { HLDatePicker } from '@platform-ui/highrise'
// Disable all dates before the 15th of each month
const disabledDates = timestamp => {
  const date = new Date(timestamp).getDate()
  return date < 15
}
</script>

Using Side Content Panels

The DatePicker component supports left and right slots that can be used to add additional content beside the calendar. This is useful for adding quick selections, filters, or any other complementary functionality.

Vue

vue

<template>
  <HLDatePicker id="date-picker-with-side-content" type="date" showCTA>
    <template #left>
      <div class="flex flex-col gap-2">
        <h3 class="text-sm font-semibold text-gray-700">Time of Day</h3>
        <div class="flex flex-col gap-1">
          <HLButton
            v-for="time in times"
            :key="time.label"
            size="2xs"
            :variant="time.selected ? 'primary' : 'secondary'"
            @click="time.selected = !time.selected"
          >
            {{ time.label }}
          </HLButton>
        </div>
      </div>
    </template>
    <template #right>
      <div class="flex flex-col gap-2">
        <h3 class="text-sm font-semibold text-gray-700">Category</h3>
        <div class="flex flex-col gap-1">
          <HLButton
            v-for="category in categories"
            :key="category.label"
            size="2xs"
            :variant="category.selected ? 'primary' : 'secondary'"
            @click="category.selected = !category.selected"
          >
            {{ category.label }}
          </HLButton>
        </div>
      </div>
    </template>
  </HLDatePicker>
</template>

<script setup>
import { ref } from 'vue'

const times = ref([
  { label: 'Morning', selected: false },
  { label: 'Afternoon', selected: false },
  { label: 'Evening', selected: false },
])

const categories = ref([
  { label: 'Meeting', selected: false },
  { label: 'Event', selected: false },
  { label: 'Task', selected: false },
])
</script>

Panel Mode

Panel mode renders just the calendar panel without the input and popover wrapper. This is useful when you want to embed the calendar directly in your UI:

vue

<template>
  <HLDatePicker type="date" panel :shortcuts="shortcuts" @update:value="handleDateSelect" />
</template>

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

const shortcuts = {
  Yesterday: () => Date.now() - 24 * 60 * 60 * 1000,
  Today: () => Date.now(),
  Tomorrow: () => Date.now() + 24 * 60 * 60 * 1000,
}

const handleDateSelect = value => {
  // Handle date selection
  console.log('Selected date:', new Date(value))
}
</script>

The panel mode supports all the same features as the regular datepicker:

Single date and date range selection
Month and year views
Shortcuts
Left and right slots for additional content
All event handlers

Imports

import { HLDatePicker } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
type	`'date' \| 'month' \| 'year' \| 'daterange'`	`'date'`	Type of the date picker
clearable	`boolean`	`false`	Whether the value can be cleared
disabled	`boolean`	`false`	Whether the date picker is disabled
format	`string`	Based on type	Format of the date display. See Date Formats for more details.
defaultValue	`number \| [number, number] \| null \| undefined`	`undefined`	Default timestamp value in milliseconds (e.g., 1683849600000). This has to be an array or two timestamps for daterange.
placeholder	`string \| [string, string]`	`'Select Date'`	Placeholder text. For daterange, provide an array of two strings
shortcuts	`{ [key: string]: number \| (() => number) \| [number, number] \| (() => [number, number]) } \| undefined`	`undefined`	Shortcut or quick selection options. Values can be timestamps or functions returning timestamps
show	`boolean \| undefined`	`undefined`	Controls panel visibility
showCTA	`boolean`	`false`	Show confirm/clear actions
yearGrid	`boolean`	`false`	Show year selection in grid format
size	`'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'`	`'md'`	Size of the date picker
status	`'warning' \| 'error' \| undefined`	`undefined`	Status state
isDateDisabled	`(timestamp: number) => boolean \| undefined`	`undefined`	Function to disable dates. Receives timestamp in milliseconds
autoCompleteOff	`boolean`	`false`	Disable browser autocomplete
updateValueOnConfirm	`boolean`	`true`	When true (default) and showCTA is true, updates will only be emitted on confirm. When false, updates will be emitted immediately on selection. This prop has no effect when showCTA is false.
panel	`boolean`	`false`	When true, renders only the calendar panel without input and popover

Type Examples

// Single date value (timestamp in milliseconds)
const singleDate: number = Date.now() // e.g., 1683849600000

// Date range value (array of timestamps)
const dateRange: [number, number] = [
  new Date('2023-05-01').getTime(), // start date
  new Date('2023-05-31').getTime(), // end date
]

Emits

Name	Parameters	Description
`@update:value`	`(value: number \| [number, number] \| null) => void`	Triggered when value changes
`@update:formatted-value`	`(value: string \| [string, string]) => void`	Triggered when formatted value changes
`@update:show`	`(value: boolean) => void`	Triggered when panel visibility changes
`@next-month`	`() => void`	Triggered when switching to next month
`@prev-month`	`() => void`	Triggered when switching to prev month
`@next-year`	`() => void`	Triggered when switching to next year
`@prev-year`	`() => void`	Triggered when switching to prev year
`@confirm`	`() => void`	Triggered when confirming the date
`@clear`	`() => void`	Triggered when clearing the date
`@focus`	`() => void`	Triggered when focusing the date picker
`@blur`	`() => void`	Triggered when blurring the date picker

Slots

Name	Description
`prefix`	Custom prefix content for the input
`suffix`	Custom suffix content for the input
`trigger`	Custom trigger element for the date picker
`left`	Content for the left side panel
`right`	Content for the right side panel

Methods

The DatePicker component exposes the following methods that can be accessed using template refs:

Method	Description
`focus()`	Focuses the first input element of the date picker. For date range pickers, focuses the start date input.
`blur()`	Removes focus from the first input element. For date range pickers, blurs the start date input.
`clear()`	Clears the selected date value(s), resets formatted values, and emits appropriate events.

Note: The DatePicker uses v-model:show binding to control panel visibility, so there's no need to manually control the panel visibility through methods.

Date Picker ​

Basic Usage ​

With Custom Format ​

With CTA buttons ​

All Sizes ​

Month Picker ​

Year Picker ​

Year Grid ​

Year Scroll ​

With Shortcuts ​

Date Range Selection ​

Custom Prefix Icon ​

Custom Trigger ​

Disabled Dates ​

Using Side Content Panels ​

Panel Mode ​

Imports ​

Props ​

Type Examples ​

Emits ​

Slots ​

Methods ​

Date Picker

Basic Usage

With Custom Format

With CTA buttons

All Sizes

Month Picker

Year Picker

Year Grid

Year Scroll

With Shortcuts

Date Range Selection

Custom Prefix Icon

Custom Trigger

Disabled Dates

Using Side Content Panels

Panel Mode

Imports

Props

Type Examples

Emits

Slots

Methods