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();

Color

HTML

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

JS

$('#color').mobiscroll().color();

Date & Time

HTML

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

JS

$('#datetime').mobiscroll().datetime();

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'
    }]
});

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

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

Listview

HTML

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

JS

$('#list').mobiscroll().listview();

Measurement

HTML

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

JS

$('#temperature').mobiscroll().temperature();

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();

Number

HTML

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

JS

$('#number').mobiscroll().number();

Numpad

HTML

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

JS

$('#numpad').mobiscroll().numpad();

Range

HTML

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

JS

$('#range').mobiscroll().range();

Rating

HTML

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

JS

$('#rating').mobiscroll().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'
            }]
        }]
    ]
});

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();

Timer

HTML

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

JS

$('#timer').mobiscroll().timer();

Timespan

HTML

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

JS

$('#timespan').mobiscroll().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();

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;
});

What's next?

Did this answer your question?