Mobiscroll 2.5.4 Documentation Mobiscroll 2.4.5 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.6, Zepto.js >= 1.0rc1 or jqMobi >= 1.0.3

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 jqMobi (libraries with jQuery compatible API), so make sure you include what you're going to use under scripts.

Requires jQuery >= 1.6, Zepto.js >= 1.0rc1 or jqMobi >= 1.0.3

<script src="jquery-1.8.2.min.js"></script>
<!-- or -->
<script src="zepto.js"></script>
<!-- or -->
<script src="jqmobi.js"></script>

3. Initialize your control

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' });
});

For more examples check out the demo page.

Need help? Ask us and get professional help!