jQuery timepicker

jQuery timepicker needs jquery, jquery-ui and jquery-ui css style for its work:

1
2
3
4
5
6
7
8
9
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" />
 
<link href="timepicker/jquery-ui-timepicker.css" rel="stylesheet" />
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script src="timepicker/jquery.ui.timepicker.js"></script>

jQuery timepicker code:

1
2
3
4
5
$(function(){
 
    $('.timepicker').timepicker();
 
});

jQuery timepicker parameters:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
$('#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
 
    },
 
    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
 
 
 
    // 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
 
 
 
});

6 thoughts on “jQuery timepicker”

Leave a Reply to Sahjadul Karim Cancel reply