You can use the Mobiscroll jQuery API if you are already using jQuery or jQuery Mobile.
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
$('#calendar').mobiscroll().calendar();View demos and other examples for the Calendar.
Color
HTML
<input id="color" placeholder="Please Select...">
JS
$('#color').mobiscroll().color();View demos and other examples for the Color.
Date & Time
HTML
<input id="datetime" placeholder="Please Select...">
JS
$('#datetime').mobiscroll().datetime();View demos and other examples for the Date & Time.
Event Calendar
HTML
<input id="eventcalendar" placeholder="Please Select...">
JS
$('#eventcalendar').mobiscroll().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
$('#image').mobiscroll().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
$('#list').mobiscroll().listview();View demos and other examples for the Listview.
Measurement
HTML
<input id="temperature" placeholder="Please Select..." />
JS
$('#temperature').mobiscroll().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
$('#menustrip').mobiscroll().menustrip();View demos and other examples for the Menustrip.
Number
HTML
<input id="number" placeholder="Please Select...">
JS
$('#number').mobiscroll().number();View demos and other examples for the Number.
Numpad
HTML
<input id="numpad" placeholder="Please Select...">
JS
$('#numpad').mobiscroll().numpad();View demos and other examples for the Numpad.
Range
HTML
<input id="range" placeholder="Please Select...">
JS
$('#range').mobiscroll().range();View demos and other examples for the Range.
Rating
HTML
<input id="rating" placeholder="Please Select...">
JS
$('#rating').mobiscroll().rating();View demos and other examples for the Rating.
Scroller
HTML
<input id="scroller" placeholder="Please Select...">
JS
$('#scroller').mobiscroll().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
$('#select').mobiscroll().select();View demos and other examples for the Select.
Timer
HTML
<input id="timer" placeholder="Please Select...">
JS
$('#timer').mobiscroll().timer();View demos and other examples for the Timer.
Timespan
HTML
<input id="timespan" placeholder="Please Select...">
JS
$('#timespan').mobiscroll().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
$('#treelist').mobiscroll().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
$('#widget').mobiscroll().widget();
$('#show').click(function(){
$('#widget').mobiscroll('show');
return false;
});View demos and other examples for the Widget.
What's next?
For customization options and API settings browse the Mobiscroll for jQuery docs.