Rapid Rails UI Pro

—

Upgrade to unlock this component

Get Pro →

Date

Flexible date/time input component with multiple variants for different use cases.

Key Features

3 Variants - Native browser picker, custom calendar popup, Rails select dropdowns
3 Types - Date, datetime, time
Date Range - Built-in range mode with range: true
Presets - Quick date range presets (Today, Last 7 days, etc.)
Form Builder - Full Rails form integration (f.rui_date)
5 Sizes - xs, sm, base, lg, xl
3 Shapes - Square, rounded, pill
All Colors - Semantic colors + any Tailwind color
Constraints - Min/max date limits
Full Accessibility - ARIA attributes, keyboard navigation
JavaScript API - Programmatic control with data-action attributes

Basic Usage

Simple date input with label and help text. Use the positional first argument for clean, Rails-like syntax.

<%# Recommended: Positional syntax %>
<%= rui_date(:birthday, label: "Birthday") %>

<%= rui_date(:event_date,
  label: "Event Date",
  help_text: "Select when the event will occur"
) %>

Birthday

Event Date

Select when the event will occur

New in v0.15.0: The positional syntax rui_date(:name, ...) is now supported for cleaner standalone usage. Old keyword syntax name: :birthday still works for backward compatibility.

Variants

Three variant options for different use cases.

Picker (Default)

Beautiful Flowbite-inspired calendar popup with month navigation. The default variant.

<%= rui_date(name: :date, label: "Calendar Picker") %>

Calendar Picker

Picker Features: Click to open calendar, previous/next month navigation, keyboard navigation (arrow keys, Escape to close), min/max constraints. Add with_today: true and clearable: true for footer buttons.

Native

Uses the browser's native date picker. Best for simple use cases where you want native OS styling.

<%= rui_date(name: :date, variant: :native, label: "Native Date Picker") %>

Native Date Picker

Select

Wraps Rails' date_select helper. Renders as three dropdown menus for year, month, and day.

<%= rui_date(
  name: :birth_date,
  variant: :select,
  label: "Birth Date",
  start_year: 1950,
  end_year: Time.current.year
) %>

Birth Date

Types

Support for date, datetime, and time inputs.

<%= rui_date(name: :date, type: :date, label: "Date") %>
<%= rui_date(name: :meeting, type: :datetime, label: "Meeting Time") %>
<%= rui_date(name: :alarm, type: :time, label: "Alarm") %>

Date

DateTime

Time

Note: The :datetime type renders as datetime-local HTML input for proper datetime selection without timezone confusion.

Date Range

Enable date range selection with range: true. This creates two date inputs (start and end) with a beautiful calendar picker.

Form Builder Integration: When using f.rui_date(:period, range: true), the component automatically creates period_start and period_end inputs that bind to your model attributes.

Basic Range

<%= rui_date(
  name: :period,
  variant: :picker,
  range: true,
  label: "Select Period"
) %>

Select Period

Click to select a date range

Multiple Months

Display two months side-by-side for easier range selection (default for range mode).

<%= rui_date(
  name: :booking,
  variant: :picker,
  range: true,
  months: 2,  # Default for range mode
  label: "Booking Period"
) %>

Booking Period

Presets

Add quick date selection buttons for common ranges. Perfect for analytics dashboards and filters.

Available Presets

:today - Today only
:yesterday - Yesterday only
:last_7_days - Past 7 days including today
:last_14_days - Past 14 days including today
:last_30_days - Past 30 days including today
:this_week - Current week (Mon-Sun)
:last_week - Previous week
:this_month - Current month
:last_month - Previous month
:this_quarter - Current quarter
:last_quarter - Previous quarter
:this_year - Current year
:last_year - Previous year

Custom Preset Selection

<%= rui_date(
  name: :analytics_period,
  variant: :picker,
  range: true,
  presets: [:today, :last_7_days, :last_30_days, :this_month, :this_quarter],
  label: "Analytics Period"
) %>

Analytics Period

Select a preset or pick custom dates

All Presets

<%= rui_date(
  name: :filter,
  variant: :picker,
  range: true,
  presets: true,  # All available presets
  label: "Date Filter"
) %>

Date Filter

Colors

The color affects the calendar picker highlight and input focus ring. Supports all semantic colors and any Tailwind color.

Semantic Colors

<%= rui_date(name: :date, color: :default, label: "Default") %>
<%= rui_date(name: :date, color: :primary, label: "Primary") %>
<%= rui_date(name: :date, color: :success, label: "Success") %>
<%= rui_date(name: :date, color: :warning, label: "Warning") %>
<%= rui_date(name: :date, color: :danger, label: "Danger") %>
<%= rui_date(name: :date, color: :info, label: "Info") %>

