Date Picker

<pa-date-picker> | PaDatePicker

A feature-rich date picker component built on @vuepic/vue-datepicker with validation, flexible formatting, and customizable display options. Supports both inline and dropdown modes with weekend highlighting and date constraints.

<pa-date-picker v-model="selectedDate" />

Examples

Basic Date Picker

<template>
  <pa-date-picker v-model="selectedDate" placeholder="Select a date..." />
</template>

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

const selectedDate = ref(null)
</script>

Dropdown Style

Use the isDropdown prop to enable a dropdown style with calendar and chevron icons.

<template>
  <pa-date-picker 
    v-model="dropdownDate" 
    is-dropdown 
    placeholder="Choose date..." 
  />
</template>

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

const dropdownDate = ref(null)
</script>

With Label

Add a floating label that appears when the field is focused or has a value.

Birth Date

<template>
  <pa-date-picker 
    v-model="birthDate" 
    label="Birth Date" 
  />
</template>

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

const birthDate = ref(null)
</script>

Date Constraints

Set minimum and maximum dates to restrict date selection.

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-date-picker 
      v-model="futureDate" 
      :min-date="new Date()" 
      placeholder="Future dates only" 
    />
    <pa-date-picker 
      v-model="rangeDate" 
      :min-date="new Date('2020-01-01')" 
      :max-date="new Date('2025-12-31')" 
      placeholder="Date range 2020-2025" 
    />
  </div>
</template>

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

const futureDate = ref(null)
const rangeDate = ref(null)
</script>

Required Field

Mark the date picker as required for form validation.

<template>
  <pa-date-picker 
    v-model="requiredDate" 
    required 
    placeholder="Required date field" 
  />
</template>

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

const requiredDate = ref(null)
</script>

Date Output Formats

Configure different output formats for the v-model value.

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-date-picker 
      v-model="dateObject" 
      format="date" 
      placeholder="Date object output" 
    />
    <pa-date-picker 
      v-model="isoString" 
      format="iso_string" 
      placeholder="ISO string output" 
    />
    <pa-date-picker 
      v-model="shortIsoString" 
      format="short_iso_string" 
      placeholder="Short ISO string output (default)" 
    />
  </div>
</template>

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

const dateObject = ref(null)       // Outputs: Date object
const isoString = ref(null)        // Outputs: "2024-12-25T00:00:00.000Z"
const shortIsoString = ref(null)   // Outputs: "2024-12-25"
</script>

Weekend Options

Control weekend display and behavior.

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-date-picker 
      v-model="weekendDate1" 
      placeholder="With weekends highlighted" 
    />
    <pa-date-picker 
      v-model="weekendDate2" 
      :show-weekends="false" 
      placeholder="No weekend highlighting" 
    />
    <pa-date-picker 
      v-model="weekendDate3" 
      weekend-tooltip="Weekend day" 
      placeholder="Custom weekend tooltip" 
    />
  </div>
</template>

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

const weekendDate1 = ref(null)
const weekendDate2 = ref(null)
const weekendDate3 = ref(null)
</script>

Importing

import { PaDatePicker } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
modelValue	The selected date value (used with v-model).	no	Date | string | null	null
format	Output format for the v-model value.	no	'date' | 'iso_string' | 'short_iso_string'	'short_iso_string'
isDropdown	Display as a dropdown with calendar and chevron icons.	no	boolean	false
required	Marks the date picker as required for validation.	no	boolean	false
showWeekends	Whether to highlight weekends in the calendar.	no	boolean	true
showToday	Whether to show a "Today" button.	no	boolean	true
minDate	Minimum selectable date.	no	Date | string | null	null
maxDate	Maximum selectable date.	no	Date | string | null	null
placeholder	Placeholder text for the input field.	no	string | null	null
weekendPopupOver	Whether weekend tooltips appear on hover.	no	boolean	true
isInline	Display the calendar inline instead of as a popup.	no	boolean	false
weekendTooltip	Custom tooltip text for weekend days.	no	string | null	null
label	Floating label text that appears above the input.	no	string	''
sfSelector	Custom selector for testing frameworks.	no	string | null	null

Events

Name	Description	Event Detail
update:modelValue	Emitted when the selected date changes (for v-model).	New date value in specified format
focus	Emitted when the input receives focus.	Focus event
blur	Emitted when the input loses focus.	Blur event

Slots

The date picker component does not support custom slots.

Dependencies

• @vuepic/vue-datepicker: Core date picker functionality and calendar display
• PaIcon: Used for calendar and chevron icons in dropdown mode
• Validation Mixin: Provides built-in validation capabilities with visual feedback
• Date Utils: Internal utility functions for date formatting and manipulation
• Bootstrap CSS: Uses Bootstrap's form control styling for consistent appearance

Design Notes

The date picker component provides:

• Flexible formatting: Three output formats (Date object, ISO string, short ISO string)
• Multiple display modes: Inline calendar or dropdown with icons
• Date constraints: Min/max date validation with automatic enforcement
• Weekend highlighting: Configurable weekend display with custom tooltips
• Floating labels: Optional labels that animate based on focus and value state
• Built-in validation: Automatic validation with visual feedback states
• Locale support: Uses en-GB locale with dd/MM/yyyy display format

This component is ideal for:

• Form date inputs with validation requirements
• Event scheduling and booking systems
• Date range selection with constraints
• Birthday and anniversary inputs
• Appointment and calendar applications

Accessibility Notes

• Uses semantic HTML input elements for proper screen reader support
• Maintains focus states for keyboard navigation
• Supports ARIA attributes and validation messages
• Required fields are properly marked for assistive technologies
• Validation states are communicated visually and programmatically
• Calendar navigation is keyboard accessible through the underlying vue-datepicker

Format Options

The format prop determines how the selected date is output through v-model:

• 'date': Returns a JavaScript Date object
• 'iso_string': Returns a full ISO 8601 string (e.g., "2024-12-25T00:00:00.000Z")
• 'short_iso_string' (default): Returns a short ISO date string (e.g., "2024-12-25")

Choose the format that best matches your backend API requirements or data processing needs.