Contents

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

Supported Platforms - Android 4.1+ including Android Marshmallow, iOS 6+ including iOS 10, Windows Phone 10 and all major mobile and desktop browsers

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.

What is Knockout JS?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Learn more

What is the Mobiscroll Integration plugin and when to use it?

The Mobiscroll KnockoutJS Integrational plugin helps you to use mobiscroll with the KnockoutJS library. This plugin enables you to use mobiscroll with the same syntax knockout uses. While Mobiscroll can work with the KnockoutJS library without this plugin, this eases the Model - View interaction and helps to keep your markup as clean as possible by having additional custom bindings for each component. See the reference for more!

Getting started with The Mobiscroll KO integration

Here is an example of how to use the plugin in a common scenario

1. Download the plugin

When building your package select the KnockoutJS plugin on the download page. (don't forget to include the knockout.js on your page header!)

2. Load the necessary scripts

Load order is essential. Make sure you load jQuery before Knockout, and Mobiscroll after jQuery and Knockout.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="js/mobiscroll.custom-3.1.0.min.js"></script>

3. Create Model

Create an observable in your model for the desired data. In this case the anniversary wich will be a date.

var vModel = function() {
    this.anniversary = ko.observable();
}

4. Add markup and bind it to the model

Create a text input for the data, and add a binding for the property in the model.

<input type="text" data-bind="mobiscroll.date: anniversary" />

5. Apply the bindings

After all is set up, you need to call the knockouts applyBinding function in the document ready handler

(function(){
    ko.applyBindings(new vModel());
});

That's it! Now you can use the input as a datetime picker. Don't have to worry about initialization and data handling. The mobiscroll will update your model whenever you change the selected value using your scroller, and the scroller will also change its value when you set it in your model.

Custom Bindings Reference

General Bindings

Binding Description
mobiscroll.instance This binding can be used to set the mobiscroll instance to the model. The property name has to be passed as string parameter:

data-bind="mobiscroll.instance: 'myPropertyName'"
mobiscroll.options This binding can be used to pass parameters to the mobiscroll on initialization:

data-bind="mobiscroll.options: { display: 'inline', mode: 'clickpick', onChange: eventHandler }"

You can customize your scroller easily, just as you would with any framework:

// the model for the example
var vModel = function() {
    var that = this;
    this.appointment = ko.observable(); // this property will hold the date object
        
    this.count = ko.observable(0); // we will count the change event in this observable
        
    this.counterIncrease = function() { // this function will increase the counter - this will be the onChange event handler
        var count = that.count(); // get the counter value
        that.count(count + 1); // increase it by one
    };
}
<!-- Here is the input which will be the scroller -->
<input type="text" data-bind="
    mobiscroll.datetime: appointment, mobiscroll.options: { display: 'bottom', onChange: counterIncrease }" />
<!-- This div will contain the count -->
<div data-bind="text: count"></div>

For more examples check out the demo page.

Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund