Phlex Components
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
<div>
  <div class="space-y-4"><input type="string" class="flex h-9 w-full bg-background px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground rounded-md border shadow" placeholder="Select a date" id="date" data-controller="input">
    <div class="p-3 space-y-4 rounded-md border shadow" data-controller="calendar" data-calendar-format-value="yyyy-MM-dd" data-calendar-input-outlet="#date">
      <div class="flex justify-center pt-1 relative items-center">
        <div class="text-sm font-medium" aria-live="polite" role="presentation" data-calendar-target="title">Month Year</div>
        <button name="previous-month" aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" type="button" data-action="click->calendar#prevMonth"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button name="next-month" aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" type="button" data-action="click->calendar#nextMonth"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div>
      <table data-calendar-target="calendar"></table>
      <template data-calendar-target="weekdaysTemplate">
        <thead>
          <tr class="flex">
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Monday">Mo</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Tuesday">Tu</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Wednesday">We</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Thursday">Th</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Friday">Fr</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Saturday">Sa</th>
            <th scope="col" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" aria-label="Sunday">Su</th>
          </tr>
        </thead>
      </template><template data-calendar-target="selectedDateTemplate">
        <td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" role="presentation"><button data-day="{{day}}" data-action=" click->calendar#selectDay" name="day" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" role="gridcell" tabindex="0" type="button" aria-selected="true">{{dayDate}}</button></td>
      </template><template data-calendar-target="todayDateTemplate">
        <td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" role="presentation"><button data-day="{{day}}" data-action=" click->calendar#selectDay" name="day" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td>
      </template><template data-calendar-target="currentMonthDateTemplate">
        <td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" role="presentation"><button data-day="{{day}}" data-action=" click->calendar#selectDay" name="day" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td>
      </template><template data-calendar-target="otherMonthDateTemplate">
        <td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" role="presentation"><button data-day="{{day}}" data-action=" click->calendar#selectDay" name="day" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td>
      </template></div>
  </div>
</div>
1
2
3
4
5
6
render(TestView.new) do
  div(class: "space-y-4") do
    Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input")
    Calendar(input_id: "#date", class: "rounded-md border shadow")
  end
end

No notes provided.

No params configured.