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="97m-52qQTw6v_9yfnCZJ-ALx3xg3HidZfvE1Q0QhkXZ_CjCXp324kLEtPiCbbg2dqFyi94yzLjVKYYTwHahyTw" 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-basic-single-date-picker data-component=""opce-basic-single-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-basic-single-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-b7d83f84-4fc6-468f-a94a-c4ec5c05f40f" 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-basic-single-date-picker data-component=""opce-basic-single-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-basic-single-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-05ec57d6-5f3e-4834-b857-f815541e7979" 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-basic-single-date-picker data-component=""opce-basic-single-date-picker"" data-in-dialog="false" data-input-id=""date"" data-name=""date"" data-value=""2025-04-01"" data-input-class-names=""FormControl-input FormControl-medium"" data-data-action="null" class="op-angular-component"></opce-basic-single-date-picker>
        </div>
        <div class="FormControl-inlineValidation" id="validation-dfb8dace-21f4-4bad-bf14-08da297208af" 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>

Single date picker

The basic date picker is a key element in OpenProject and is displayed any time the user has to input a date.

Basic date pickers are attached to existing date input fields and is displayed as a drop-down when that date input field is in focus. It consists of only the mini-calendar component.

The basic date picker can also be placed inside modals like the work package date drop modal and the Baseline drop modal. All date picker are built on the Flatpickr javascript library.

On mobile devices, the component will automatically degrade to the device's native date picker.

For more complex implementations involving date pickers (the work package date field or the baseline modal), please refer to documentation concerning those specific features for notes on mobile-specific rendering.

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.single_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value.iso8601,
        datepicker_options: { inDialog: in_dialog }
      )
      query_form.single_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value.iso8601,
        datepicker_options: { inDialog: in_dialog }
      )
      query_form.single_date_picker(
        name: :date,
        label: "Date",
        leading_visual: { icon: },
        value: value.iso8601,
        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

—

—

—