seasons can be added now

2026-02-02 19:46:14 +11:00
parent 67bf84c3a6
commit ddfc0b7671
8 changed files with 860 additions and 6 deletions
--- a/internal/view/component/datepicker/README.md
+++ b/internal/view/component/datepicker/README.md
@@ -0,0 +1,154 @@
+# 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
+
+```templ
+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
+
+```templ
+// With Alpine.js validation logic
+@datepicker.DatePicker(
+    "start_date",
+    "start_date",
+    "Start Date",
+    "DD/MM/YYYY",
+    true,
+    "dateIsEmpty = false; validateForm();"
+)
+```
+
+### Optional Field
+
+```templ
+// 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:
+
+```go
+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:
+
+```templ
+<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.