Calendar
A date field component that allows users to enter and edit date.
Usage
Connect to input
Month Year
div(class: 'space-y-4') do Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'rbui--calendar-input') Calendar(input_id: '#date', class: 'rounded-md border shadow') end
Copied!
Copy failed!
Format date
Format dates with date-fns
Month Year
div(class: 'space-y-4') do Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'formatted-date', data_controller: 'rbui--calendar-input') Calendar(input_id: '#formatted-date', date_format: 'PPPP', class: 'rounded-md border shadow') end
Copied!
Copy failed!
Components
| Component | Built using | Source |
|---|---|---|
Calendar | Phlex | |
Input | Phlex |
| Component | Built using | Source |
|---|---|---|
Calendar | Phlex | |
CalendarBody | Phlex | |
CalendarDays | Phlex | |
CalendarHeader | Phlex | |
CalendarNext | Phlex | |
CalendarPrev | Phlex | |
CalendarTitle | Phlex | |
CalendarWeekdays | Phlex | |
CalendarController | Stimulus JS | |
CalendarInputController | Stimulus JS |