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');View demos and other examples for the Calendar.
Color
HTML
<input id="color" placeholder="Please Select...">
JS
mobiscroll.color('#color');View demos and other examples for the Color picker.
Date & Time
HTML
<input id="datetime" placeholder="Please Select...">
JS
mobiscroll.datetime('#datetime');View demos and other examples for the Date &Time.
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'
}]
});View demos and other examples for the Event Calendar.
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'
};View demos and other examples for the Forms.
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
});View demos and other examples for the Image.
Listview
HTML
<ul id="list">
<li>Apples</li>
<li>Cakes</li>
<li>Bottles of Juice</li>
</ul>
JS
mobiscroll.listview('#list');View demos and other examples for the Listview.
Measurement
HTML
<input id="temperature" placeholder="Please Select..." />
JS
mobiscroll.temperature('#temperature');View demos and other examples for the Measurement.
Menustrip
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');View demos and other examples for the Menustrip.
Number
HTML
<input id="number" placeholder="Please Select...">
JS
mobiscroll.number('#number');View demos and other examples for the Number.
Numpad
HTML
<input id="numpad" placeholder="Please Select...">
JS
mobiscroll.numpad('#numpad');View demos and other examples for the Numpad.
Range
HTML
<input id="range" placeholder="Please Select...">
JS
mobiscroll.range('#range');View demos and other examples for the Range.
Rating
HTML
<input id="rating" placeholder="Please Select...">
JS
mobiscroll.rating('#rating');View demos and other examples for the 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'
}]
}]
]
});View demos and other examples for the Scroller.
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');View demos and other examples for the Select.
Timer
HTML
<input id="timer" placeholder="Please Select...">
JS
mobiscroll.timer('#timer');View demos and other examples for the Timer.
Timespan
HTML
<input id="timespan" placeholder="Please Select...">
JS
mobiscroll.timespan('#timespan');View demos and other examples for the 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');View demos and other examples for the 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);View demos and other examples for the Widget.
What's next?
For customization options and API settings browse the Mobiscroll for Javascript docs.