oslstats/internal/view/component/datepicker/README.md

DatePicker Component

A reusable, standalone date picker component for oslstats forms.

Features

✨ Interactive Calendar

• Click-to-open dropdown calendar
• Month and year dropdown selectors for easy navigation
• Previous/next month arrow buttons
• Today's date highlighted in blue

📅 Date Format

• DD/MM/YYYY format (the sensible way)
• Pattern validation built-in
• Read-only input (date selection via picker only)

🎨 Design

• Consistent with Catppuccin theme
• Responsive layout
• Hover effects and visual feedback
• Calendar icon in input field

🔧 Technical

• Built with Alpine.js (already in project)
• No external dependencies
• Year range: 2001-2051
• Submits in DD/MM/YYYY format

Usage

Basic Example

import "git.haelnorr.com/h/oslstats/internal/view/component/datepicker"

// Simple usage - required field, no custom onChange
@datepicker.DatePicker(
    "event_date",          // id
    "event_date",          // name
    "Event Date",          // label
    "DD/MM/YYYY",         // placeholder
    true,                  // required
    ""                     // onChange (empty = none)
)

With Custom onChange Handler

// With Alpine.js validation logic
@datepicker.DatePicker(
    "start_date",
    "start_date",
    "Start Date",
    "DD/MM/YYYY",
    true,
    "dateIsEmpty = false; validateForm();"
)

Optional Field

// Non-required field
@datepicker.DatePicker(
    "end_date",
    "end_date",
    "End Date (Optional)",
    "DD/MM/YYYY",
    false,              // not required
    ""
)

Parameters

Parameter	Type	Description	Example
id	string	Unique ID for the input element	"start_date"
name	string	Form field name (used in form submission)	"start_date"
label	string	Display label above the input	"Start Date"
placeholder	string	Placeholder text in the input	"DD/MM/YYYY"
required	bool	Whether the field is required	true or false
onChange	string	Alpine.js expression to run when date changes	"updateForm();" or ""

Server-Side Parsing

The date picker submits dates in DD/MM/YYYY format. Parse on the server like this:

import "time"

// Parse DD/MM/YYYY format
dateStr := r.FormValue("start_date")  // e.g., "15/02/2026"
date, err := time.Parse("02/01/2006", dateStr)
if err != nil {
    // Handle invalid date
}

Important: The format string is "02/01/2006" (DD/MM/YYYY), NOT "01/02/2006" (MM/DD/YYYY).

Integration with Alpine.js Forms

The date picker works seamlessly with Alpine.js validation:

<form x-data="{ 
    dateIsEmpty: true,
    dateError: '',
    canSubmit: false,
    updateCanSubmit() {
        this.canSubmit = !this.dateIsEmpty;
    }
}">
    @datepicker.DatePicker(
        "event_date",
        "event_date",
        "Event Date",
        "DD/MM/YYYY",
        true,
        "dateIsEmpty = $el.value === ''; updateCanSubmit();"
    )
    
    <!-- Error message -->
    <p x-show="dateError" x-text="dateError"></p>
    
    <!-- Submit button -->
    <button x-bind:disabled="!canSubmit">Submit</button>
</form>

Styling

The component uses Tailwind CSS classes and Catppuccin theme colors:

• bg-mantle, bg-surface0, bg-surface1 - backgrounds
• border-surface1 - borders
• text-subtext0 - muted text
• bg-blue - accent color (today's date)
• focus:border-blue - focus states

All styling is built-in; no additional CSS required.

Browser Compatibility

Works in all modern browsers that support:

• Alpine.js 3.x
• ES6 JavaScript (arrow functions, template literals, etc.)
• CSS Grid

Examples in Codebase

See internal/view/component/form/new_season.templ for a real-world usage example.