Hey Adalo Community! ![]()
Iβm excited to share a new component thatβs now available on the Adalo Marketplace:
Date Range Picker
A clean date range picker β tap to open, select your range, tap the header to jump months or years
Let users pick a start and end date from a visual calendar. Tap a date field to open the calendar, select a range with visual highlighting, and tap the month/year header to quickly jump to any date. Outputs both dates via Magic Text. Supports 12 languages.
Key Features
Start Date and End Date fields β tap to open the calendar
Visual range highlighting between selected dates
Month/year header navigation β tap to pick any month or year
Selected Start Date and Selected End Date available as Magic Text (formValue)
Default Start Date and Default End Date props β pre-fill from Magic Text or leave blank
Customizable separator icon and color between date fields
12 languages: Arabic, Chinese, English, French, German, Hindi, Japanese, Polish, Portuguese, Spanish, Russian, Swedish
Earliest/latest selectable date constraints
Minimum and maximum range day limits (1β365)
Active field border highlights which date the calendar is selecting
Customizable colors for range, today indicator, fields, and calendar cells
On Range Selected, On Range Cleared, and On Start Date Selected actions
Works on Web, iOS, and Android
Perfect For
β’ Hotel booking date filters
β’ Vacation rental check-in/check-out
β’ Report date range selectors
β’ Event planning date selection
β’ Leave request forms
β’ Appointment booking flows
How to Get It
- Open your Adalo app editor
- Click the + button to open the Add Components panel
- Browse Marketplace Components or search for βDate Range Pickerβ
- Click to add it to your app β done!
If you have any questions or feedback, drop a comment below. Iβd love to hear how youβre using it! ![]()
