Mobiscroll for Ionic Fill the missing UI gaps and meet your requirements

Get started with advanced yet easy to use
UI controls for a great app

Start your free 15 day trial • We'll help you get started in no time!

The missing tools are finally here

Ionic provides a great way to build cross-platform hybrid and progressive apps, but for a polished,
five star experience you'll be needing more than the basic set of UI elements.

You will find a selection of tools and controls that will help you deliver great apps and meet project requirements.

Responsive Calendar

Missing from Ionic

The only calendar you’ll be needing for your apps with responsive and fullscreen mode. An essential control that is missing from the basic Ionic arsenal.

  • Calendar view or wheel scroller picker
  • Use it for date-only selection or combine with time picker
  • Responsive & liquid layout
  • Single, multiple and week selection
  • Minimum and maximum values, invalids
Learn more about the Calendar

Advanced date & time picker

Limited in Ionic

A more advanced date and time picker control that the basic Ionic date-time. It perfectly resembles the native pickers and their performance. Apply specific business rules for the perfect fit.

  • Circular wheels
  • Date-only, time-only or mixed modes
  • Steps for displayed values
  • Hide wheels that don’t make sense
  • Min, max values, invalids
Learn more about the Date & Time

Range for date and time

Missing from Ionic

A goto solution for picking date and time ranges. Date-only, time-only or mixed date & time. You can use it with one or two inputs. There is no simple alternative for the Range in the ionic controls, other than manually implementing the validation logic and adding the necessary plumbing code.

  • Date, time or date & time range
  • Calendar view or scroll pickers
  • Span across one or two inputs
Learn more about the Range picker

Select scroller

Limited in Ionic

A great alternative to the native dropdown or ionic select with support for single and multiple selection. Grouping, render on demand supported out of the box. With near pixel-perfect rendering to the native counterparts and great customization options, this is a great addition to the basic Ionic toolset.

  • Single or multiple value selection
  • Circular scrolling
  • Group header and list segmentation support
  • Rendering on demand for long lists
  • Built in support for invalids and unselectable values
Learn more about the Select

Lightweight event calendar

Missing from Ionic

Compact calendar view with multiple daily or recurring events. Display, short event description in the day cells or provide lengthier text in a popup. There is no built-in alternative to this in the basic Ionic control set.

  • Fullscreen view
  • Single or multi-day events
  • Daily event listing
Learn more about the Event calendar

Color picker control

Missing from Ionic

Customizable color picker control for single and multiple selection with refinement capabilities. There is no alternative to this control in the basic set of Ionic controls.

  • Single or multiple select
  • Refine luminosity
  • List any number of color presets
  • Multiple color select slots
Learn more about the Color picker

Image scroller

Missing from Ionic

Enhance selections with icons or images and help users make a better, more informed choice. This control is missing from the basic Ionic controls.

  • Use it with scalable font icons
  • Use it with images
  • Embed the control inline, right into the page
Learn more about the Image scroller

Measurement scroller & conversion engine

Missing from Ionic

Capture and convert force, speed, mass, temperature and distance. Scroller based picker with built-in conversion engine. There is no alternative to this control in the basic Ionic toolset.

  • Work with negative values
  • Convert between multiple units
  • Specify scroller steps for simplified validation
  • Easily write custom conversion rules
Learn more about the Measurement scroller

Number scroller

Missing from Ionic

Capture and work with integer and decimal numbers with this scroller control. There is no alternative available in the basic set of Ionic controls.

  • Work with negative numbers
  • Wheel steps supported
  • Implicit validation with min/max and invalids
Learn more about the Number scroller

Numeric keypad control

Missing from Ionic

Use this versatile numpad for a variety of tasks, including: number, date, time, currency, timespan and PIN entry. There is no alternative available in the basic Ionic toolset for this control.

  • Out of the box supported presets - date, time, timespan, number, decimal, masked entry
  • Suffixes and affixes supported
  • Create custom value templates and presets
Learn more about the Numpad

Rating and Grading scroller

Missing from Ionic

Provide a UI for rating items. Scroller controls with a tailored API for rating and grading. Works great as an alternative to inline rating. There is no built in option available in the basic Ionic set for this task.

  • Support multiple display modes
  • Configurable rating system
  • Use scalable font icons instead of stars
Learn more about the Rating scroller

Timer with countdown and stopwatch

Missing from Ionic

With built-in stopwatch and countdown functionality. Animated scroller for real-time feedback. There is no such control or alternative available in the basic Ionic toolset.

  • Stopwatch and countdown
  • UI controls for Start/Stop/Pause/Lap
  • Animated wheels
Learn more about the Timer

Timespan scroller

Missing from Ionic

Make scheduling and adding past recordings easy by letting users enter timespans of seconds, minutes, hours up to years. There is no built in control in the basic Ionic set shipping with such functionality.

  • Steps for limiting values the user can pick
  • Wheels for seconds, minutes, hours, days
  • Familiar scroller based UI
Learn more about the Timespan

Hierarchical treelist

Missing from Ionic

Help users pick from hierarchies in the same view. Think of it as multiple select scrollers without the need of switching context. There is no such control available in the basic Ionic set.

  • Variable depth
  • Circular wheels
  • Validation
Learn more about the Treelist

Nice & easy API

Plays nice with others and easily integrates with your Ionic code.

<ion-content class="padding">
  <label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" ng-model="selectedDate" 
           mobiscroll-date="{ theme: 'ios', display: 'bottom' }">

Use Mobiscroll for Angular in your Ionic app. Integration controls included out of the box.

<ion-content padding>
    <ion-label stacked/>Date</ion-label>
    <ion-input class="mbsc-date" type="text"></ion-input>
public ionViewDidLoad(): void {
    var that = this; ='.mbsc-date input', {
        theme: 'ios',
        display: ‘bottom'
        onSet: function (event, inst) {
            that.selectedDate = inst.getVal();
    });, true);

Use the plain JS API in your Ionic v2+ app. Mobiscroll for Angular 2 is coming soon!

Compared to Ionic components

Let's take a look how Mobiscroll stacks up against the basic set of components that ship with Ionic and why it is great companion to it.

Basic component set
Advanced components
Responsive calendar
Color picker control
Lightweight event calendar
Image scroller
Measurement scroller & conversion engine
Number scroller
Numeric keypad control
Range for date and time
Rating & grading scroller
Generic scroller control
Timer with countdown and stopwatch
Timespan scroller
Hierarchical treelist
Date & time picker Limited functionality Advanced features
Select scroller Limited functionality Advanced features
You can integrate mobiscroll with the following ionic elements
Various form controls Available with slight differences
Scalable icons Available
Lists Available
Loading and progress indicatiors Available
Popovers and modals Available with differences
Action sheets, alerts and toast
Grid system
Menus and Navigation
Floating Action Button

Try it free for 15 Days

We'll support you through the whole process of getting up & running

Join great companies who takes their UI seriously

"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.

I was absolutely amazed by it and got so much more than I was expecting."

Tom Maddocks, Web Developer, Blueleaf

Easily add to existing projects or use it for brand new solutions

No problem if you have an existing project, you can easily plug Mobiscroll into your Ionic v1 and v2 apps. Think of it as powerups.

Some of the smartest companies rely on mobiscroll for their UI

With well thought out components and a lot of edge cases handled make your app feel and be top notch.

General features

All the features you need for a great integration

Icon Library

Build and save your custom icon sets with over 2500 icons to choose from

Cross-Platform UI

Deliver great cross-platform web and hybrid apps with adaptable themes


Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering

Source Code

Integrate more tightly and add your own custom functionality to mobiscroll with downloadable source

Only in Complete license

Theme Builder

Customize the look and feel of the UI to match your brand and app


Support multi-lingual apps and serve UI with the correct culture settings

Responsive UI

Deliver great looking apps on multiple sized and shaped screens with adaptable and flexible controls

Modular builds

Fine tune your packages and choose to include only what you need. Save unnecessary weight from your resource files.

Simple Pricing

License for the full suite of tools

The license is perpetual with one year of maintenance included.
Looking for other products and licensing options or grab a single component?
All components included
Usage in multiple projects
Ionic & Angular controls
Royalty-free commercial usage
Modular build for fine-tuned downloads
Built-in support for extensive icon library
Customize themes for a perfect fit
Professional support and maintenance
30 Day
Money Back
Besides our 15 day free trial, if you are not happy or we didn't solve your problem, you'll get a full refund within the first 30 days, whatever the reason may be. No questions asked!
More than 100 live demos with downloadable source available for usage with Angular. Try and download demos →
Browse the extensive API documentation and see how to integrate, customize and tap into the Mobiscroll API for Angular. Explore documentation & API reference →
Quickly build your proof of concept and try it locally. View the quick install guide →

Start Your Free Trial

We'll support you through the whole process of getting up & running

"We spend lots of time building web app forms to work with Mobiscroll, which is fantastic.

Your software makes ours perform great!"
Henson Yem, Senior Technology Consultant, Tang Computers