Contents
General Calendar Cards Color Date & Time Event Calendar Forms Image Listview Measurement Navigation Number Numpad Option List Page Range Scroller Scrollview Select Timer Timespan Treelist Widget Tools Accessibility

Using mobiscroll with Ionic 2 and Ionic 3

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with a simple app. Follow this guide for both Ionic 2 and Ionic 3. If interested in usage with Ionic 1, continue reading here.

Start a trial

First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.

This is how the free trial works:

  1. You can try Mobiscroll for 30 days.
  2. The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
    Read about the differences between trial and licensed products.
  3. You can upgrade to the licensed product at any time during or after your trial.

Enter your first name, set a password and you're ready to go!

Select Ionic 2/3. Then hit the big blue button.

Using the Mobiscroll CLI and NPM to install it in your Ionic app (PREFERRED WAY)

Step 1: Create an app

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app.
If you already have an app at hand, you can skip this step.

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).
$ ionic start myStarterApp tabs
$ cd myStarterApp

Step 2: Install the Mobiscroll CLI and configure the app

Install Mobiscroll CLI from NPM (you'll only have to do it once).

$ npm install -g @mobiscroll/cli

Run mobiscroll config ionic in your terminal window.

$ mobiscroll config ionic

Step 3: Let's see if Mobiscroll was installed correctly

To test it let's add a simple input to the src/pages/home/home.html

<ion-content>
    <ion-item>
        <ion-label>Birthday</ion-label>
        <ion-input [(ngModel)]="myBirthday" mbsc-date></ion-input>
    </ion-item>
</ion-content>

To build the app just run the serve command in the CLI:

$ ionic serve

Manually including Mobiscroll in your Ionic app

Step 1: Create an app

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app.
If you already have an app at hand, you can skip this step.

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).
$ ionic start myStarterApp tabs
$ cd myStarterApp

Step 2: Copy Mobiscroll into your app

The next step is to unpack the downloaded mobiscroll package and copy the lib folder to the src folder of the myStarterApp
At the end you should have the mobiscroll js file under the myStarterApp/src/lib/mobiscroll/js/ folder.
The same is true for the css file: myStarterApp/src/lib/mobiscroll/css/.

Step 3: Include the CSS resources

Let's add the stylesheet to the index.html.
Open the index.html from the src folder and add the following line before the closing </head> tag:

<link rel="stylesheet" href="lib/mobiscroll/css/mobiscroll.angular.min.css">

When the ionic app is built, it will look for the resources under the www folder. Unfortunately at every build the folder contents are overwritten.
To counter this, we will need a script that copies the mobiscroll styling resources to the www folder for each build.
Create a scripts folder under the root folder of the app (myStarterApp/scripts). Then create a file called copy-mobiscroll-css.js with the following content or just download the copy-mobiscroll-css.js file:

module.exports = {
  copyMobiscrollCss: {
    src: ['{{ROOT}}/src/lib/mobiscroll/css/*'],
    dest: '{{WWW}}/lib/mobiscroll/css/'
  }
}

After that open the myStarterApp/package.json file and add an entry to the config section (if there is no config section, create that too)

"config": {
    "ionic_copy": "./Scripts/copy-mobiscroll-css.js"
}

Step 4: Importing the module

Open the src/app/app.modules.ts file and import the MbscModule and the FormsModule from the above mentioned paths:

import { MbscModule } from '../lib/mobiscroll/js/mobiscroll.angular.min';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        // leave the other imports as they are
        // ... 
        MbscModule, // add the mobiscroll module
        FormsModule // add the forms module
    ],
    declarations: // ...
If you are using the Ionic 3 lazy loading feature then the MbscModule and the FormsModule should be imported in the specific page's module.ts file instead of the app.modules.ts.

At this point the app should be ready for the development!

Step 5: Let's see if Mobiscroll was installed correctly

To test it let's add a simple input to the src/pages/home/home.html

<ion-content>
    <ion-item>
        <ion-label>Birthday</ion-label>
        <ion-input [(ngModel)]="myBirthday" mbsc-date></ion-input>
    </ion-item>
</ion-content>

To build the app just run the serve command in the CLI:

$ ionic serve

Other ways to get started

To see how mobiscroll is installed in an Ionic project you can download the Kitchen Sink app or the Starter for Ionic 3.