Vue Component Library

Appearance

DatePicker Component ​

A comprehensive date and time picker component built on VueDatePicker with advanced features and customizable formatting.

Overview ​

The DatePicker component provides:

  • Multiple Picker Types: Date, time, and datetime selection
  • Advanced Selection Modes: Single date, date ranges, and multiple dates
  • Flexible Formatting: Customizable input/output formats using moment.js
  • Rich Configuration: Extensive options for constraints, display, and behavior
  • Smart Input Integration: Seamless integration with OInput component
  • Accessibility: Full keyboard navigation and screen reader support

When to Use ​

Use the DatePicker component when you need to:

  • Allow users to select dates, times, or both from intuitive interfaces
  • Collect date ranges for booking systems or scheduling
  • Enable multiple date selection for events or availability
  • Provide consistent date/time input across your application
  • Validate date inputs against business rules and constraints

Key Features ​

Multiple Picker Types ​

  • Date Picker: Calendar interface for date selection
  • Time Picker: Clock interface for time selection (12/24 hour format)
  • DateTime Picker: Combined date and time selection

Selection Modes ​

  • Single Selection: Choose one date or time
  • Range Selection: Select start and end dates/times
  • Multiple Selection: Choose multiple dates with optional limit

Advanced Formatting ​

  • Input Format: Customize how dates are displayed in the input
  • Output Format: Control the format of emitted values
  • Moment.js Integration: Full support for moment.js formatting patterns
  • Automatic Format Detection: Smart defaults based on picker type

Constraints and Validation ​

  • Date Constraints: Set minimum and maximum selectable dates
  • Disabled Dates: Exclude specific dates from selection
  • Disabled Week Days: Prevent selection on specific days of the week
  • Year Range: Limit available years in the picker
  • Form Validation: Integrate with validation rules

Display Options ​

  • Custom Icons: Calendar and clock icons with clear functionality
  • Header/Footer Slots: Custom content in picker header and footer
  • Theme Support: Light and dark theme compatibility
  • Localization: Multi-language support with locale configuration
  • Week Numbers: Optional week number display
  • Six Week Display: Show six weeks in calendar view

Time Picker Features ​

  • 12/24 Hour Format: Toggle between 12 and 24-hour display
  • Seconds Support: Optional seconds selection
  • Time Constraints: Set minimum and maximum times
  • Auto-apply: Immediate selection or confirmation buttons

Accessibility & UX ​

  • Keyboard Navigation: Full keyboard support for all interactions
  • Screen Reader Support: Proper ARIA labels and descriptions
  • Focus Management: Intelligent focus handling
  • Responsive Design: Adapts to different screen sizes
  • Smart Positioning: Automatic positioning based on available space

Component Types ​

Date Picker ​

vue
<ODatePicker v-model="date" type="date" />

Time Picker ​

vue
<ODatePicker v-model="time" type="time" :is24Hour="true" />

DateTime Picker ​

vue
<ODatePicker v-model="datetime" type="datetime" />

Range Picker ​

vue
<ODatePicker v-model="dateRange" :range="true" />

Multi-Date Picker ​

vue
<ODatePicker v-model="multipleDates" :multiDates="true" :multiDatesLimit="5" />

API Reference →

View Code →