Using Mobiscroll with Ionic 2, 3, 4, 5, 6 and Ionic 7

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 Ionic 2+. If interested in usage with Ionic 1, continue reading here.

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.

$ ionic start my-starter-app tabs
$ cd my-starter-app

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

The command will ask for your credentials (email and password). If you already have a mobiscroll account but you are unsure about the details, you find them on your account page. If you don't have an account yet, you can start a trial in no time following these steps.

Step 3. Importing Mobiscroll to other modules (Optional)

When you have only one module (the app.module.ts), the previous configuration process will add an import for the Mobiscroll module there, otherwise it will ask you to choose the Modules you want to use Mobiscroll in.
If you add more modules later, or decide that you need the mobiscroll components in a module you didn't add in the configuration phase, you can add the imports manually like this:

// ...other imports of your module

import { MbscModule } from '@mobiscroll/angular';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MbscModule, // <-- added the Mobiscroll Module to the imports
    RouterModule.forChild([{ path: '', component: YourNewPage }])
  ],
  declarations: [YourNewPage]
})
export class YourNewPageModule {}

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

To test it let's add a simple input to the src/pages/home/home.html. In case of an Ionic 4 and Ionic 5 app you will find the home page here: src/app/home/home.page.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

At this point you have completed the setup. Go build great things!