Updated on Sep 18, 2020

Highly customizable angular range picker for date & time

Responsive range picker for flight, accommodation and resource booking Angular and Ionic Angular

Other features to explore

Range selection
Calendar view

The range picker supports start & end selection for date, time and combined date & time. Choose between a calendar view with one or more months, week view with single or multiple weeks or date and time scrollers and dropdowns.

Easily switch between single and range select for use-cases like one-way flights.

The capabilities like built-in validation, minimum, maximum values, disabled dates, range length are supported by both the scroller and calendar.

As part of Date, time & calendar it can be picked up with the Framework and Complete licenses or with the component license.

Interested in the beta and
want to give it a try?
Back to v4

Angular and Ionic Range Range for Angular and Ionic 2/3/4/5

Switch the layout between mobile & desktop
and see how it looks.

Range - Mobile & Desktop usage

Change demo
Mobile & Desktop usage
Get started with this example

Use the range picker for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use it on an existing form field, custom input, ion-input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

Handle different screen sizes by setting it up responsively  Check out the responsive demo →

Range - Initializing the picker

Change demo
Initializing the picker

The range component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overriden by setting the relevant options for the component.

There are four ways to use the range picker:

  • Use it on an existing input as a directive. A great example is usage on an ion-input
  • Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
  • Use it with two separate inputs of any type, one for start and another for end
  • Embed the picker without an input. This can be the page itself or a more complex popup

Range - Responsive behavior

Change demo
Responsive behavior
Download and use example

The range picker has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
  • use custom for setting a custom breakpoint

It is a good idea to change the display or controls option to tailor the UX. This way you can have a single month calendar on mobile and a two month view on bigger sceens.

Change the viewport

Range - Understanding the controls

Change demo
Understanding the controls

The picker supports multiple controls:

  • Calendar view - can be used on its own or combined with a time scroller
  • Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
  • Time picker - can be used separately or together with a date picker or calendar
  • Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop

Use the controls option (expecting an array) to configure the picker.

Range - Understanding display modes

Change demo
Understanding display modes

The range has five built-in display modes that can be controlled through the display option:

  • top - modal that slides down from the top
  • bottom - modal that slides up from the bottom
  • center - modal that shows up in the middle with a pop animation
  • anchored - modal that shows up anchored to an input or any dom element
  • inline - embeddable picker that is rendered into the markup without its own modal

Use the touchUi option to switch between touch optimized mobile renderign and pointer optimized desktop renderign. It can be dynamically switched with the help of the responsive oprion.

The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.

Want to see how to set up responsiveness?  Check out the previous example →

Range - Date Range

Change demo
Date Range

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:

  • calendar - will render a calendar view for date range selection
  • date - will render a date scroller or dropdown for date range selection
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
  • time - will render a time picker for range selection (explore time ranges)

Range - Time range

Change demo
Time range

Set up the range picker for time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a time range picker. The controls option supports different values:

  • time - will render a time picker or dropdown for range selection
  • calendar - will render a calendar view for date range selection (explore date ranges)
  • date - will render a date scroller or dropdown for date range selection (explore date ranges)
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)

Range - Date & time range

Change demo
Date & time range

Set up the range picker for date & time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date and time range picker. The controls option supports different values:

  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection
  • calendar - will render a calendar view for date range selection (explore date ranges)
  • date - will render a date scroller or dropdown for date range selection (explore date ranges)
  • time - will render a time picker for range selection (explore time ranges)

Range - Customizing the calendar

Change demo
Customizing the calendar

The calendar view can be customized with a couple different parameters:

  • Month or week calendar - switch betweek month and week through the calendarType option and set the number of months or weeks through the pages and weeks options
  • Set a month change direction - specify 'hoizontal' or 'vertical' in the calendarScroll option
  • Show week numbers - set the showWeekNumbers to true and show a week counter starting from the first week of every year
  • Hide the outer days of a month - set the showOuterDays to false in case you don't want to see days from previous and next months

Range - Customizing the range

Change demo
Customizing the range

Whether you are using the calendar or scroller for range selection, the microcopy for rangeStartLabel and rangeEndLabel can be easily overriden. For flight booking "Outbound" and "Return" makes sense while for accomodation booking "Check in" and "Check out" might be more appropriate.

The range start/end labels can also be hidden in some cases if needed. Use the showRangeLabels option for that.

Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.

Range - Marked, colored & labels

Change demo
Marked, colored & labels
Get started with this example

You can mark days with colored dots, add labels or completely color the background of the days using the marked, colors and labels options. This offers means to add more information to the calendar that could be valuable to users. While you can use the colors along with marked and labels, the latter two are mutually exclusive because they get rendered in the same place on the UI.

You can add them as exact dates, ranges or specify recurring rules. The recurring object supports different ways to describe the rules.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Range - Presets

Change demo

The selected range can be adjusted by the user or you can programatically set the start and end.

This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like Yesterday, Today, Last week and so on. Setting the values can be done from something as simple as a button click.

Range - Date types

Change demo
Date types

