jQuery UI Timepicker

JQuery Timepicker adalah plugin untuk menampilkan pilihan waktu/jam untuk memudahkan kita menginput data yang berupa jam. Plugin ini terbuat dari JQuery UI, jadi kalau kalian menggunakan JQuery UI akan sangat cocok untuk menggunakan plugin ini.

Dilisensikan sama seperti jQuery: lisensi MIT dan GPL.

 Requirements :

Download Timepicker

Current version : 0.3.3 - released 25 January 2013

Get it on github

Download from here (.zip)

Cara Penggunaan :

Load CSS :

<link rel="stylesheet" href="include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.3" type="text/css" />
Load Javascript : 

<script type="text/javascript" src="include/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.3"></script>
Load Time Picker : 
//instan mode
$(function(){
   $('#timepicker').timepicker();
});

//advance mode
$(function(){
   $('#timepicker').timepicker({
    // Options
    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
    showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10.
                                     (default: true)
    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
                                     (default: true)
    showPeriod: false,            // Define whether or not to show AM/PM with selected time. (default: false)
    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
    periodSeparator: ' ',         // The character to use to separate the time from the time period.
    altField: '#alternate_input', // Define an alternate input to parse selected time to
    defaultTime: '12:34',         // Used as default time when input field is empty or for inline timePicker
                                  // (set to 'now' for the current time, '' for no highlighted time,
                                     default value: now)

    // trigger options
    showOn: 'focus',              // Define when the timepicker is shown.
                                  // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
                                  // 'both': when the input gets focus and when the button is clicked.
    button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

    // Localization
    hourText: 'Hour',             // Define the locale text for "Hours"
    minuteText: 'Minute',         // Define the locale text for "Minute"
    amPmText: ['AM', 'PM'],       // Define the locale text for periods

    // Position
    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
    atPosition: 'left bottom',    // Corner of the input to position

    // Events
    beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
    onSelect: onSelectCallback,   // Define a callback function when an hour / minutes is selected.
    onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
    onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
    onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)

    // custom hours and minutes
    hours: {
        starts: 0,                // First displayed hour
        ends: 23                  // Last displayed hour
    },
    minutes: {
        starts: 0,                // First displayed minute
        ends: 55,                 // Last displayed minute
        interval: 5,              // Interval of displayed minutes
        manual: []                // Optional extra entries for minutes
    },
    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

    // Min and Max time
    minTime: {                    // Set the minimum time selectable by the user, disable hours and minutes
        hour: minHour,            // previous to min time
        minute: minMinute
    },
    maxTime: {                    // Set the minimum time selectable by the user, disable hours and minutes
        hour: maxHour,            // after max time
        minute: maxMinute
    },


    // buttons
    showCloseButton: false,       // shows an OK button to confirm the edit
    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
    showNowButton: false,         // Shows the 'now' button
    nowButtonText: 'Now',         // Text for the now button
    showDeselectButton: false,    // Shows the deselect time button
    deselectButtonText: 'Deselect' // Text for the deselect button

});
});

Input HTML : 

<input type="text" value="" id="timepicker" style="width: 70px;" class="hasTimepicker">

DEMO Time Picker