Date Picker

Date picker components for scheduling appointments and selecting dates. Essential for property viewings, contract deadlines, and booking management.

Basic Date Pickers

Single Date Picker

Select individual dates for appointments

Select viewing date
December 2024
Mo
Tu
We
Th
Fr
Sa
Su

Real Estate Examples

Property Viewing Scheduler

Book property viewings with available time slots

December 15, 2024
Select viewing time
10:00 AM - Available
2:00 PM - Available
4:00 PM - Booked
6:00 PM - Available

Implementation Guide

HTML Usage

<div class="lyd-datepicker">
    <div class="lyd-datepicker-input" tabindex="0">
        <svg class="lyd-datepicker-icon" viewBox="0 0 24 24">...</svg>
        <span>Select date</span>
    </div>
    <div class="lyd-datepicker-calendar">
        <div class="lyd-datepicker-header">
            <button class="lyd-datepicker-nav">‹</button>
            <div class="lyd-datepicker-month-year">December 2024</div>
            <button class="lyd-datepicker-nav">›</button>
        </div>
        <div class="lyd-datepicker-grid">...</div>
    </div>
</div>

Next.js Integration

// components/DatePicker.tsx
import { useState } from 'react';

interface DatePickerProps {
  value?: Date;
  onChange?: (date: Date) => void;
  placeholder?: string;
  minDate?: Date;
  maxDate?: Date;
  disabled?: boolean;
}

export const DatePicker = ({ value, onChange, placeholder = "Select date" }: DatePickerProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentDate, setCurrentDate] = useState(value || new Date());

  return (
    <div className="lyd-datepicker">
      <div className="lyd-datepicker-input" onClick={() => setIsOpen(!isOpen)}>
        <CalendarIcon className="lyd-datepicker-icon" />
        <span>{value ? value.toLocaleDateString() : placeholder}</span>
      </div>
      {isOpen && (
        <div className="lyd-datepicker-calendar">
          {/* Calendar implementation */}
        </div>
      )}
    </div>
  );
};

API Reference

Class Description
.lyd-datepicker Base datepicker class with premium styling
.lyd-datepicker-wrapper datepicker container with consistent spacing
.small Small datepicker size (14px - Typography Scale)
.large Large datepicker size (18px - Typography Scale)
.primary Primary datepicker variant with CI gradient
.success Success state with green styling
.error Error state with red styling and validation
.disabled Disabled state with reduced opacity

Accessibility & Best Practices

Keyboard Navigation

Full keyboard support with arrow keys for date navigation and Enter/Space for selection.

Screen Reader Support

ARIA labels and live regions announce selected dates and calendar navigation to screen readers.

Focus Management

Clear focus indicators and proper focus trapping within the calendar popup for better usability.

Date Formatting

Consistent date formatting and locale support for international users and different date preferences.