Default

Primary

Success

Warning

Danger

Info

Tailwind Colors

All Tailwind colors are supported with automatic dark mode variants for calendar selection and focus states.

<!-- Tailwind colors -->
<%= rui_date(name: :date, color: :red, label: "Red") %>
<%= rui_date(name: :date, color: :blue, label: "Blue") %>
<%= rui_date(name: :date, color: :purple, label: "Purple") %>
<%= rui_date(name: :date, color: :pink, label: "Pink") %>
<%= rui_date(name: :date, color: :amber, label: "Amber") %>
<%= rui_date(name: :date, color: :green, label: "Green") %>

Red

Blue

Green

Purple

Pink

Amber

Sizes

Five size options from extra small to extra large.

<%= rui_date(name: :date, size: :xs, label: "Extra Small") %>
<%= rui_date(name: :date, size: :sm, label: "Small") %>
<%= rui_date(name: :date, size: :base, label: "Base (default)") %>
<%= rui_date(name: :date, size: :lg, label: "Large") %>
<%= rui_date(name: :date, size: :xl, label: "Extra Large") %>

Extra Small (xs)

Small (sm)

Base - default

Large (lg)

Extra Large (xl)

Shapes

Three shape options for border radius.

<%= rui_date(name: :date, shape: :square, label: "Square") %>
<%= rui_date(name: :date, shape: :rounded, label: "Rounded (default)") %>
<%= rui_date(name: :date, shape: :pill, label: "Pill") %>

Square

Rounded (default)

Pill

Constraints

Set minimum and maximum date constraints.

<%= rui_date(
  name: :booking,
  label: "Booking Date",
  min: Date.today,
  max: Date.today + 90.days,
  help_text: "Select a date within the next 90 days"
) %>

Booking Date

Select a date within the next 90 days

Time Step

For time inputs, use step to control the minute increment (in seconds).

<%= rui_date(
  name: :appointment,
  type: :time,
  label: "Appointment Time",
  step: 900,  # 15 minutes
  help_text: "Available in 15-minute slots"
) %>

Appointment Time

Available in 15-minute slots

States

Required, disabled, and error states.

<%= rui_date(name: :deadline, label: "Deadline", required: true) %>
<%= rui_date(name: :locked, label: "Locked Date", disabled: true, value: Date.today) %>
<%= rui_date(name: :invalid, label: "Invalid Date", error_message: "Please select a valid date") %>

Deadline *

Locked Date

Invalid Date

Please select a valid date

Form Builder Integration

Use with Rails form builder for automatic object binding and validation.

<%= form_with model: @event do |f| %>
  <%= f.rui_date(:start_date,
    label: "Start Date",
    required: true
  ) %>

  <%= f.rui_date(:end_date,
    label: "End Date",
    min: Date.today
  ) %>

  <%= f.rui_date(:starts_at,
    type: :datetime,
    label: "Starts At"
  ) %>

  <%= f.rui_button("Create Event") %>
<% end %>

Note: When using f.rui_date, the component automatically reads values from the model and displays validation errors.

Rails Migration

rui_date provides a styled alternative to Rails ActionView date helpers with additional features.

Comparison with Rails Helpers

Rails Helper	rui_date Equivalent
`f.date_field`	`f.rui_date(:method)`
`f.datetime_field`	`f.rui_date(:method, type: :datetime)`
`f.time_field`	`f.rui_date(:method, type: :time)`
`f.date_select`	`f.rui_date(:method, variant: :select)`
`f.datetime_select`	`f.rui_date(:method, variant: :select, type: :datetime)`
`f.time_select`	`f.rui_date(:method, variant: :select, type: :time)`
`date_field_tag`	`rui_date(name: :name)`

Accessibility

The Date component follows WAI-ARIA best practices for date picker widgets.

ARIA Attributes

Help text linked via aria-describedby for context
Required fields include aria-required="true"
Error states include aria-invalid="true"
Error messages displayed with role="alert"

Keyboard Navigation

Tab moves focus between input and calendar
Arrow Keys navigate between days in the calendar
Enter or Space selects the focused date
Escape closes the calendar dropdown
Focus states are clearly visible with ring styles

Semantic HTML

Uses native <input type="text"> with formatted date display
Labels use for attribute linked to input id
Calendar grid uses <button> elements for day cells

Screen Reader Support

Selected date is announced with full format (e.g., "January 15, 2024")
Month/year navigation is announced when changed
Unavailable dates are announced as disabled

JavaScript API

