Class: UI::DatePickerComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
DatePickerBehavior
Defined in:
app/view_components/ui/date_picker_component.rb

Overview

DatePicker ViewComponent A date picker that combines a popover trigger with a calendar.

Examples:

Basic usage

render UI::DatePickerComponent.new do |dp|
  dp.with_trigger(placeholder: "Pick a date")
end

Instance Method Summary collapse

Methods included from DatePickerBehavior

#date_picker_classes, #date_picker_data_attributes, #date_picker_html_attributes, #format_date, #initial_display_value, #placeholder_text, #selected_json, #selected_value

Constructor Details

#initialize(mode: :single, selected: nil, locale: "en-US", format: "long", placeholder: "Select date", range_placeholder: "Select date range", close_on_select: true, name: nil, label: nil, label_for: nil, show_dropdowns: false, min_date: nil, max_date: nil, disabled_dates: [], number_of_months: 1, week_starts_on: 0, classes: "", **attributes) ⇒ DatePickerComponent

Returns a new instance of DatePickerComponent.

Parameters:

  • mode (Symbol) (defaults to: :single) —

    Selection mode: :single, :range, :multiple

  • selected (Date, Range, Array) (defaults to: nil) —

    Initially selected date(s)

  • locale (String) (defaults to: "en-US") —

    BCP 47 locale tag for formatting

  • format (String) (defaults to: "long") —

    Date format style: “short”, “medium”, “long”, “full”

  • placeholder (String) (defaults to: "Select date") —

    Placeholder text when no date selected

  • range_placeholder (String) (defaults to: "Select date range") —

    Placeholder for range mode

  • close_on_select (Boolean) (defaults to: true) —

    Close popover after selection

  • name (String) (defaults to: nil) —

    Form field name for hidden input

  • label (String) (defaults to: nil) —

    Label text for the date picker

  • label_for (String) (defaults to: nil) —

    ID to associate label with input

  • show_dropdowns (Boolean) (defaults to: false) —

    Show month/year dropdowns in calendar

  • min_date (Date) (defaults to: nil) —

    Minimum selectable date

  • max_date (Date) (defaults to: nil) —

    Maximum selectable date

  • disabled_dates (Array<Date>) (defaults to: []) —

    Dates that cannot be selected

  • number_of_months (Integer) (defaults to: 1) —

    Number of months to display

  • week_starts_on (Integer) (defaults to: 0) —

    0 for Sunday, 1 for Monday, etc.

  • classes (String) (defaults to: "") —

    Additional CSS classes

  • attributes (Hash) —

    Additional HTML attributes



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
# File 'app/view_components/ui/date_picker_component.rb', line 42

def initialize(
  mode: :single,
  selected: nil,
  locale: "en-US",
  format: "long",
  placeholder: "Select date",
  range_placeholder: "Select date range",
  close_on_select: true,
  name: nil,
  label: nil,
  label_for: nil,
  show_dropdowns: false,
  min_date: nil,
  max_date: nil,
  disabled_dates: [],
  number_of_months: 1,
  week_starts_on: 0,
  classes: "",
  **attributes
)
  @mode = mode
  @selected = selected
  @locale = locale
  @format = format
  @placeholder = placeholder
  @range_placeholder = range_placeholder
  @close_on_select = close_on_select
  @name = name
  @label = label
  @label_for = label_for
  @show_dropdowns = show_dropdowns
  @min_date = min_date
  @max_date = max_date
  @disabled_dates = disabled_dates
  @number_of_months = number_of_months
  @week_starts_on = week_starts_on
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



82
83
84
85
86
87
88
89
90
 
# File 'app/view_components/ui/date_picker_component.rb', line 82

def call
  content_tag :div, date_picker_html_attributes do
    safe_join([
      render_label,
      render_popover,
      render_hidden_input
    ].compact)
  end
end