This version of the documentation is outdated. Check the latest version here!

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Requires jQuery 1.7 or newer
Supported Platforms - Android 5+ including Android 13, iOS 9+ including iOS 16 and all major desktop browsers, including Chrome 43+, Firefox 16+, Safari 9+, Edge 12+ and Internet Explorer 11+.

Having trouble? Ask for help.


Getting Started with Mobiscroll for JQuery

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.

To get started, follow these simple steps.

1. Download Mobiscroll

When building your package, select the required components on the download page.

2. Load the necessary scripts

Requires jQuery 1.7 or newer
<!-- Include jQuery -->
<script src="jquery-2.2.2.min.js"></script>
<!-- Include Mobiscroll -->
<script src="js/mobiscroll.jquery.min.js"></script>
<link href="css/mobiscroll.jquery.min.css" rel="stylesheet" type="text/css">

3. Add an input to your HTML markup

<input id="myInput" />

4a. Initialize your component (jQuery)

Default date picker
$(function () {
    // create a datepicker with default settings
    $("#myInput").mobiscroll().datepicker();
});
Default time picker
$(function () {
    // create a timepicker with default settings
    $("#myInput").mobiscroll().datepicker({ controls: ['time']});
});
Default datetime picker
$(function () {
    // create a datetimepicker with default settings
    $("#scroller").mobiscroll().datepicker({ controls: ['datetime']});
});

4b. Initialize your component (jQuery Mobile)

One of the first things people learn in jQuery is to use the $(document).ready() (or $(function() { }) ) function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event.

Default date picker
$(document).on('pageinit', '#testPage', function () {
    // create a datepicker with default settings
    $("#myInput").mobiscroll().datepicker();
});

For more examples check out the demo page.

Using module loaders

Mobiscroll can be loaded as a module as well. It implements the Universal Module Definition (UMD) pattern, meaning that it can be used with module loaders supporting the Asynchronous Module Definition (AMD) (e.g. RequireJS, Webpack, SystemJS) or CommonJS (e.g. Browserify, Webpack, SystemJS) syntax.

To load Mobiscroll as a module, download the mobiscroll package and use it as you would use any other module:

CommonJS example
var $ = require('jquery');
var mobiscroll = require('path/to/mobiscroll/js/mobiscroll.jquery.min');

$(function () {
    $('#test').mobiscroll().datepicker();
});
AMD example
require(['jquery', 'path/to/mobiscroll/js/mobiscroll.jquery.min'], function ($) {
    $('#test').mobiscroll().datepicker();
});

Using Mobiscroll v4 alongside v5

The 5th major version of Mobiscroll contains a limited number of components, compared to v4. If you need to keep using some components from v4, which are not present in the newer version, please follow this guide.

Global Options

mobiscroll.setOptions({ theme: 'ios', themeVariant: 'dark' });

Description

With the setOptions method, you can set global options that are needed across your application or page. These options will be applied to all components. Including all the components that are initialized after the setOptions call. Components that were initialized before the setOptions call, will be updated with the new options as well at the time of the setOptions function call.

// Sets the theme to iOS dark
mobiscroll.setOptions({
    theme: 'ios',
    themeVariant: 'dark'
});