Datepicker

A native date control with explicit constraints and server-owned semantics.

Source
app/components/nitro_kit/datepicker.rb
API
NitroKit::Datepicker.new(id:, name:, value:, min:, max:)

Native states

Date selection remains a native input with server-verifiable constraints.

State matrix

Empty
Selected
Required range
Read only
Disabled
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/datepicker_page.rb
sample("Empty", slug: "empty") do
  render_datepicker("gallery-datepicker-empty", aria: { label: "Start date" })
end
sample("Selected", slug: "selected") do
  render_datepicker("gallery-datepicker-selected", value: Date.new(2026, 7, 13), aria: { label: "Start date" })
end
sample("Required range", slug: "required-range") do
  render_datepicker(
    "gallery-datepicker-required",
    min: Date.new(2026, 7, 13),
    max: Date.new(2026, 8, 13),
    required: true,
    aria: { label: "Deployment date" }
  )
end
sample("Read only", slug: "readonly") do
  render_datepicker(
    "gallery-datepicker-readonly",
    value: Date.new(2026, 7, 13),
    readonly: true,
    aria: { label: "Invoice date" }
  )
end
sample("Disabled", slug: "disabled") do
  render_datepicker(
    "gallery-datepicker-disabled",
    value: Date.new(2026, 7, 13),
    disabled: true,
    aria: { label: "Archived date" }
  )
end

Scheduling composition

Field anatomy can explicitly own labels and help text around the dedicated date control.

Schedule a release

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/datepicker_page.rb
render NitroKit::Card.new(id: "gallery-datepicker-release-card") do |card|
  card.title("Schedule production release", level: 3)
  card.body do
    form(id: "gallery-datepicker-release-form", action: "/gallery/releases", method: "post") do
      render NitroKit::Field.new(
        nil,
        :release_date,
        id: "gallery-datepicker-release-date",
        name: "release[date]",
        label: "Release date",
        description: "Choose a weekday within the next thirty days.",
        required: true
      ) do |field|
        field.label
        field.description
        render NitroKit::Datepicker.new(
          id: "gallery-datepicker-release-date",
          name: "release[date]",
          value: Date.new(2026, 7, 20),
          min: Date.new(2026, 7, 13),
          max: Date.new(2026, 8, 12),
          required: true,
          aria: { describedby: "gallery-datepicker-release-date-description" }
        )
      end
      render NitroKit::Button.new(
        "Schedule release",
        id: "gallery-datepicker-schedule",
        type: :submit,
        variant: :primary
      )
    end
  end
end