New Component: Date Range Picker β€” Now on the Marketplace! πŸŽ‰

Hey Adalo Community! :waving_hand:

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

:white_check_mark: Start Date and End Date fields β€” tap to open the calendar
:white_check_mark: Visual range highlighting between selected dates
:white_check_mark: Month/year header navigation β€” tap to pick any month or year
:white_check_mark: Selected Start Date and Selected End Date available as Magic Text (formValue)
:white_check_mark: Default Start Date and Default End Date props β€” pre-fill from Magic Text or leave blank
:white_check_mark: Customizable separator icon and color between date fields
:white_check_mark: 12 languages: Arabic, Chinese, English, French, German, Hindi, Japanese, Polish, Portuguese, Spanish, Russian, Swedish
:white_check_mark: Earliest/latest selectable date constraints
:white_check_mark: Minimum and maximum range day limits (1–365)
:white_check_mark: Active field border highlights which date the calendar is selecting
:white_check_mark: Customizable colors for range, today indicator, fields, and calendar cells
:white_check_mark: On Range Selected, On Range Cleared, and On Start Date Selected actions
:white_check_mark: 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

  1. Open your Adalo app editor
  2. Click the + button to open the Add Components panel
  3. Browse Marketplace Components or search for β€œDate Range Picker”
  4. 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! :rocket:

5 Likes

Swedish, but not Italian? Bruh :sob:

1 Like

Refresh your builder, Italian should be there now!

2 Likes

That’s super :heart: