Using Mobiscroll with Stencil.js

The Mobiscroll plain js api can be used the easiest way with Stencil.js. Installing Mobiscroll in your Stencil.js app takes a couple of minutes. Let's see how you can start with a simple app.

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 free.
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!

Using the Mobiscroll CLI and NPM to install it in your Stencil.js app

Step 1: Create an app

If you don't have an app at hand, you can read more about creating a Stencil.js app.
If you already have an app, you can skip this step.

$ npm init stencil
$ cd myStencilApp

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 javascript in your terminal window.

$ mobiscroll config javascript

Step 3: Import mobiscroll resources to your Stencil component

Importing the js:

import mobiscroll from '@mobiscroll/javascript';

Importing the css:

To load the css you will have to add the location of the mobiscroll css file to the @Component's styleUrl or styleUrls property

@Component({
  tag: 'app-home',
  styleUrls: ['app-home.css', 'path/to/mobiscroll.min.css'],
  shadow: true
})
export class AppHome {}

Or you might consider loading it globally in the stencil.config.ts if you would like to use the mobiscroll components in multiple stencil components.

export const config: Config = {
  globalStyle: 'node_modules/@mobiscroll/javascript/dist/css/mobiscroll.min.css' // or path/to/mobiscroll.min.css
};

If the application is configured with the cli's --no-npm mode, the css import location will be the following:

"node_modules/@mobiscroll/javascript/dist/css/mobiscroll.javascript.min.css";

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

To test it let's add the following example to the src/components/app-home/app-home.tsx

import { Component, Element  } from '@stencil/core';
import mobiscroll from '@mobiscroll/javascript'; // or 'path/to/mobiscroll.min.js'

@Component({
  tag: 'app-home',
  styleUrls: ['app-home.css', '../../../node_modules/@mobiscroll/javascript/dist/css/mobiscroll.min.css'],
  shadow: true
})
export class AppHome {
  birthDay: Date;
  dateInst: any;
  @Element() el: HTMLElement;

  componentDidLoad() {
      // initialize the Mobiscroll components in the componentDidLoad lifecycle event

      let dateInput = this.el.shadowRoot.querySelector('.bday');
      
      // init date picker
      this.dateInst = mobiscroll.date(dateInput, {
        display: 'bottom', 
        theme: 'ios',
        onSet: (ev, inst) => {
          console.log('Selected date as text:', ev.valueText);
          this.birthDay = inst.getVal(); // update the birthDay property manually
        } 
      });
  }
 
  render() {
    return (
      <div class='app-home'>
        <label>
          Birthday
          <input class='bday' placeholder="Select birthday" />
        </label>
      </div>
    );
  }
}

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

$ npm run start