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! ![]()