The range works with different date types:

  • JS date object - a common way of passing a date is through a Date object: new Date(1995, 11, 17, 15, 24) (make sure to not simply pass a date string to new Date())
  • ISO date string - standardized way of passing dates: '2008-09-15T15:53:00' (make sure to pass it as a string)
  • Moment.js object - a great solution that solves common date management difficulties: moment([2018, 3, 27, 12, 15]) (make sure to have moment.js loaded)

When passing dates to the component - eg. min/max, invalids - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.

Range - Formatting values

Change demo
Formatting values

Use the dateFomat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not expicitly set, they are inherited from the localization settings.

Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the timeWheels options.

Interested in learning about localization?  Check out how the return format changes based on locale →

Range - Setting range length requirements

Change demo
Setting range length requirements

Besides invalidating selection that is before and after a specific date, the minimum and miximum allowed length of a range selection can be enforced through the minRange and maxRange options.

This form of validation is easy to understand and reduces erronous entries.

Range - Min & max values

Change demo
Min & max values

Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection. Setting the values will disable dates/times earlier than min and dates/times that come after max.

By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as JS date objects, ISO date strings or Moment.js objects.

Looking to invalidate more dates/times?  Discover how to disable specific values →

Range - Disabling values

Change demo
Disabling values

Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.

Dates can be disabled through the invalid option. Another tool for setting disabled values are valid overrides. This means that you can make certain values valid from the invalid set. Eg. Invalidate all Tuesdays, but make Aug. 04, 2020 valid.

Both the invalid and valid options support the following:

  • Exact dates - Passing exact values like: '2020-05-20', '2020-05-20T12:30:00' will disable specific day and/or times
  • Date ranges - Passing start and end value pairs will disable specific days and/or times that fall into that range
  • Recurring dates - Passing recurrence rules as objects or in RRULE strring format will be parsed. For more information on recurrence check out the rule generator

Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.

Range - Working with recurring values

Change demo
Working with recurring values

Setting up recurrance rules help in describing invalid rules. You can configure daily, weekly,monthly and yearly recurring dates and pass rule in the recurring property inside the invalid option.

Use the configurator to experiment, build strings and objects that you can grab and use.

Interested in disabling dates?  Discover how to invalids work →

Range - Theming capabilities

Change demo
Theming capabilities

The look and feel of the date picker can be deeply customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Range - Lifecycle events

Change demo
Lifecycle events

The date picker ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onChange, onSet, onInit ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Range - Calendar systems

Change demo
Calendar systems

The date picker supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:

  • Gregorian - it is included by default
  • Jalali - it is the default system of the Persian calendar and is inlcuded within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

There is no trial for the Beta at the moment
There is no trial available for V5 at the moment.
The latest features within the BETA are available for download to customers.

Feel free to explore the demos or get back to V4 for a trial.
Pick another framework
Looks like you have a license with no access to the BETA.
Feel free to explore the demos and let us know if we can help.

Introducing the next generation of Mobiscroll

The Mobiscroll 5 Beta 4 includes the brand new Scheduler, Agenda and Event calendar, Date, time, calendar and Range picker components.

We’ll be gradually adding more components and functionality. If you want to give the new version a go, you can check them out below.

Other highlights
  • Redesigned event calendar, scheduler with drag & drop
  • A new way of working with recurring events
  • Updated themes with dynamic dark mode
  • New date & time pickers
  • Range picker with advanced customization
  • Dynamic options with global updates
Read the full blogpost
Get in touch
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Email address

Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command
$ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here

Create an Ionic 3 & Mobiscroll starter with the CLI:

$ mobiscroll start ionic myStarter

Run this command for Ionic 4 & Mobiscroll starter:

$ mobiscroll start ionic-angular myStarter

Step 3.Copy the code into your app.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command
$ ionic serve

And voilà, everything should be running smoothly.

Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command
$ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here

Run this command for Ionic 5 & React Mobiscroll starter:

$ mobiscroll start ionic-react myStarter

Step 3.Copy the code into your app.

Copy TSX
Copy CSS

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command
$ ionic serve

And voilà, everything should be running smoothly.

Customize & try demos locally
How would you like to do it?
Install demo in your app
Follow this quick, two minute install guide
Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command
$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Angular project

Copy command
$ mobiscroll config angular --version=5.0.0-beta4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app. HTML goes into the markup, TS into Typescript.

Copy TS
Copy HTML
Copy CSS
Copy Module

Step 4.Run ng serve in the root folder of your app 🎉

Copy command
$ ng serve

And voilà, everything should be running smoothly.

Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!

Change your password
Need to update your password? Enter and hit the button below
Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

Extract the zip file and open the demo in your favorite browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Please extract the zip file and run the project like any Angular CLI app. Make sure to have the Angular CLI installed.

For installation and usage, extract the zip file and open a terminal window and follow these steps.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ng serve --open

Let us know if we can help and enjoy! 👍

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy! 👍

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading
Customize demos locally

Everything is set up so that you can dig in right away and start exploring.

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer.
Extract the zip file and open the demo in your browser. To install Mobiscroll in your project follow instructions from this page.


Let us know if we can help and enjoy! 👍

Demos
Theme Select
Material
iOS
Windows
Language Locale