OpenProject Lookbook

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
30
31
32
33
34
35
36
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
76
<form id="my-form" action="/abc" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="IbI6JS2xMLILt3ZoDU9ZJeHcSlI6PKkS4NUgjcVCQFDzJe0ALQxtucRmb2BYoKtrMlVJZFyBaDRHP7Q6u3Xz1g" autocomplete="off" />
  <div class="FormControl-spacingWrapper">
    <div data-view-component="true">
      <primer-datepicker-field class="FormControl width-full FormControl--fullWidth">
        <label class="FormControl-label" for="date">
          Date
        </label>
        <div class="FormControl-input-wrap FormControl-input-wrap--leadingVisual FormControl-input-width--auto">
          <span class="FormControl-input-leadingVisualWrap">
            <svg data-target="primer-text-field.leadingVisual" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-calendar FormControl-input-leadingVisual">
              <path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z"></path>
            </svg>
          </span>
          <opce-range-date-picker data-component=""opce-range-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01 - 2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-range-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-838c82e0-f1c9-4693-8ce8-16e6de68619b" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
      </primer-datepicker-field>
    </div>
    <div data-view-component="true">
      <primer-datepicker-field class="FormControl width-full FormControl--fullWidth">
        <label class="FormControl-label" for="date">
          Date
        </label>
        <div class="FormControl-input-wrap FormControl-input-wrap--leadingVisual FormControl-input-width--auto">
          <span class="FormControl-input-leadingVisualWrap">
            <svg data-target="primer-text-field.leadingVisual" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-calendar FormControl-input-leadingVisual">
              <path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z"></path>
            </svg>
          </span>
          <opce-range-date-picker data-component=""opce-range-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01 - 2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-range-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-84ac94c0-8ff3-41e9-ac1a-b4add6e50bee" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
      </primer-datepicker-field>
    </div>
    <div data-view-component="true">
      <primer-datepicker-field class="FormControl width-full FormControl--fullWidth">
        <label class="FormControl-label" for="date">
          Date
        </label>
        <div class="FormControl-input-wrap FormControl-input-wrap--leadingVisual FormControl-input-width--auto">
          <span class="FormControl-input-leadingVisualWrap">
            <svg data-target="primer-text-field.leadingVisual" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-calendar FormControl-input-leadingVisual">
              <path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z"></path>
            </svg>
          </span>
          <opce-range-date-picker data-component=""opce-range-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01 - 2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-range-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-bc3957f1-214f-4272-b5b0-55fbab6f556f" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
      </primer-datepicker-field>
    </div>
  </div>
</form>

Range date picker

Range datepicker allow inputing a range (2023-02-09 - 2023-02-14), and shows the date picker with two months.

All date picker are built on the Flatpickr javascript library. On mobile devices, the component will automatically degrade to two inputs with the device's native date picker.

The library gives us certain functionality out of the box with a fairly high degree of customisation, but also introduces limits (which will be mentioned below when relevant).

Please read the Flatpickr documentation before using or contributing to date pickers.

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
30
31
32
33
34
35
36
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
<%
  the_form = Class.new(ApplicationForm) do
    form do |query_form|
      query_form.range_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value,
        datepicker_options: { inDialog: in_dialog }
      )
      query_form.range_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value,
        datepicker_options: { inDialog: in_dialog }
      )
      query_form.range_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value,
        datepicker_options: { inDialog: in_dialog }
      )
    end
  end
%>
<% if in_dialog %>
  <%= render(
        Primer::Alpha::Dialog.new(
          title: "Dialog Title",
          size: :large,
          open: true,
          id: "my-dialog"
        )
      ) do |d| %>
    <% d.with_show_button { "Show dialog" } %>
    <% d.with_header(variant: :medium) %>
    <%= render(Primer::Alpha::Dialog::Body.new) do
          primer_form_with(
            url: "/abc",
            id: "my-form"
          ) do |f|
            render(the_form.new(f))
          end
        end %>
    <%= d.with_footer do %>
      <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { I18n.t(:button_cancel) } %>
      <%= render(Primer::Beta::Button.new(scheme: :primary, type: :submit, form: "my-form")) { I18n.t(:button_apply) } %>
    <% end %>
  <% end %>
<% else %>
  <%= primer_form_with(
        url: "/abc",
        id: "my-form"
      ) do |f|
        render(the_form.new(f))
      end %>
<% end %>
Param Description Input

—

—

—