Cally Inputs combine a Daisy text input field with a Cally calendar using the new HTML Popover API ↗ for intuitive date selection.
This component provides an elegant alternative to standard HTML date inputs while maintaining a consistent visual style with other form components.
The basic Cally Input provides a text field that, when clicked, displays a calendar popover for date selection.
For keyboard navigation, you can use the space or ↓ keys to open the calendar popover.
You can customize the input or calendar by using the appropriate slots.
The built-in Form Builder extension makes it easy to use Cally Inputs in your Rails forms. The component automatically extracts the name, ID, and value attributes from the form object.
= form_with(url: "#", method: :post, scope: :event) do |form|
.my-2.flex.flex-col.gap-4
= form.daisy_cally_input(:start_date, start: "Start Date")
= form.daisy_cally_input(:end_date, end: "End Date")
= form.daisy_cally_input(:event_date, floating_placeholder: "Select an event date")
= form.daisy_label(:registration_deadline, "Registration Deadline", css: "mt-4")
= form.daisy_cally_input(:registration_deadline, value: Date.today.next_month.to_s) do |cally|
- cally.with_input(placeholder: "Select a registration deadline...")
= form.daisy_label(:reminder_date, "Reminder Date", css: "mt-4")
= form.daisy_cally_input(:reminder_date, popover_css: "dropdown-top") do |cally|
- cally.with_input(placeholder: "Select a reminder date...")
- cally.with_calendar(css: "bg-secondary")
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.