How to manually set timepicker
===

I downloaded the timepicker from [here][1]. After cutting a lot of code I came to this simple example:

    <html>
        <head>
            <title>jQuery.timepickr.js</title>
            <link rel="Stylesheet" media="screen" href="reset.css" />
            <link rel="Stylesheet" media="screen" href="styles.css" />
            <link rel="Stylesheet" media="screen" href="../dist/themes/default/ui.core.css" />
            <link rel="Stylesheet" media="screen" href="../src/css/ui.timepickr.css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>
            <script type="text/javascript" src="jquery.utils.js"></script>
            <script type="text/javascript" src="jquery.strings.js"></script>
            <script type="text/javascript" src="jquery.anchorHandler.js"></script>
            <script type="text/javascript" src="jquery.ui.all.js"></script>
            <script type="text/javascript" src="../src/ui.timepickr.js"></script>
    
    
            <script type="text/javascript">
                $(function(){
                  $('#timepicker').timepickr().focus();
                  $('#timepicker').next().find('ol').show().find('li:eq(2)').mouseover();
                });
            </script>
        </head>
        <body id="themeroller">
           
            <div id="splash">
                <div id="demo">
                    <div id="d-demo-wrapper-1" class="demo-wrapper">
                        <input id="timepicker" type="text" value="02:30" class="demo">
                    </div>
                   
                </div>
            </div>
        </body>
    </html>

I noticed that when I try to manually set the time from the keyboard the numbers are changed automatically then the mouse is out of the input field. I noticed that even into the original example I cannot set the numbers manually. How I can solve this problem?   


  [1]: http://haineault.com/media/jquery/ui-timepickr/page/