jQuery SimpleTimePicker

Features

It is a really simple picker to select a time.

The plugin creates 2 selectors: hour, minute. After you select a time with these selectors, it puts the result time string in an output field. You can send or serialize your form normally.

Examples

 

Basic: Default values, current time selected without output result.

        <p class="time1"></p>


        <script src="js/jquery.simpletimepicker.js"><script>
        <script>
            $().ready(function(){

              $(".time1).simpleTimePicker({
                    time.selected:'now'
              });

            });
        </script>
    

 

Intermediate: some features and output result in a text input.

Result: 

        <span id="time2"></span>
        <input id='time2_hide' type="hidden" value="" />

        <script src="js/jquery.simpletimepicker.js"><script>
        <script>
            $().ready(function(){

                $("#time2").simpleTimePicker({
                    output:'#time2_hide',
                    text: {
                        hour:'Hour',
                        minute:'Minute'
                    },
                    format:12,
                    interval: 5,
                    time: {
                        selected:'now'
                    },
                    css:'form-control'
                });

            });
        </script>
    

 

Advanced: Plugin callbacks and methods

Start:

End:

    <span id="time3"></span>
    <span id="time4"></span>


    <script src="js/jquery.simpletimepicker.js"><script>
    <script>
    $().ready(function(){

        $("#time3").simpleTimePicker({
            css:'form-control',
            output:'#time3_hide',
            onSelect:function(el, time) {
                $("#time4").simpleTimePicker("setMin",time);
            }
        });

        $("#time4").simpleTimePicker({
            output:'#time4_hide',
            css:'form-control',
            onSelect:function(el, time) {
                $("#time3").simpleTimePicker("setMax",time);
            }
        });

    });
    </script>

Benefits

• Simple It writes only 3 selectors, controls day of the month and leap years
• Lightweight The JavaScript code is just 4.8KB minified
• Non intrusive The result input (text or hidden) can be submitted or serialized
• Customizable Put your CSS to make it pretty or responsive, it is simple
• Cross Browser It works perfectly in most browsers like Chrome, Firefox, Safari, Explorer 7+

Package

It includes the documentation with some examples, the minified version to use in production and the unminified version that you can modify according to your needs.

Usage

 

You can pass options as key/value object.

Key	Default value	Description
output	null	Selector of the input field (text or hidden) to write the result time or load a time if you need it
text: {     hour:     minute: }	null null	Initial default text for every selector
format	12/24	Time format, 12 or 24 hours
time: {     min:     max:     selected: }		Minimum time, Maximum time and selected time, format like 12:34. Selected time accepts also a 'now' string to set now time
interval	1	Interval of miutes, for example every 5 minutes
css	null	Additional classes for every selector
onSelect	null	This function will be called after every selector changes onSelect: function(element,time){ ... }
onLoad	null	This function will be called after plugin is sucessfully load onLoad: function(element){ ... }
onDestroy	null	This function will be called after plugin is removed onDestroy: function(){ ... }

 

Some functions are available.

Key	Description
setTime(time)	Method allows you to change time Example: $( ".selector" ).simpletimepicker("setTime", "15:31");
setMin(time)	Method allows you to change minimum time Example: $( ".selector" ).simpletimepicker("setMin", '12:34');
setMax(time)	Method allows you to change maximum time Example: $( ".selector" ).simpletimepicker("setMax", '20:45');
getTime()	Method allows you get the time Example: $( ".selector" ).simpletimepicker("getTime");
remove()	Method allows you to remove the plugin Example: $( ".selector" ).simpletimepicker("remove");