VelvetKit

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
<div class="max-w-xs">
  <div class="relative" data-controller="ui--date-picker"
     data-ui--date-picker-module-url-value="/assets/cally-d66e90c3.js"
     data-ui--date-picker-order-value="DMY"
     data-ui--date-picker-separator-value="/"
     data-action="click@window->ui--date-picker#closeOnOutsideClick keydown@window->ui--date-picker#closeOnEscape"
    >
    <label for="ui-date-983aaa8c" class="mb-1.5 block text-sm font-medium text-foreground">
      Date of birth
    </label>
    <div class="relative">
      <input type="text" id="ui-date-983aaa8c" inputmode="numeric" autocomplete="off"
           placeholder="DD/MM/YYYY" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 pl-3 pr-10 py-2 text-sm aria-invalid:border-destructive aria-invalid:ring-destructive"
           value="02/05/2012"
            
           aria-describedby="ui-date-983aaa8c-hint"
           data-ui--date-picker-target="input"
           data-action="input->ui--date-picker#typed">
      <input type="hidden" name="event[date]" value="2012-05-02"
           data-ui--date-picker-target="hidden">
      <button type="button" aria-haspopup="dialog" aria-expanded="false"
            aria-controls="ui-date-983aaa8c-panel"
            aria-label="Open the calendar"
            class="absolute inset-y-0 right-0 flex w-9 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
            
            data-ui--date-picker-target="toggle"
            data-action="ui--date-picker#toggle">
        <i data-lucide="calendar" class="inline-block shrink-0 size-4" aria-hidden="true"></i>
      </button>
    </div>
    <p id="ui-date-983aaa8c-hint" class="mt-1 text-xs text-muted-foreground">
      Type the date as DD/MM/YYYY, or use the calendar
    </p>
    <div id="ui-date-983aaa8c-panel" role="dialog" hidden
       class="absolute z-30 mt-1 rounded-md border bg-popover p-3 text-popover-foreground shadow-md"
       data-ui--date-picker-target="panel">
      <calendar-date locale="en-IN" first-day-of-week="1" data-ui--date-picker-target="calendar" data-action="change->ui--date-picker#picked"><span slot="previous" class="inline-flex"><i data-lucide="chevron-left" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          <span class="sr-only">Previous month</span></span><span slot="next" class="inline-flex"><i data-lucide="chevron-right" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          <span class="sr-only">Next month</span></span>
        <div slot="heading" class="flex items-center gap-1.5"><calendar-select-month></calendar-select-month><calendar-select-year></calendar-select-year></div>
        <calendar-month></calendar-month></calendar-date>
    </div>
  </div>
</div>
1
2
3
<div class="max-w-xs">
  <%= render(UI::DatePicker.new(name: "event[date]", label: "Date of birth", value: Date.new(2012, 5, 2))) %>
</div>

No notes provided.

No params configured.