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

Always provide a label for accessibility
Use min/max dates to prevent invalid selections
Highlight important dates like holidays and events
For ranges, provide clear visual feedback
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! 🎉

Getting Started

Development

UI Components

DatePicker Usage

DatePicker Component - Usage Guide

✨ Features

📖 Basic Usage

Single Date Selection

Date Range Selection

With Min/Max Dates

With Disabled Dates

With Highlighted Dates (Holidays)

🎨 UI Views

Calendar View (Default)

Month/Year Picker

🎯 Props API

💡 Tips

Working with ISO Dates

Generating Disabled Dates

Company Holidays

🎬 Animations

🔧 Styling

Custom Styling

🚀 Best Practices

✅ Complete Example: Leave Request Form

​DatePicker Component - Usage Guide

​✨ Features

​📖 Basic Usage

​Single Date Selection

​Date Range Selection

​With Min/Max Dates

​With Disabled Dates

​With Highlighted Dates (Holidays)

​🎨 UI Views

​Calendar View (Default)

​Month/Year Picker

​🎯 Props API

​💡 Tips

​Working with ISO Dates

​Generating Disabled Dates

​Company Holidays

​🎬 Animations

​🔧 Styling

​Custom Styling

​🚀 Best Practices

​✅ Complete Example: Leave Request Form

DatePicker Component - Usage Guide

✨ Features

📖 Basic Usage

Single Date Selection

Date Range Selection

With Min/Max Dates

With Disabled Dates

With Highlighted Dates (Holidays)

🎨 UI Views

Calendar View (Default)

Month/Year Picker

🎯 Props API

💡 Tips

Working with ISO Dates

Generating Disabled Dates

Company Holidays

🎬 Animations

🔧 Styling

Custom Styling

🚀 Best Practices

✅ Complete Example: Leave Request Form