Contents

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 Marshmallow, iOS 6+ including iOS 10, Windows Phone 10 and all major mobile and desktop browsers

Having trouble? Ask for help.


Getting Started with Mobiscroll for Angular

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

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.

Here is an example of how to use the plugin in an Angular quickstart application

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.custom.min.js';
import { FormsModule } from '@angular/forms';

Also add the MbscModule and the FormsModule to the imports enumeration

@NgModule({
  imports:      [ BrowserModule, MbscModule, 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.

Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund