Date Picker

package datepicker

import "github.com/alternayte/gx/registry/calendar"
import "github.com/alternayte/gx/registry/popover"

props {
  // Id is the id of the date input. A label points at it.
  Id          string
  // Name is the form field name. The form sends the day as YYYY-MM-DD.
  Name        string = ""
  // Value is the chosen day of the first render, as YYYY-MM-DD.
  Value       string = ""
  // Min is the first day that a user can choose, as YYYY-MM-DD.
  Min         string = ""
  // Max is the last day that a user can choose, as YYYY-MM-DD.
  Max         string = ""
  // Placeholder is the text of the trigger with no chosen day.
  Placeholder string = "Pick a date"
  // Label is the accessible name of the date input.
  Label       string = "Date"
  // WeekStart is the first day of the week: calendar.Sunday or calendar.Monday.
  WeekStart   calendar.WeekStart = calendar.Sunday
  // Locale is the language of the month and day names, as a BCP 47 tag. Empty means the language of the page.
  Locale      string = ""
  // Class adds classes to the root element.
  Class       string = ""
  // Attrs adds HTML attributes to the date input.
  Attrs       gx.Attrs = nil
}

<div data-slot="date-picker" class={gx.Cx("inline-block", p.Class)}>
  <popover.PopoverTrigger id={p.popoverID()} class={triggerClass}>
    <span id={p.displayID()} data-empty={p.empty()} class={displayClass}>{p.text()}</span>
  </popover.PopoverTrigger>
  <popover.Popover id={p.popoverID()} align={popover.Start} class="w-auto p-0">
    <calendar.Calendar id={p.Id} name={p.Name} value={p.Value} min={p.Min} max={p.Max} label={p.Label} weekStart={p.WeekStart} locale={p.Locale} display={p.displayID()} popover={p.popoverID()} class="border-0" attrs={p.Attrs} />
  </popover.Popover>
</div>

package datepicker

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/calendar"
)

var DatePickerFixtures = gx.Fixtures[DatePickerProps]{
	"Empty":   {Id: "date-empty", Name: "day"},
	"Chosen":  {Id: "date-chosen", Name: "day", Value: "2026-10-14"},
	"Limited": {Id: "date-limited", Name: "day", Value: "2026-10-14", Min: "2026-10-10", Max: "2026-10-20", WeekStart: calendar.Monday},
}

// Package datepicker is a button that opens a calendar in a popover.
package datepicker

// triggerClass is the classes of the trigger button: as wide as a date and
// with its text at the start.
const triggerClass = "w-64 justify-start font-normal"

// displayClass is the classes of the text of the trigger. The placeholder
// is muted.
const displayClass = "truncate data-[empty=true]:text-muted-foreground"

// popoverID returns the id of the popover.
func (p DatePickerProps) popoverID() string { return p.Id + "-popover" }

// displayID returns the id of the element that shows the chosen day.
func (p DatePickerProps) displayID() string { return p.Id + "-display" }

// empty reports, as an attribute value, whether no day is chosen.
func (p DatePickerProps) empty() string {
	if p.Value == "" {
		return "true"
	}
	return "false"
}

// text returns the text of the trigger for the first render: the day as
// the server has it, or the placeholder. The calendar island writes the day
// in the language of the user.
func (p DatePickerProps) text() string {
	if p.Value != "" {
		return p.Value
	}
	// A props value that Go code makes has no default.
	if p.Placeholder == "" {
		return "Pick a date"
	}
	return p.Placeholder
}