Mobiscroll components are defined as ES6 modules with dependencies defined, so they can be used as such. The advantage of this is that you don't need to build your Mobiscroll package manually, you include the full source code in your application and import the necessary components in your source code. When your application is built, only the source code of the imported components (and their dependencies) will be included in the bundle.

ES6 modules are only available with the "Complete" license, which includes the full, unminified source code, or with the Basic and Framework licenses with the optional source code add-on.

Example app structure

To demonstrate the usage of the ES6 modules we will use the following directory structure. Copy the downloaded Mobiscroll source code to the lib/mobiscroll folder, making sure the existing folder structure is kept.

/
|--dist/
    |--bundle.js
    |--bundle.css
|--js/
    |--app.js
|--lib/
    |--mobiscroll/
|--styles/
    |--style.less
|--index.html
|--.babelrc

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mobiscroll</title>
    <link href="dist/bundle.css" rel="stylesheet">
</head>


<body>
    <div id="form">
        <div class="mbsc-form-group-inset">
            <label>
                Name
                <input name="username">
            </label>
            <label>
                Email address
                <input name="email" type="email">
            </label>
            <label>
                Password
                <input name="password" type="password" data-password-toggle="true">
            </label>
            <label>
                Birthday
                <input id="birthday" name="birthday">
            </label>
        </div>
        <div class="mbsc-form-group-inset">
            <button class="mbsc-btn-block" type="submit">Create account</button>
        </div>
    </div>
    <script src="dist/bundle.js"></script>
</body>

</html>

Loading components

All components are located in the root of the Mobiscroll source code folder.

Every component exports the main mobiscroll object as default, so import the main mobiscroll object from any of the first loaded component. Subsequent components will be attached automatically to the main object.

Themes should be loaded from the themes folder of the Mobiscroll source. To use the auto theme feature (choosing theme automatically based on platform) make sure to import all themes for the platforms you'd like to support, after that import the auto-theme module.

Languages should be loaded from the i18n folder of the Mobiscroll source.

app.js



// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/material-dark';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/ios-dark';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import languages
import '../lib/mobiscroll/js/i18n/de';
import '../lib/mobiscroll/js/i18n/es';
import './/lib/mobiscroll/js/i18n/zh';


mobiscroll.form('#form', {
    theme: 'auto',
    lang: 'es'
});

mobiscroll.date('#birthday', {
    theme: 'auto',
    lang: 'es'
});

The above code needs to be transpiled to ES5 code in order to run in the browser. There are various module bundlers out there to help you with that. Read on to see how to do this with some of the popular module bundlers (webpack, Rollup, Browserify).

Loading styles

Styles are written in Less and are also modular. In our styles.less file we import the themes for the components we're using.

Light or dark variants of the themes (ios-dark, material-dark, mobiscroll-dark, windows-dark) are present as CSS files, not Less, and are containing styles for every component, so only one file needs to be imported. The same applies for custom themes built with the Theme Builder.

style.less

/* Import component styles */
@import '../lib/mobiscroll/less/datetime.less';
@import '../lib/mobiscroll/less/forms.less';

/* Import required themes for each component */
@import '../lib/mobiscroll/less/themes/material.datetime.less';
@import '../lib/mobiscroll/less/themes/material.forms.less';
@import '../lib/mobiscroll/less/themes/ios.datetime.less';
@import '../lib/mobiscroll/less/themes/ios.forms.less';

/* Import theme variants */
@import (less) '../lib/mobiscroll/less/themes/material-dark.css';
@import (less) '../lib/mobiscroll/less/themes/ios-dark.css';

/* Import custom themes */
@import (less) '../lib/mobiscroll/less/themes/my-test-theme.css';

Compiling the Less styles to css might vary depending on the build system you're using for your app. If you're not using any yet, you can simply compile it from command line, assuming Less is installed. Note that the -ru option (Relative URLs) is used, to maintain the correct path to the Mobiscroll font icon files. If the "Embed in css" option was used on download, this is not needed.

lessc -ru styles/style.less > dist/bundle.css

Some javascript module bundlers (like webpack or Rollup) support importing the styles in the javascript source code through plugins and extensions. See examples below.

Webpack

Install webpack

npm install --save-dev webpack webpack-cli

Install babel-loader to transpile ES6 code

npm install --save-dev babel-core babel-preset-es2015 babel-loader@7

In this example we're using css-loader and less-loader to import the styles directly in the javascript source, the extract-text-webpack-plugin to bundle the styling in a separate css file, and file-loader for the font icon files.

npm install --save-dev style-loader css-loader less-loader file-loader less extract-text-webpack-plugin@next

Instead of separate style sheets we can now import the styles directly in the javascript source.

app.js



// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import component less styles
import '../lib/mobiscroll/less/datetime.less';
import '../lib/mobiscroll/less/forms.less';
// Import theme less styles
import '../lib/mobiscroll/less/themes/material.datetime.less';
import '../lib/mobiscroll/less/themes/material.forms.less';
import '../lib/mobiscroll/less/themes/ios.datetime.less';
import '../lib/mobiscroll/less/themes/ios.forms.less';


mobiscroll.form('#form', {
    theme: 'auto'
});

mobiscroll.date('#birthday', {
    theme: 'auto',
});

Configuration file for webpack

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './js/app.js',
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract(['css-loader'])
        }, {
            test: /\.less/,
            use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
        }, {
            test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
            use: 'file-loader'
        }]
    },
    plugins: [
        new ExtractTextPlugin('bundle.css')
    ]
};

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015" ] }

Run webpack to create the bundles.

npx webpack

Rollup

Install Rollup

npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve

Install rollup-plugin-babel and babel-preset-es2015-rollup to transpile ES2015 code.

npm install --save-dev rollup-plugin-babel babel-preset-es2015-rollup

In this example we're using the rollup-plugin-less plugin to be able to import the styling in the javascript source.

npm install --save-dev rollup-plugin-less

Instead of separate style sheets we can now import the styles directly in the javascript source.

app.js



// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import component less styles
import '../lib/mobiscroll/less/datetime.less';
import '../lib/mobiscroll/less/forms.less';
// Import theme less styles
import '../lib/mobiscroll/less/themes/material.datetime.less';
import '../lib/mobiscroll/less/themes/material.forms.less';
import '../lib/mobiscroll/less/themes/ios.datetime.less';
import '../lib/mobiscroll/less/themes/ios.forms.less';


mobiscroll.form('#form', {
    theme: 'auto'
});

mobiscroll.date('#birthday', {
    theme: 'auto',
});

Configuration file for Rollup

rollup.config.js

import less from 'rollup-plugin-less';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
    entry: 'js/app.js',
    dest: 'dist/bundle.js',
    format: 'iife',
    plugins: [
        nodeResolve({
            jsnext: true
        }),
        commonjs({
            include: 'node_modules/**'
        }),
        less({
            output: 'dist/bundle.css'
        }),
        babel({
            exclude: 'node_modules/**'
        })
    ]
};

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015-rollup" ] }

Run Rollup to create the bundles, using the -c option to use the configuration file.

./node_modules/.bin/rollup -c

Browserify

Install Browserify

npm install --save-dev browserify

Install babelify and babel-preset-es2015 to transpile ES2015 code.

.babelrc

npm install --save-dev babel-preset-es2015 babelify

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015" ] }

Run Browserify to create the bundles

./node_module/.bin/browserify js/app.js -t babelify --outfile dist/bundle.js