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

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Supported Platforms - Android 4.1+ including Android 8 (Oreo), iOS 6+ including iOS 12 and all major desktop browsers, including Chrome, Firefox, Safari, Edge and Internet Explorer 10+.

Having trouble? Ask for help.


Getting Started with Mobiscroll for Angular

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

Requires TypeScript 2.2.0 or newer

For getting started with Mobiscroll for Ionic 2 or Ionic 3 please follow this guide.

Using Mobiscroll with Angular 6+ requires the RxJS compatibility package: rxjs-compat. It can be installed with npm in the following way: $ npm install rxjs-compat@6 --save.

Please note: if you are using the CLI for installation this package will be automatically installed.

Using the Mobiscroll CLI and NPM

Step 1: Create an app

If you don't have an app at hand, create a starter with the Angular CLI (sudo access might be required).

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).
$ ng start myStarterApp
$ 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 angular in your terminal window.

$ mobiscroll config angular

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

To test it let's add a simple input to one of your pages, like src/app/app.component.html

<mbsc-form>
    <mbsc-input [(ngModel)]="myBirthday" mbsc-date>Birthdate</mbsc-input>
</mbsc-form>

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

$ ng serve --open
Please note that the cli only imports the MbscModule in the top module.
If you are using multiple @NgModules in your app, the MbscModule should be imported in all modules you want to use the components in. How to...

Manually including Mobiscroll in your Angular app

Step 1. Set up the angular quickstart seed

Download and set up the angular quickstart seed from here.

Unzip it into your project folder. Then perform the remaining steps with these terminal commands.

Step 2. Download the Mobiscroll components

After dowloading the package from the download page, unzip it and copy the lib folder from the package to the src folder of your app.

Step 3. Import the mobiscroll module

To import Mobiscroll, open app/app.module.ts and add the following statement after the other imports.

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

To configure the Mobiscroll navigation components to use the angular router, also import the Router and pass it to the MbscModule forRoot method.

import { Router } from '@angular/router';

Also add the MbscModule and the FormsModule to the imports enumeration

@NgModule({
  imports:      [ BrowserModule, MbscModule.forRoot({ angularRouter: Router }), FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4. Load the stylesheets

Open the index.html from the src folder, and add the following line to the header

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

At this point everything should be ready for using the mobiscroll directives and components.

Step 5. Test the directives with a simple example

Open the app.component.ts and add the birthday property of type date. In the template add an input with the mbsc-date directive and ngModel to bind the value to the birthday.
It should look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <div>
      <input [(ngModel)]="birthday" mbsc-date>
    </div>
  `,
})

export class AppComponent {
  name = 'Angular';
  birthday: Date = new Date(1988, 5, 24);
}

Check your browser! When clicking the input, the mobiscroll date picker should pop up for value selection!

Common options

Every component can be tuned to your needs, by the initialization options. You can pass the options with the [mbsc-options] attribute for directives and [options] attribute for components.

Example for options directive in angular
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <div>
      <input [(ngModel)]="birthday" mbsc-datetime [mbsc-options]="birhtdayOptions" />
    </div>
  `,
})
export class AppComponent {
  name = 'Angular';
  birthday: Date = new Date(1988, 5, 24);
  birthdayOptions = {
    display: 'bottom',
    theme: 'ios'
  }
}

Calling instance methods

Mobiscroll directives are exported as mobiscroll, so you can use them as template variables. Every directive has an instance property, that holds a reference to the mobiscroll instance.

@Component({
  selector: 'my-app',
  template: `<div>
      <input [(ngModel)]="birthday" mbsc-datetime #myScroller="mobiscroll" />
      <button (click)="myScroller.instance.show()"<Show</button>
    </div>
  `,
})
export class AppComponent {
  birthday: Date = new Date(1988, 5, 24);
}

For more examples check out the demo page.