You can use the Mobiscroll Knockout API in your projects with KO data-binding.

Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & JS snippets) that you can grab and try locally.

Calendar

HTML

<input type="text" data-bind="mobiscroll.calendar: myCalendar">

var ViewModel = function () {
    this.myCalendar = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Calendar.

Color

HTML

<input type="text" data-bind="mobiscroll.color: myColor">

var ViewModel = function () {
    this.myColor = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Color picker.

Date & Time

HTML

<input type="text" data-bind="mobiscroll.datetime: myDatetime">

var ViewModel = function () {
    this.myDatetime = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for Date & Time.

Event Calendar

HTML

<input type="text" data-bind="mobiscroll.eventcalendar: myEventcalendar">

var ViewModel = function () {
    this.myEventcalendar = ko.observableArray([{
        d: new Date(2016, 5, 13),
        text: 'Something important'
    }, {
        d: '12/25',
        text: 'Christmas'
    }]);
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Event Calendar.

Forms

HTML

<form id="myForm" data-bind="mobiscroll.form">
    <label>
        Username
        <input name="username" data-bind="value: username">
    </label>
    <label>
        Password
        <input name="password" data-bind="value: password" type="password">
    </label>
    <button type="submit">Sign In</button>
</form>

var ViewModel = function () {
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Forms.

Image

HTML

<ul  data-bind="mobiscroll.image: selectedValue, mobiscroll.options: {enhance: true}">
   <li data-val="Share" data-icon="share">
        <p>Share</p>
   </li>
    <li data-val="Delete" data-icon="remove">
        <p>Delete</p>
   </li>
</ul>

var ViewModel = function () {
    this.selectedValue = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Image.

Listview

HTML

<ul data-bind="mobiscroll.listview: listOfThings">
    <li data-bind="text: $data" ></li>
</ul>
<button data-bind="click: addTodo">Add</button>

var ViewModel = function () {
    self = this;
    self.listOfThings = ko.observableArray(['take out the trash', 'wash the dishes']);
    self.addTodo = function () {
        self.listOfThings.push('to do');
    }
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Listview.

Measurement

HTML

<input type="text" data-bind="mobiscroll.temperature: myTemperature" />

var ViewModel = function () {
    this.myTemperature = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Measurement.

Menustrip

HTML

<ul data-bind="mobiscroll.menustrip">
    <li data-icon="connection">Wi-Fi</li>
    <li data-icon="location">Location</li>
    <li data-selected="true" data-icon="volume-medium">Sound</li>
</ul>

var ViewModel = function () {
    this.myMenustrip = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Menustrip.

Number

HTML

<input type="text" data-bind="mobiscroll.number: myNumber">

var ViewModel = function () {
    this.myNumber = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Number.

Numpad

HTML

<input type="text" data-bind="mobiscroll.numpad: myNumpad">

var ViewModel = function () {
    this.myNumpad = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Numpad.

Range

HTML

<input type="text" data-bind="mobiscroll.range: myRange">

var ViewModel = function () {
    this.myRange = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Range.

Rating

HTML

<input type="text" data-bind="mobiscroll.rating: myRating">

var ViewModel = function () {
    this.myRating = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Rating.

Scroller

HTML

<input type="text" data-bind="mobiscroll.scroller: myScroller">

var ViewModel = function () {
    this.myScroller = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Scroller.

Select

HTML

<select data-bind="mobiscroll.select: selectedCity">
    <option value="1">Berlin</option>
    <option value="2">London</option>
    <option value="3">New York</option>
    <option value="4">Paris</option>
</select>

var ViewModel = function () {
    this.selectedCity = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Select.

Timer

HTML

<input type="text" data-bind="mobiscroll.timer: myTimer">

var ViewModel = function () {
    this.myTimer = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Timer.

Timespan

HTML

<input type="text" data-bind="mobiscroll.timespan: myTimespan">

var ViewModel = function () {
    this.myTimespan = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Timespan.

Treelist

HTML

<ul data-bind="mobiscroll.list: selectedCountry">
    <li>America
        <ul>
            <li>Mexico</li>
            <li>Brasil</li>
        </ul>
    </li>
    <li>Europe
        <ul>
            <li>Germany</li>
            <li>France</li>
            <li>Italy</li>
        </ul>
    </li>
    <li>Asia
        <ul>
            <li>China</li>
        </ul>
    </li>
</ul>

var ViewModel = function () {
    this.selectedCountry = ko.observable();
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Treelist.

HTML

<div id="widget" data-bind="mobiscroll.widget, mobiscroll.instance: 'widget'" style="display: none;">
    <h3 class="md-text-center">Hi</h3>
    <p class="md-text-center">Are you feeling good today?</p>
</div>
    
<button data-bind="click: showWidget">Show widget</button>

var ViewModel = function () {
    var that = this;
    that.widget = null;
    that.showWidget = function () {
        that.widget.show();
    };
};
ko.applyBindings(new ViewModel());

Browse the Knockout API docs for the Widget.