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: