LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form action="#" accept-charset="UTF-8" method="get">
  <div class="w-64">
    <div
  id="looposui-inputs-date_date_input_5793709857"
  data-controller="date-input"
  data-date-input-name-value="date_input"
  data-date-input-mode-value="inline"
  data-date-input-input-outlet="#looposui-inputs-date_date_input_5793709857 .lui-inner-input"
  class="lui-date lui-date--inline relative"
>
      <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value=""
    data-input-mode-value="inline"
    data-input-form-value="">
        <div class="w-full flex flex-col">
          <div data-react-class="DatetimePicker" data-react-props="{"name":"date_input","selectedDate":null,"kind":"DatePicker","isRange":false,"placeholder":null,"inputClass":"lui-input lui-input--","variant":"core","granularity":"date","lang":"pt"}" data-react-cache-id="DatetimePicker-0"></div>
        </div>
        <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
          <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
            <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
          </button>
          <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
            <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>

Inputs::Date

The Input Date component is used for selecting dates. Includes a calendar picker for easier input.

Used Components Components where is Used
Form Entry

Usage rules

✅ Do

  • Use for date-specific input
  • Provide a calendar picker

❌ Don't

  • Don't allow invalid dates
  • Don't make the calendar picker mandatory, some users prefer typing dates directly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%
if params[:sleep] && (params[:date_input].present? || params[:value].present?)
  sleep(2)
end
 %>
<%= form_with url: "#", method: :get do %>
  <div class="w-64">
    <%= render LooposUi::Inputs::Date.new(
      name: "date_input",
      value: params[:date_input] || params[:value],
      kind: params[:kind] || "DatePicker",
      is_range: params[:is_range],
      placeholder: params[:placeholder],
      error: params[:error],
      lang: params[:lang],
      variant: params[:variant] || "core",
      readonly: params[:readonly] || false
    ) %>
  </div>
<% end %>

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

—

Sleep for 2 seconds, for testing purposes

Description

The Inputs::Date component provides a date picker input field that allows users to select dates in various formats. It includes a calendar picker interface and automatically submits the form when a date is selected.

Arguments

Base Arguments

Property Type Default Description
name String Required The name attribute for the input field
value String nil The initial date value. Format must be 'DD/MM/YYYY' (e.g., '01/01/2000') for compatibility with the picker.
kind String DatePicker Type of picker to display. See supported types below
lang String "pt" Language for the calendar ("pt" or "enUS")
variant String "core" Visual style variant
mode Symbol :autosubmit Mode of the date input. Can be :autosubmit or :form.
open_actions Boolean false Open field in edit mode by default.

Supported Picker Types

The component supports different types of date/time selection through the kind parameter:

  • DatePicker - For selecting dates (default)
  • DateTimePicker - For selecting both date and time
  • YearPicker - For selecting only years
  • MonthYearPicker - For selecting month and year
  • TimePicker - For selecting only time

Supported Modes

  • :autosubmit - Submits the form automatically when a date is selected.
  • :form - Standard form mode, requires manual submission.

⚠️ Important

It's the responsibility of the developer to handle the generation of the form, and handling any turbo frame updates or form submissions. The recommendation is to use the form_with helper from Rails, along with a turbo_frame_tag, so only the inline component is updated:

<%= turbo_frame_tag "some_unique_id" do %>
  <%= form_with url: "some_url", method: :post do %>
    <%= render LooposUi::Inputs::Date.new(
      #...
    ) %>
  <% end %>
<% end %>

Depending on how the backend is implemented, you may not need a turbo frame tag, if you respond with a turbo stream, you can replace the form directly.

Value Format Requirements

  • The value prop must be a string in the format 'DD/MM/YYYY' (e.g., '01/01/2000').
  • Passing other formats (such as ISO8601 or 'YYYY-MM-DD') may result in errors or the picker not displaying the value.