Components / Date Picker

Date Picker

Stable Stimulus: senren--date-picker

date input fields

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../date_picker_example.html.erb

<div class="w-full max-w-sm">
  <%= render Senren::DatePickerComponent.new(name: "due_on", value: "2026-04-27") %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add date_picker --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component date_picker --client

Dependencies are resolved by senren:add: calendar, popover, input.

At a glance #

Category Forms

Class name Senren::DatePickerComponent

Stimulus senren--date-picker

Variants default, error

Depends on calendar, popover, input

Pairs with form, label

Source #

app/components/senren/date_picker_component.html.erb

<div <%= tag.attributes(**root_attrs("flex w-full items-center gap-2", data: { controller: "senren--date-picker" })) %>>
  <input type="date" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="hover:cursor-pointerh-10 w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] <%= self.class::VARIANTS[variant] %>">
  <button type="button" data-action="click->senren--date-picker#today" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]">Today</button>
  <button type="button" data-action="click->senren--date-picker#clear" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-3 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]">Clear</button>
</div>

app/components/senren/date_picker_component.rb

# frozen_string_literal: true

module Senren
  class DatePickerComponent < BaseComponent
    VARIANTS = {
      default: 'border-[hsl(var(--senren-input))]',
      error: 'border-[hsl(var(--senren-destructive))]'
    }.freeze
    SIZES = { md: '' }.freeze

    def initialize(name:, value: nil, id: nil, placeholder: 'Select date', variant: :default, class_name: nil, **html)
      super(variant: variant, size: :md, class_name: class_name, **html)
      @name = name
      @value = value
      @id = id || name
      @placeholder = placeholder
    end

    attr_reader :name, :value, :id, :placeholder
  end
end

AI agent rules #

Use for

+date input fields

Avoid

-date ranges - use a range component once added

Accessibility #

Pair input with hidden calendar; provide manual typing fallback.

Calendar

Carousel