Class: UI::DatePicker

Inherits:
Phlex::HTML
  • Object
show all
Includes:
DatePickerBehavior
Defined in:
app/components/ui/date_picker.rb

Overview

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

Examples:

Basic usage

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

With form field

render UI::DatePicker.new(name: "user[birth_date]", label: "Date of Birth") do |dp|
  dp.trigger
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) ⇒ DatePicker

Returns a new instance of DatePicker.

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



37
38
39
40
41
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
 
# File 'app/components/ui/date_picker.rb', line 37

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

#trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block) ⇒ Object

Render the trigger button



118
119
120
121
122
123
124
125
126
127
 
# File 'app/components/ui/date_picker.rb', line 118

def trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block)
  render UI::DatePickerTrigger.new(
    placeholder: placeholder,
    selected: selected,
    icon: icon,
    classes: classes,
    **attributes,
    &block
  )
end

#view_template(&block) ⇒ Object 



77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
# File 'app/components/ui/date_picker.rb', line 77

def view_template(&block)
  div(**date_picker_html_attributes) do
    if @label
      render UI::Label.new(for_field: @label_for, classes: "px-1") { @label }
    end

    render UI::Popover.new(trigger: "click", placement: "bottom-start", offset: 4) do
      yield(self) if block_given?

      render UI::PopoverContent.new(classes: "w-auto overflow-hidden p-0") do
        render UI::Calendar.new(
          mode: @mode,
          selected: @selected,
          locale: @locale,
          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,
          attributes: {
            data: {
              action: "ui--calendar:select->ui--datepicker#handleSelect"
            }
          }
        )
      end
    end

    if @name
      input(
        type: "hidden",
        name: @name,
        value: selected_value,
        data: {ui__datepicker_target: "hiddenInput"}
      )
    end
  end
end