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.scss
|--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 Sass and are also modular. In our styles.scss file we import the themes for the components we're using.

/* Specify font icon path */
$mbsc-font-path: './fonts/';

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

/* Import custom themes */
@import "../mobiscroll/scss/themes/mobiscroll.scss"
@include mbsc-custom-theme('mobiscroll-red', 'mobiscroll', ('background': #f7f7f7, 'text': #454545, 'accent': #e61d2a));

Compiling the Sass 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 Sass is installed.

node-sass styles/style.scss 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 sass-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 sass-loader file-loader node-sass extract-text-webpack-plugin@next

Import component files, theme files and the style file 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 styles
import './styles/style.scss';


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

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

Import component styles in the style.scss file.

style.scss

/* Specify font icon path */
$mbsc-font-path: './fonts/';

/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';

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: /\.scss/,
            use: ExtractTextPlugin.extract(['css-loader', 'sass-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-sass plugin to be able to import the styling in the javascript source.

npm install --save-dev rollup-plugin-sass

Import component files, theme files and the style file 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 styles
import './styles/style.scss';


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

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

Import component styles in the style.scss file.

style.scss

/* Specify font icon path */
$mbsc-font-path: './fonts/';

/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';

Configuration file for Rollup

rollup.config.js

import sass from 'rollup-plugin-sass';
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/**'
        }),
        sass({
            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

Scheduling & calendaring

Date & time picking

Mobile UI Patterns

Docs

Community Forum

Knowledge base

Customers

Blog