shadcn-rails

Date Picker

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

Requires JavaScript

Installation

Add the component to your project:

rails generate shadcn:component date_picker

Usage

<%= render Shadcn::DatePickerComponent.new %>

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 to enable form submission.

<%= render Shadcn::DatePickerComponent.new(
  name: "event[date]",
  selected: Date.today,
  placeholder: "Select event date"
) %>

Date Formats

Use the format prop to change how dates are displayed.

Short

Medium (default)

Long

<%# Short format: 11/26/2024 %>
<%= render Shadcn::DatePickerComponent.new(
  selected: Date.today,
  format: :short
) %>

<%# Medium format (default): November 26, 2024 %>
<%= render Shadcn::DatePickerComponent.new(
  selected: Date.today,
  format: :medium
) %>

<%# Long format: Tuesday, November 26, 2024 %>
<%= render Shadcn::DatePickerComponent.new(
  selected: Date.today,
  format: :long
) %>

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

The date picker can be disabled.

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