Reputation: 21329

using jquery to get a time picker

I do not know jquery. I was looking for a time picker when I found this script. Can anyone please help me, on how should I utilize this code to get the time picker in my html page.

/* jQuery timepicker
 * replaces a single text input with a set of pulldowns to select hour, minute, and am/pm
 *
 * Copyright (c) 2007 Jason Huck/Core Five Creative (http://www.corefive.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version 1.0
 */

(function($){
    jQuery.fn.timepicker = function(){
        this.each(function(){
            // get the ID and value of the current element
            var i = this.id;
            var v = $(this).val();

            // the options we need to generate
            var hrs = new Array('01','02','03','04','05','06','07','08','09','10','11','12');
            var mins = new Array('00','15','30','45');
            var ap = new Array('am','pm');

            // default to the current time
            var d = new Date;
            var h = d.getHours();
            var m = d.getMinutes();
            var p = (h >= 12 ? 'pm' : 'am');

            // adjust hour to 12-hour format
            if(h > 12) h = h - 12;

            // round minutes to nearest quarter hour
            for(mn in mins){
                if(m <= parseInt(mins[mn])){
                    m = parseInt(mins[mn]);
                    break;
                }
            }

            // increment hour if we push minutes to next 00
            if(m > 45){
                m = 0;

                switch(h){
                    case(11):
                        h += 1;
                        p = (p == 'am' ? 'pm' : 'am');
                        break;

                    case(12):
                        h = 1;
                        break;

                    default:
                        h += 1;
                        break;
                }
            }

            // override with current values if applicable
            if(v.length == 7){
                h = parseInt(v.substr(0,2));
                m = parseInt(v.substr(3,2));
                p = v.substr(5);
            }

            // build the new DOM objects
            var output = '';

            output += '<select id="h_' + i + '" class="h timepicker">';             
            for(hr in hrs){
                output += '<option value="' + hrs[hr] + '"';
                if(parseInt(hrs[hr]) == h) output += ' selected';
                output += '>' + hrs[hr] + '</option>';
            }
            output += '</select>';

            output += '<select id="m_' + i + '" class="m timepicker">';             
            for(mn in mins){
                output += '<option value="' + mins[mn] + '"';
                if(parseInt(mins[mn]) == m) output += ' selected';
                output += '>' + mins[mn] + '</option>';
            }
            output += '</select>';              

            output += '<select id="p_' + i + '" class="p timepicker">';             
            for(pp in ap){
                output += '<option value="' + ap[pp] + '"';
                if(ap[pp] == p) output += ' selected';
                output += '>' + ap[pp] + '</option>';
            }
            output += '</select>';              

            // hide original input and append new replacement inputs
            $(this).attr('type','hidden').after(output);
        });

        $('select.timepicker').change(function(){
            var i = this.id.substr(2);
            var h = $('#h_' + i).val();
            var m = $('#m_' + i).val();
            var p = $('#p_' + i).val();
            var v = h + ':' + m + p;
            $('#' + i).val(v);
        });

        return this;
    };
})(jQuery);



/* SVN: $Id: jquery.timepicker.js 456 2007-07-16 19:09:57Z Jason Huck $ */

Upvotes: 1

Answers (3)

Anoop Saini

Reputation: 307

I have use below Jquery Library

    <html>
 <head>
   ...
 </head>
 <body>
   ...
   <form ... >
   ...

   <input type="text" class="timepicker" name="timepicker" />

   ...
   </form>
   ...
 </body>

 <script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

 <script type="text/javascript">
   $(document).ready(function() {
     $('.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 30,
            minTime: '10',
            maxTime: '6:00pm',
            defaultTime: '11',
            startTime: '10:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true
         });
   });
 </script>

</html>

Upvotes: 0

Kraang Prime

Reputation: 10479

In the HTML

<input type="text" class="timepicker" name="foo" />

In the footer, include the javascript, then

$(document).ready(function() {
   $('.timepicker').timepicker();
});

This assumes that you are loading jQuery, and write the rest of the HTML.

It is also using a non-existant (maybe) class named 'timepicker' so it can readily be used to assign this capability to more than one field at the same time just by adding that class to each input. You can also use <div>, but I am assuming you want the input in a <form>

LOAD ORDER EXAMPLE

<html>
 <head>
   ...
 </head>
 <body>
   ...
   <form ... >
   ...

   <input type="text" class="timepicker" name="foo" />

   ...
   </form>
   ...
 </body>

 <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
 <script src="WHATEVER_YOU_NAMED_TIMEPICKER.js" type="text/javascript"></script>

 <script type="text/javascript">
   $(document).ready(function() {
     $('.timepicker').timepicker();
   });
 </script>

</html>

Upvotes: 2

Cheong BC

Reputation: 316

HTML

<input type="text" id="timepicker"/>

Javascript

<script type="text/javascript">
$(document).ready(function() {
   $('#timepicker').timepicker();
});
</script>

install jquery library at header

<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

Is that a sample script below.

Demo

demo

Upvotes: 4

using jquery to get a time picker

Answers (3)

LOAD ORDER EXAMPLE

Related Questions