You can use the Mobiscroll plain JS API everywhere where Javascript runs. No need to load jQuery or any other framework just for Mobiscroll.

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 id="calendar" placeholder="Please Select...">

JS

mobiscroll.calendar('#calendar');

Color

HTML

<input id="color" placeholder="Please Select...">

JS

mobiscroll.color('#color');

Date & Time

HTML

<input id="datetime" placeholder="Please Select...">

JS

mobiscroll.datetime('#datetime');

Event Calendar

HTML

<input id="eventcalendar" placeholder="Please Select...">

JS

mobiscroll.eventcalendar('#eventcalendar', {
    data: [{
        start: new Date(2016, 1, 1),
        end: new Date(2016, 1, 2),
        text: 'Conference',
        color: 'red'
    }, {
        d: '12/25',
        text: 'Christmas'
    }]
});

Forms

HTML

<div id="myform" mbsc-enhance>
    <label>
        Username
        <input name="username">
    </label>
    <label>
        Password
        <input name="password" type="password">
    </label>
    <button type="submit">Sign In</button>
</div>

JS

mobiscroll.settings = {
    theme: 'mobiscroll'
};

Image

HTML

<ul id="image" style="display:none">
    <li data-val="Share" data-icon="share">
        <p>Share</p>
    </li>
    <li data-val="Delete" data-icon="remove">
        <p>Delete</p>
    </li>
</ul>

JS

mobiscroll.image('#image', { 
    enhance: true
});

Listview

HTML

<ul id="list">
    <li>Apples</li>
    <li>Cakes</li>
    <li>Bottles of Juice</li>
</ul>

JS

mobiscroll.listview('#list');

Measurement

HTML

<input id="temperature" placeholder="Please Select..." />

JS

mobiscroll.temperature('#temperature');

HTML

<ul id="menustrip">
    <li data-icon="connection">Wifi</li>
    <li data-icon="location">Location</li>
    <li data-selected="true" data-icon="volume-medium">Sound</li>
</ul>

JS

mobiscroll.menustrip('#menustrip');

Number

HTML

<input id="number" placeholder="Please Select...">

JS

mobiscroll.number('#number');

Numpad

HTML

<input id="numpad" placeholder="Please Select...">

JS

mobiscroll.numpad('#numpad');

Range

HTML

<input id="range" placeholder="Please Select...">

JS

mobiscroll.range('#range');

Rating

HTML

<input id="rating" placeholder="Please Select...">

JS

mobiscroll.rating('#rating');

Scroller

HTML

<input id="scroller" placeholder="Please Select...">

JS

mobiscroll.scroller('#scroller', { 
    showLabel: true,
    wheels: [
        [{
            label: 'First wheel',
            data: ['0', '1', '2', '3', '4', '5', '6', '7']
        }, {
            label: 'Second wheel',
            data: [{
                value: 0,
                display: 'a'
            }, {
                value: 1,
                display: 'b'
            }, {
                value: 2,
                display: 'c'
            }, {
                value: 3,
                display: 'd'
            }]
        }]
    ]
});

Select

HTML

<select name="City" id="select">
    <option value="1">Berlin</option>
    <option value="2">London</option>
    <option value="3">New York</option>
    <option value="4">Paris</option>
</select>

JS

mobiscroll.select('#select');

Timer

HTML

<input id="timer" placeholder="Please Select...">

JS

mobiscroll.timer('#timer');

Timespan

HTML

<input id="timespan" placeholder="Please Select...">

JS

mobiscroll.timespan('#timespan');

Treelist

HTML

<ul id="list">
    <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>

JS

mobiscroll.treelist('#treelist');

Widget

HTML

<div id="widget" style="display: none;">
    <h3 class="md-text-center">Hi</h3>
    <p class="md-text-center">Are you feeling good today?</p>
</div>

<button id="show">How are you feeling?</button>

JS

var instance = mobiscroll.widget('#widget');

document
    .getElementById('show')
    .addEventListener('click', function () {
        instance.show();
    }, false);

What's next?

Did this answer your question?