​
DatePicker Component - Usage Guide

​
✨ Features

The DatePicker component is a fully-featured calendar picker with:
  • ✅ Calendar Grid View - Visual date selection
  • ✅ Month/Year Picker - Quick navigation to any month/year
  • ✅ Range Selection - Select date ranges
  • ✅ Min/Max Dates - Restrict selectable dates
  • ✅ Disabled Dates - Custom disabled dates
  • ✅ Highlighted Dates - Mark special dates (holidays, events)
  • ✅ Popover API - Native browser positioning
  • ✅ Anchor Positioning - Auto-flip based on viewport space
  • ✅ Smooth Animations - Enter/exit transitions
  • ✅ Fully Accessible - Keyboard navigation, ARIA labels

​
📖 Basic Usage

​
Single Date Selection

import { DatePicker } from "@monorepo/solid-pkg-ui";
import { createSignal } from "solid-js";

const [date, setDate] = createSignal("");

<DatePicker
  label="Start Date"
  value={date()}
  onChange={setDate}
  placeholder="Select a date"
/>;

​
Date Range Selection

const [startDate, setStartDate] = createSignal("");
const [endDate, setEndDate] = createSignal("");

<DatePicker
  label="Leave Period"
  mode="range"
  value={startDate()}
  rangeEnd={endDate()}
  onRangeChange={(start, end) => {
    setStartDate(start);
    setEndDate(end);
  }}
  placeholder="Select date range"
/>;

​
With Min/Max Dates

<DatePicker
  label="Booking Date"
  value={date()}
  onChange={setDate}
  minDate="2024-01-01"
  maxDate="2024-12-31"
  placeholder="Select within 2024"
/>

​
With Disabled Dates

const weekends = [
  "2024-12-28", // Saturday
  "2024-12-29", // Sunday
  // ...more weekend dates
];

<DatePicker
  label="Working Day"
  value={date()}
  onChange={setDate}
  disabledDates={weekends}
  placeholder="Select a weekday"
/>;

​
With Highlighted Dates (Holidays)

const holidays = [
  {
    date: "2024-12-25",
    label: "Christmas Day",
    color: "warning",
  },
  {
    date: "2024-01-01",
    label: "New Year",
    color: "success",
  },
];

<DatePicker
  label="Leave Date"
  value={date()}
  onChange={setDate}
  highlightDates={holidays}
  placeholder="Select date"
/>;

​
🎨 UI Views

​
Calendar View (Default)

  • Month/year header with navigation arrows
  • 7-column grid (Sun-Sat)
  • Click on month/year to switch to month picker
  • Click date to select

​
Month/Year Picker

  • Year input field
  • 3x4 grid of month buttons
  • Selected month is highlighted
  • Click month to return to calendar view

​
🎯 Props API

interface DatePickerProps {
  // Value & onChange
  value?: string; // ISO date (YYYY-MM-DD)
  onChange: (value: string) => void;

  // Range mode
  mode?: "single" | "range"; // Default: 'single'
  rangeEnd?: string; // End date for range mode
  onRangeChange?: (start: string, end: string) => void;

  // Restrictions
  minDate?: string; // ISO date
  maxDate?: string; // ISO date
  disabledDates?: string[]; // Array of ISO dates

  // Special dates
  highlightDates?: {
    date: string;
    label?: string;
    color?: string;
  }[];

  // Display
  label?: string;
  placeholder?: string;
  class?: string;
  disabled?: boolean;
}

​
💡 Tips

​
Working with ISO Dates

The component uses ISO date strings (YYYY-MM-DD): 
// Create ISO date from Date object
const isoDate = new Date().toISOString().split("T")[0]; // "2024-12-29"

// Parse ISO date to Date object
const dateObj = new Date(isoDate);

// Format for display
const display = dateObj.toLocaleDateString("en-US", {
  month: "short",
  day: "numeric",
  year: "numeric",
}); // "Dec 29, 2024"

​
Generating Disabled Dates

// Disable all Saturdays and Sundays in a month
const getWeekends = (year: number, month: number) => {
  const dates: string[] = [];
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  for (let day = 1; day <= daysInMonth; day++) {
    const date = new Date(year, month, day);
    if (date.getDay() === 0 || date.getDay() === 6) {
      dates.push(date.toISOString().split("T")[0]);
    }
  }

  return dates;
};

​
Company Holidays

const companyHolidays = [
  { date: "2024-12-25", label: "Christmas", color: "red" },
  { date: "2024-12-26", label: "Boxing Day", color: "red" },
  { date: "2024-01-01", label: "New Year", color: "blue" },
  { date: "2024-07-04", label: "Independence Day", color: "blue" },
];

<DatePicker
  value={date()}
  onChange={setDate}
  highlightDates={companyHolidays}
  disabledDates={companyHolidays.map((h) => h.date)} // Also disable holidays
/>;

​
🎬 Animations

The DatePicker includes smooth transitions:
  • Opening: Fade in + slide down + scale up (200ms)
  • Closing: Fade out + slide up + scale down (200ms)
  • Uses transition-behavior: allow-discrete for complete exit animation

​
🔧 Styling

The component uses glassmorphism design: 
.glass-panel {
  backdrop-filter: blur(16px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.2)
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
}

​
Custom Styling

<DatePicker class="w-full md:w-64" value={date()} onChange={setDate} />

​
🚀 Best Practices

  1. Always provide a label for accessibility
  2. Use min/max dates to prevent invalid selections
  3. Highlight important dates like holidays and events
  4. For ranges, provide clear visual feedback
  5. Disable past dates for future-only selections:
const today = new Date().toISOString().split("T")[0];

<DatePicker
  minDate={today}
  value={date()}
  onChange={setDate}
  label="Future Date Only"
/>;

​
✅ Complete Example: Leave Request Form

import { DatePicker } from "@monorepo/solid-pkg-ui";
import { createSignal } from "solid-js";

export const LeaveRequestForm = () => {
  const [startDate, setStartDate] = createSignal("");
  const [endDate, setEndDate] = createSignal("");

  const holidays = [
    { date: "2024-12-25", label: "Christmas" },
    { date: "2024-01-01", label: "New Year" },
  ];

  const today = new Date().toISOString().split("T")[0];

  return (
    <div class="space-y-4">
      <DatePicker
        label="Leave Period"
        mode="range"
        value={startDate()}
        rangeEnd={endDate()}
        onRangeChange={(start, end) => {
          setStartDate(start);
          setEndDate(end);
        }}
        minDate={today}
        highlightDates={holidays}
        placeholder="Select leave dates"
      />
    </div>
  );
};
This creates a fully-featured leave request date picker! 🎉