PhiaUi.Components.WeekPicker (phia_ui v0.1.17)

Week selection input — styled native <input type="week">.

Wraps the browser's native week picker with PhiaUI's input styling (borders, focus ring, size variants, error state). Supports standalone use or Phoenix form field integration with changeset error display.

The value format follows the ISO 8601 week notation: "YYYY-Www" (e.g. "2026-W10").

Present in scheduling and reporting UIs: Mantine WeekPicker, Ant Design DatePicker (picker="week"), MUI DatePicker with week view.

Zero JavaScript — uses the native browser week control.

Examples

<%!-- Standalone --%>
<.week_picker id="report_week" name="report_week" label="Reporting Week" value="2026-W10" />

<%!-- With min/max constraint --%>
<.week_picker id="sprint" name="sprint" min="2026-W01" max="2026-W52" />

<%!-- Form field integration --%>
<.week_picker
  id="event_week"
  name={@form[:week].name}
  value={@form[:week].value}
  errors={Enum.map(@form[:week].errors, &translate_error/1)}
  label="Event Week"
/>

Summary

Functions

week_picker(assigns)

Functions

week_picker(assigns)

Attributes

id (:string) - HTML id for the input and label for link. Defaults to nil.
name (:string) - HTML name for form submission. Defaults to nil.
value (:string) - Current week value in ISO format, e.g. "2026-W10". Defaults to nil.
label (:string) - Label text rendered above the input. Defaults to nil.
description (:string) - Helper text rendered below the label. Defaults to nil.
errors (:list) - List of error message strings. Defaults to [].
disabled (:boolean) - Disables the input. Defaults to false.
size (:atom) - Input height/padding: :sm (h-8), :default (h-10), :lg (h-12). Defaults to :default. Must be one of :sm, :default, or :lg.
class (:string) - Additional CSS classes merged onto the input. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["required", "placeholder", "phx-debounce", "min", "max"].