shadcn-rails

Date Picker

A date picker input with a button trigger that opens a calendar popover.

Requires JavaScript
date-picker/default 
<%= render Shadcn::DatePickerComponent.new(selected: Date.new(2026, 8, 29), month: Date.new(2026, 8, 1)) %>

Installation

Add the component to your project:

rails generate shadcn:add date_picker

Usage

<%= render Shadcn::DatePickerComponent.new(selected: Date.new(2026, 8, 29), month: Date.new(2026, 8, 1)) %>

Examples

Pre-selected Date

Use the selected prop to set an initial date.

<%= render Shadcn::DatePickerComponent.new(selected: Date.today) %>

Form Integration

Use the name prop inside a Rails form to enable form submission.

<%= form_with url: events_path, scope: :event, class: "space-y-4" do |form| %>
  <div class="space-y-2">
    <%= form.label :date, "Event Date" %>
    <%= render Shadcn::DatePickerComponent.new(
      name: "event[date]",
      selected: Date.today,
      placeholder: "Select event date"
    ) %>
  </div>

  <%= form.submit "Save event" %>
<% end %>

Date Formats

Use the format prop to change how dates are displayed.

Short

Medium (default)

Long

<div class="flex flex-wrap gap-4">
  <div class="space-y-2">
    <p class="text-xs text-muted-foreground">Short</p>
    <%= render Shadcn::DatePickerComponent.new(selected: Date.today, format: :short) %>
  </div>
  <div class="space-y-2">
    <p class="text-xs text-muted-foreground">Medium (default)</p>
    <%= render Shadcn::DatePickerComponent.new(selected: Date.today, format: :medium) %>
  </div>
  <div class="space-y-2">
    <p class="text-xs text-muted-foreground">Long</p>
    <%= render Shadcn::DatePickerComponent.new(selected: Date.today, format: :long) %>
  </div>
</div>

Date Constraints

Use min_date and max_date to limit selectable dates.

<%= render Shadcn::DatePickerComponent.new(
  min_date: Date.today,
  max_date: Date.today + 30.days,
  placeholder: "Select date (next 30 days)"
) %>

Disabled Dates

Pass specific dates that should not be selectable.

<%= render Shadcn::DatePickerComponent.new(
  selected: Date.today + 1.day,
  disabled_dates: [
    Date.today,
    Date.today + 2.days,
    Date.today + 5.days
  ],
  placeholder: "Select an available date"
) %>

Disabled

The date picker can be disabled.

<%= render Shadcn::DatePickerComponent.new(disabled: true) %>

API Reference

DatePickerComponent

API Reference

Prop Type Default Description
selected Date nil Currently selected date
month Date Date.today Month to display (defaults to selected date's month)
min_date Date nil Minimum selectable date
max_date Date nil Maximum selectable date
name String nil Form field name for hidden input
disabled_dates Array<Date> [] Specific dates that cannot be selected
show_outside_days Boolean true Whether to show days outside current month
placeholder String "Pick a date" Placeholder text when no date selected
format Symbol :medium Date format (:short, :medium, :long, :iso)
disabled Boolean false Whether the date picker is disabled
class_name String nil Additional CSS classes

Date Formats

Format Example Output
:short 11/26/2024
:medium November 26, 2024
:long Tuesday, November 26, 2024
:iso 2024-11-26

Events

The Date Picker dispatches a shadcn--date-picker:select event when a date is selected.

element.addEventListener("shadcn--date-picker:select", (event) => {
  console.log(event.detail.date)        // JavaScript Date object
  console.log(event.detail.dateString)  // ISO date string (YYYY-MM-DD)
})

Accessibility

  • Trigger button has aria-haspopup="dialog"
  • aria-expanded reflects popover state
  • Calendar uses role="grid"
  • aria-selected indicates selected date
  • Pressing Escape closes the popover
  • Clicking outside closes the popover