Mobiscroll 2.13.1 Documentation

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, Zepto.js >= 1.0 or App Framework (former jqMobi) >= 1.2

Starting from version 2.2 due to naming collisions with other frameworks the $('#selector').mobiscroll() notation is introduced instead of $('#selector').scroller(). $('#selector').scroller() also works, if there is no collision, but it is considered deprecated and will be removed in the future.

Starting from version 2.0rc2 the 'preset' option no longer defaults to 'date'. If you want to use the date preset, you must explicitly specify. 'ampm' and 'seconds' options were also removed. Use the timeWheels option instead

Having trouble? Ask for help.


Getting Started

Mobiscroll lets you easily create and customize touch friendly spinner/scroller controls.
Thanks to its architecture, the mobiscroll core provides the scrolling functionality and it can be used not just for date & time picking, but for rendering scrollable lists, selects, radiobutton lists, basically everything that lets you select a value.

To get started follow these easy steps and create your first mobicroll instance.
The control is tied to either an input or a select element.

1. Add an input to your HTML markup

<input id="scroller" name="scroller" />

2. Mobiscroll is relying on jQuery, Zepto.js or App Framework (libraries with jQuery compatible API), so make sure you include what you're going to use under scripts.

Requires jQuery >= 1.7, Zepto.js >= 1.0 or App Framework (former jqMobi) >= 1.2

<script src="jquery-1.10.2.min.js"></script>
<!-- or -->
<script src="zepto.js"></script>
<!-- or -->
<script src="appframework.js"></script>

3a. Initialize your control (jQuery)

Default date picker

$(function(){
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
});

Default time picker

$(function(){
    // create a timepicker with default settings
    $("#scroller").mobiscroll().time(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'time' });
});

Default datetime picker

$(function(){
    // create a datetimepicker with default settings
    $("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});

3b. Initialize your control (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
    $("#scroller").mobiscroll().date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
});

For more examples check out the demo page.