mobiscroll timepicker function

Question

Hello I am new to mobiscroll Demos, and I am trying to figure out how they work. For practice I was just trying to get one of their timepicker to work, but I am having some issues. I would appreciate if someone can point out the problem to me in the code.

    <html>
<head>

<script src="jqmobi.js"></script>


<script text/javascript>
$(function(){
    $('#i').scroller({
        preset: 'time',
        theme: 'ios',
        display: 'bottom',
        mode: 'scroller'
    });    

    $('#show').click(function(){
        $('#i').scroller('show'); 
        return false;
    });
    $('#clear').click(function () {
        $('#i').val('');
        return false;
    });
});

</script>

</head>

<body>
<input id="i" name="i"  />


<a href="#" id="show" class="btn">Show</a>
<a href="#" id="clear" class="btn">Clear</a>
</body>

Do you have errors in the console? Perhaps ones that say something like `$ is not defined`? If so, it means you have omitted the jQuery reference (which looks likely) so you need to add `` before the mobiscroll script. — Steve Greatrex, Apr 25 '13 at 14:56

Apoorv Kulkarni · Answer 1 · 2013-04-25T15:10:03.153

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://cdn-dev.aldu.net/jquery.mobiscroll/latest/jquery.mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn-dev.aldu.net/jquery.mobiscroll/latest/jquery.mobiscroll.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
    $('#i').scroller({
        preset: 'time',
        theme: 'ios',
        display: 'bottom',
        mode: 'scroller'
    });    

    $('#show').click(function(){
        $('#i').scroller('show'); 
        return false;
    });
    $('#clear').click(function () {
        $('#i').val('');
        return false;
    });
});
    </script>
    </head>
    <body>
<input id="i" name="i"  />
<a href="#" id="show" class="btn">Show</a>
<a href="#" id="clear" class="btn">Clear</a>
</body> 
</html>

I guess you were missing the mobiscroll javascript and css libraries.

I have implemented the above code here

I have used the css and js mobiscroll from this site as a cdn

Please go through their tutorial from mobiscroll blog

mobiscroll timepicker function

1 Answers1