Add a simple datetimepicker to jQuery UI's datepicker
23 |
27 | $('#basic_example_1').datetimepicker();
28 |
29 | Add only a timepicker:
35 |
39 | $('#basic_example_2').timepicker();
40 |
41 | Format the time:
46 |
50 | $('#basic_example_3').datetimepicker({
51 | timeFormat: "hh:mm tt"
52 | });
53 |
54 | Timepicker comes with a collection of localization files and one combined file with all available localizations. $.timepicker.regional["your localization code here"] is a simple object with preset options:
60 |
64 | $('#basic_example_4').timepicker(
65 | $.timepicker.regional['es']
66 | );
67 |
68 | Simplest timezone usage:
75 |
79 | $('#timezone_example_1').datetimepicker({
80 | timeFormat: 'hh:mm tt z'
81 | });
82 |
83 | Define your own timezone options:
88 |
92 | $('#timezone_example_2').datetimepicker({
93 | timeFormat: 'HH:mm z',
94 | timezoneList: [
95 | { value: -300, label: 'Eastern'},
96 | { value: -360, label: 'Central' },
97 | { value: -420, label: 'Mountain' },
98 | { value: -480, label: 'Pacific' }
99 | ]
100 | });
101 |
102 | Add a grid to each slider:
109 |
113 | $('#slider_example_1').timepicker({
114 | hourGrid: 4,
115 | minuteGrid: 10,
116 | timeFormat: 'hh:mm tt'
117 | });
118 |
119 | Set the interval step of sliders:
124 |
128 | $('#slider_example_2').datetimepicker({
129 | timeFormat: 'HH:mm:ss',
130 | stepHour: 2,
131 | stepMinute: 10,
132 | stepSecond: 10
133 | });
134 |
135 | Add sliderAccess plugin for touch devices:
140 |
144 | $('#slider_example_3').datetimepicker({
145 | addSliderAccess: true,
146 | sliderAccessArgs: { touchonly: false }
147 | });
148 | Use dropdowns instead of sliders. By default if slider is not available dropdowns will be used.
153 |
157 | $('#slider_example_4').datetimepicker({
158 | controlType: 'select',
159 | timeFormat: 'hh:mm tt'
160 | });
161 | Uses one line dropdowns instead of sliders.
166 |
170 | $('#slider_example_4andHalf').datetimepicker({
171 | controlType: 'select',
172 | oneLine: true,
173 | timeFormat: 'hh:mm tt'
174 | });
175 | Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).
180 |var myControl= {
184 | create: function(tp_inst, obj, unit, val, min, max, step){
185 | $('<input class="ui-timepicker-input" value="'+val+'" style="width:50%">')
186 | .appendTo(obj)
187 | .spinner({
188 | min: min,
189 | max: max,
190 | step: step,
191 | change: function(e,ui){ // key events
192 | // don't call if api was used and not key press
193 | if(e.originalEvent !== undefined)
194 | tp_inst._onTimeChange();
195 | tp_inst._onSelectHandler();
196 | },
197 | spin: function(e,ui){ // spin events
198 | tp_inst.control.value(tp_inst, obj, unit, ui.value);
199 | tp_inst._onTimeChange();
200 | tp_inst._onSelectHandler();
201 | }
202 | });
203 | return obj;
204 | },
205 | options: function(tp_inst, obj, unit, opts, val){
206 | if(typeof(opts) == 'string' && val !== undefined)
207 | return obj.find('.ui-timepicker-input').spinner(opts, val);
208 | return obj.find('.ui-timepicker-input').spinner(opts);
209 | },
210 | value: function(tp_inst, obj, unit, val){
211 | if(val !== undefined)
212 | return obj.find('.ui-timepicker-input').spinner('value', val);
213 | return obj.find('.ui-timepicker-input').spinner('value');
214 | }
215 | };
216 |
217 | $('#slider_example_5').datetimepicker({
218 | controlType: myControl
219 | });
220 | Alt field in the simplest form:
227 |
232 | $('#alt_example_1').datetimepicker({
233 | altField: "#alt_example_1_alt"
234 | });
235 |
236 | With datetime in both:
241 |
246 | $('#alt_example_2').datetimepicker({
247 | altField: "#alt_example_2_alt",
248 | altFieldTimeOnly: false
249 | });
250 |
251 | Format the altField differently:
256 |
261 | $('#alt_example_3').datetimepicker({
262 | altField: "#alt_example_3_alt",
263 | altFieldTimeOnly: false,
264 | altFormat: "yy-mm-dd",
265 | altTimeFormat: "h:m t",
266 | altSeparator: " @ "
267 | });
268 |
269 | With inline mode using altField:
274 |
279 | $('#alt_example_4').datetimepicker({
280 | altField: "#alt_example_4_alt",
281 | altFieldTimeOnly: false
282 | });
283 |
284 | Allows time displayed inside the picker to allow being typed in.
291 |
295 | $('#input_example_1').datetimepicker({
296 | timeInput: true,
297 | timeFormat: "hh:mm tt"
298 | });
299 |
300 | Don't show any sliders, only the time input.
305 |
309 | $('#input_example_2').datetimepicker({
310 | timeInput: true,
311 | timeFormat: "hh:mm tt",
312 | showHour: false,
313 | showMinute: false
314 | });
315 |
316 | Set the min/max hour of every date:
323 |
327 | $('#rest_example_1').timepicker({
328 | hourMin: 8,
329 | hourMax: 16
330 | });
331 |
332 | Set the min/max date numerically:
337 |
341 | $('#rest_example_2').datetimepicker({
342 | numberOfMonths: 2,
343 | minDate: 0,
344 | maxDate: 30
345 | });
346 |
347 | Set the min/max date and time with a Date object:
352 |
356 | $('#rest_example_3').datetimepicker({
357 | minDate: new Date(2010, 11, 20, 8, 30),
358 | maxDate: new Date(2010, 11, 31, 17, 30)
359 | });
360 |
361 | Restrict a start and end date by using onSelect and onClose events for more control over functionality:
369 |For more examples and advanced usage grab the Handling Time eBook.
370 |
375 | var startDateTextBox = $('#range_example_1_start');
376 | var endDateTextBox = $('#range_example_1_end');
377 |
378 | startDateTextBox.datetimepicker({
379 | timeFormat: 'HH:mm z',
380 | onClose: function(dateText, inst) {
381 | if (endDateTextBox.val() != '') {
382 | var testStartDate = startDateTextBox.datetimepicker('getDate');
383 | var testEndDate = endDateTextBox.datetimepicker('getDate');
384 | if (testStartDate > testEndDate)
385 | endDateTextBox.datetimepicker('setDate', testStartDate);
386 | }
387 | else {
388 | endDateTextBox.val(dateText);
389 | }
390 | },
391 | onSelect: function (selectedDateTime){
392 | endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
393 | }
394 | });
395 | endDateTextBox.datetimepicker({
396 | timeFormat: 'HH:mm z',
397 | onClose: function(dateText, inst) {
398 | if (startDateTextBox.val() != '') {
399 | var testStartDate = startDateTextBox.datetimepicker('getDate');
400 | var testEndDate = endDateTextBox.datetimepicker('getDate');
401 | if (testStartDate > testEndDate)
402 | startDateTextBox.datetimepicker('setDate', testEndDate);
403 | }
404 | else {
405 | startDateTextBox.val(dateText);
406 | }
407 | },
408 | onSelect: function (selectedDateTime){
409 | startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
410 | }
411 | });
412 |
413 | Timepicker also includes some shortcut methods for ranges:
418 |
423 | var startDateTextBox = $('#range_example_2_start');
424 | var endDateTextBox = $('#range_example_2_end');
425 |
426 | $.timepicker.datetimeRange(
427 | startDateTextBox,
428 | endDateTextBox,
429 | {
430 | minInterval: (1000*60*60), // 1hr
431 | dateFormat: 'dd M yy',
432 | timeFormat: 'HH:mm',
433 | start: {}, // start picker options
434 | end: {} // end picker options
435 | }
436 | );
437 |
438 | To use only times for a time range use $.timepicker.timeRange():
443 |
448 | var startTimeTextBox = $('#range_example_3_start');
449 | var endTimeTextBox = $('#range_example_3_end');
450 |
451 | $.timepicker.timeRange(
452 | startTimeTextBox,
453 | endTimeTextBox,
454 | {
455 | minInterval: (1000*60*60), // 1hr
456 | timeFormat: 'HH:mm',
457 | start: {}, // start picker options
458 | end: {} // end picker options
459 | }
460 | );
461 |
462 | Even though this plugin focuses on datetime, it also provides a dateRange function:
467 |
472 | var startDateTextBox = $('#range_example_4_start');
473 | var endDateTextBox = $('#range_example_4_end');
474 |
475 | $.timepicker.dateRange(
476 | startDateTextBox,
477 | endDateTextBox,
478 | {
479 | minInterval: (1000*60*60*24*4), // 4 days
480 | maxInterval: (1000*60*60*24*8), // 8 days
481 | start: {}, // start picker options
482 | end: {} // end picker options
483 | }
484 | );
485 |
486 | Get and Set Datetime with the getDate and setDate methods. This example uses timezone to demonstrate the timepicker regonizes the timezones and computes the offsets when getting and setting.
493 |
500 | var ex13 = $('#utility_example_1');
501 |
502 | ex13.datetimepicker({
503 | timeFormat: 'hh:mm tt z',
504 | separator: ' @ ',
505 | showTimezone: true
506 | });
507 |
508 | $('#utility_example_1_setdt').click(function(){
509 | ex13.datetimepicker('setDate', (new Date()) );
510 | });
511 |
512 | $('#utility_example_1_getdt').click(function(){
513 | alert(ex13.datetimepicker('getDate'));
514 | });
515 |
516 | Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)
521 |Returns a time string in the specified format.
527 |
532 | $('#utility_example_2').text(
533 | $.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
534 | );
535 |
536 | Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)
541 |Returns an object with hours, minutes, seconds, milliseconds, timezone.
547 |
552 | $('#utility_example_3').text(JSON.stringify(
553 | $.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
554 | ));
555 |
556 |