The Date component includes both a date picker and optional time picker, each with Stimulus controllers.

Date Picker Controller

Controls the calendar dropdown and date selection:

Action	Description
`date-picker#toggle`	Toggles the calendar dropdown
`date-picker#open`	Opens the calendar dropdown
`date-picker#close`	Closes the calendar dropdown
`date-picker#selectDay`	Selects a specific day
`date-picker#prevMonth`	Navigate to previous month
`date-picker#nextMonth`	Navigate to next month
`date-picker#goToToday`	Navigate to and select today
`date-picker#clear`	Clear the selected date
`date-picker#selectPreset`	Apply a preset date range

Time Picker Controller

Controls the time selection dropdown (for datetime type):

Action	Description
`time-picker#toggle`	Toggles the time dropdown
`time-picker#close`	Closes the time dropdown
`time-picker#selectTime`	Selects a time option

Custom Events

Listen to these events for date/time changes:

Event	When	Detail
`date-picker:select`	Date is selected	`{ date }`
`date-picker:today`	"Today" button clicked	`{ date }`
`date-picker:clear`	Date is cleared	`{}`
`date-picker:preset`	Preset is selected	`{ preset, startDate, endDate }`
`time-picker:select`	Time is selected	`{ time }`

Listening to Events

<div data-controller="booking"
     data-action="date-picker:select->booking#onDateSelect">
  <%= rui_date(name: :booking_date, label: "Select Date") %>
</div>

// booking_controller.js
onDateSelect(event) {
  const { date } = event.detail
  console.log("Selected date:", date)
}

Programmatic Control

Control the date picker from JavaScript:

Programmatic Control

// Get the date picker controller
const element = document.querySelector('[data-controller="date-picker"]')
const datePickerCtrl = application.getControllerForElementAndIdentifier(
  element,
  "date-picker"
)

// Open/close calendar
datePickerCtrl.open()
datePickerCtrl.close()

// Navigate months
datePickerCtrl.prevMonth()
datePickerCtrl.nextMonth()

// Go to today
datePickerCtrl.goToToday()

// Clear selection
datePickerCtrl.clear()

API Reference

rui_date

Flexible date/time input with multiple variants - ONE component for single dates AND date ranges

Parameter	Type	Default	Description
name_or_method	Symbol/String	—	Positional first arg - name for standalone, method for form builder
label	String	—	Label text
placeholder	String	—	Placeholder text
help_text	String	—	Help text below input
error_message	String	—	Error message (overrides form errors)

Variant & Type

Choose how the date picker is displayed

Parameter	Type	Default	Description
variant	Symbol	`:picker`	Visual variant `:native` `:picker` `:select`
type	Symbol	`:date`	Input type `:date` `:datetime` `:time`
range	Boolean	`false`	Enable date range selection mode

Appearance

Visual styling options

Parameter	Type	Default	Description
color	Symbol	`:default`	Color theme - semantic or Tailwind color
size	Symbol	`:base`	Size `:xs` `:sm` `:base` `:lg` `:xl`
shape	Symbol	`:rounded`	Border radius `:square` `:rounded` `:pill`

Constraints

Date range and validation constraints

Parameter	Type	Default	Description
min	Date/String	—	Minimum date constraint
max	Date/String	—	Maximum date constraint
step	Integer	—	Step for time inputs (in seconds)
unavailable	Array	`[]`	Array of dates to disable/block

Picker Options

Options for the :picker variant

Parameter	Type	Default	Description
months	Integer	`1 (2 for range)`	Number of months to display
presets	Boolean/Array	`false`	Enable preset buttons (true for all, or array of keys)
with_today	Boolean	`false`	Show Today button
clearable	Boolean	`false`	Show Clear button
week_numbers	Boolean	`false`	Show week numbers
selectable_header	Boolean	`false`	Month/year dropdowns in header
start_day	Integer	`0`	Week start (0=Sun, 1=Mon)
separator	String	`"to"`	Text between range inputs

Select Options

Options for the :select variant

Parameter	Type	Default	Description
start_year	Integer	—	Start year for select dropdowns
end_year	Integer	—	End year for select dropdowns
order	Array	—	Order of selects [:year, :month, :day]
include_blank	Boolean/String	`false`	Include blank option in select

States

State options

Parameter	Type	Default	Description
value	Date/String/Hash	—	Initial value. Hash {start:, end:} for range mode
required	Boolean	`false`	Required field
disabled	Boolean	`false`	Disabled state
readonly	Boolean	`false`	Read-only state

Related Components

Input

Text inputs for other form fields

Select

Native select for simpler selections

Combobox

Searchable dropdown for complex selections