A native date control with explicit constraints and server-owned semantics.
app/components/nitro_kit/datepicker.rbNitroKit::Datepicker.new(id:, name:, value:, min:, max:)Date selection remains a native input with server-verifiable constraints.
test/dummy/app/components/gallery/components/datepicker_page.rbsample("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" }
)
endField anatomy can explicitly own labels and help text around the dedicated date control.
test/dummy/app/components/gallery/components/datepicker_page.rbrender 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