js/jquery/timepicker.js

   1 /*!
   2  * jQuery UI Timepicker 0.2.1
   3  *
   4  * Copyright (c) 2009 Martin Milesich (http://milesich.com/)
   5  *
   6  * Some parts are
   7  *   Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
   8  *
   9  * $Id: timepicker.js 28 2009-08-11 20:31:23Z majlo $
  10  *
  11  * Depends:
  12  *  ui.core.js
  13  *  ui.datepicker.js
  14  *  ui.slider.js
  15  */
  16 (function($) {
  17
  18 /**
  19  * Extending default values
  20  */
  21 $.extend($.datepicker._defaults, {
  22                  'dateFormat': 'yy-mm-dd',
  23                  'changeMonth': true,
  24                 'changeYear': true,
  25     'stepSeconds': 1, // Number of seconds to step up/down
  26     'stepMinutes': 1, // Number of minutes to step up/down
  27     'stepHours': 1, // Number of hours to step up/down
  28     'time24h': false, // True if 24h time
  29     'showTime': false, // Show timepicker with datepicker
  30     'altTimeField': '', // Selector for an alternate field to store time into
  31     'hourText': 'Hour',
  32     'minuteText': 'Minute',
  33     'secondText': 'Second'
  34 });
  35 $.extend($.datepicker.regional[''], {
  36     'hourText': 'Hour',
  37     'minuteText': 'Minute',
  38     'secondText': 'Second'
  39 });
  40
  41 /**
  42  * _hideDatepicker must be called with null
  43  */
  44 $.datepicker._connectDatepickerOverride = $.datepicker._connectDatepicker;
  45 $.datepicker._connectDatepicker = function(target, inst) {
  46     $.datepicker._connectDatepickerOverride(target, inst);
  47
  48     // showButtonPanel is required with timepicker
  49     if (this._get(inst, 'showTime')) {
  50         inst.settings['showButtonPanel'] = true;
  51     }
  52
  53     var showOn = this._get(inst, 'showOn');
  54
  55     if (showOn == 'button' || showOn == 'both') {
  56         // Unbind all click events
  57         inst.trigger.unbind('click');
  58
  59         // Bind new click event
  60         inst.trigger.click(function() {
  61             if ($.datepicker._datepickerShowing && $.datepicker._lastInput == target)
  62                 $.datepicker._hideDatepicker(null); // This override is all about the "null"
  63             else
  64                 $.datepicker._showDatepicker(target);
  65             return false;
  66         });
  67     }
  68 };
  69
  70 /**
  71  * Datepicker does not have an onShow event so I need to create it.
  72  * What I actually doing here is copying original _showDatepicker
  73  * method to _showDatepickerOverload method.
  74  */
  75 $.datepicker._showDatepickerOverride = $.datepicker._showDatepicker;
  76 $.datepicker._showDatepicker = function (input) {
  77     // Call the original method which will show the datepicker
  78     $.datepicker._showDatepickerOverride(input);
  79
  80     input = input.target || input;
  81
  82     // find from button/image trigger
  83     if (input.nodeName.toLowerCase() != 'input') input = $('input', input.parentNode)[0];
  84
  85     // Do not show timepicker if datepicker is disabled
  86     if ($.datepicker._isDisabledDatepicker(input)) return;
  87
  88     // Get instance to datepicker
  89     var inst = $.datepicker._getInst(input);
  90
  91     var showTime = $.datepicker._get(inst, 'showTime');
  92
  93     // If showTime = True show the timepicker
  94     if (showTime) $.timepicker.show(input);
  95 };
  96
  97 /**
  98  * Same as above. Here I need to extend the _checkExternalClick method
  99  * because I don't want to close the datepicker when the sliders get focus.
 100  */
 101 $.datepicker._checkExternalClickOverride = $.datepicker._checkExternalClick;
 102 $.datepicker._checkExternalClick = function (event) {
 103     if (!$.datepicker._curInst) return;
 104     var $target = $(event.target);
 105
 106     if (($target.parents('#' + $.timepicker._mainDivId).length == 0)) {
 107         $.datepicker._checkExternalClickOverride(event);
 108     }
 109 };
 110
 111 /**
 112  * Datepicker has onHide event but I just want to make it simple for you
 113  * so I hide the timepicker when datepicker hides.
 114  */
 115 $.datepicker._hideDatepickerOverride = $.datepicker._hideDatepicker;
 116 $.datepicker._hideDatepicker = function(input, duration) {
 117     // Some lines from the original method
 118     var inst = this._curInst;
 119
 120     if (!inst || (input && inst != $.data(input, PROP_NAME))) return;
 121
 122     // Get the value of showTime property
 123     var showTime = this._get(inst, 'showTime');
 124
 125     if (input === undefined && showTime) {
 126         if (inst.input) {
 127             inst.input.val(this._formatDate(inst));
 128             inst.input.trigger('change'); // fire the change event
 129         }
 130
 131         this._updateAlternate(inst);
 132
 133         if (showTime) $.timepicker.update(this._formatDate(inst));
 134     }
 135
 136     // Hide datepicker
 137     $.datepicker._hideDatepickerOverride(input, duration);
 138
 139     // Hide the timepicker if enabled
 140     if (showTime) {
 141         $.timepicker.hide();
 142     }
 143 };
 144
 145 /**
 146  * This is a complete replacement of the _selectDate method.
 147  * If showed with timepicker do not close when date is selected.
 148  */
 149 $.datepicker._selectDate = function(id, dateStr) {
 150     var target = $(id);
 151     var inst = this._getInst(target[0]);
 152     var showTime = this._get(inst, 'showTime');
 153     dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
 154     if (!showTime) {
 155         if (inst.input)
 156             inst.input.val(dateStr);
 157         this._updateAlternate(inst);
 158     }
 159     var onSelect = this._get(inst, 'onSelect');
 160     if (onSelect)
 161         onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
 162     else if (inst.input && !showTime)
 163         inst.input.trigger('change'); // fire the change event
 164     if (inst.inline)
 165         this._updateDatepicker(inst);
 166     else if (!inst.stayOpen) {
 167         if (showTime) {
 168             this._updateDatepicker(inst);
 169         } else {
 170             this._hideDatepicker(null, this._get(inst, 'duration'));
 171             this._lastInput = inst.input[0];
 172             if (typeof(inst.input[0]) != 'object')
 173                 inst.input[0].focus(); // restore focus
 174             this._lastInput = null;
 175         }
 176     }
 177 };
 178
 179 /**
 180  * We need to resize the timepicker when the datepicker has been changed.
 181  */
 182 $.datepicker._updateDatepickerOverride = $.datepicker._updateDatepicker;
 183 $.datepicker._updateDatepicker = function(inst) {
 184     $.datepicker._updateDatepickerOverride(inst);
 185     $.timepicker.resize();
 186 };
 187
 188 function Timepicker() {}
 189
 190 Timepicker.prototype = {
 191     init: function()
 192     {
 193         this._mainDivId = 'ui-timepicker-div';
 194         this._inputId   = null;
 195         this._orgValue  = null;
 196         this._orgHour   = null;
 197         this._orgMinute = null;
 198         this._orgSecond = null;
 199         this._colonPos  = -1;
 200         this._scolonPos  = -1;
 201         this._visible   = false;
 202         this.tpDiv      = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" style="width: 170px; display: none; position: absolute;"></div>');
 203         this._generateHtml();
 204     },
 205
 206     show: function (input)
 207     {
 208         // Get instance to datepicker
 209         var inst = $.datepicker._getInst(input);
 210
 211         this._time24h = $.datepicker._get(inst, 'time24h');
 212         this._altTimeField = $.datepicker._get(inst, 'altTimeField');
 213
 214         var stepSeconds = parseInt($.datepicker._get(inst, 'stepSeconds'), 10) || 1;
 215         var stepMinutes = parseInt($.datepicker._get(inst, 'stepMinutes'), 10) || 1;
 216         var stepHours   = parseInt($.datepicker._get(inst, 'stepHours'), 10)   || 1;
 217
 218         if (60 % stepSeconds != 0) { stepSeconds = 1; }
 219         if (60 % stepMinutes != 0) { stepMinutes = 1; }
 220         if (24 % stepHours != 0)   { stepHours   = 1; }
 221
 222         $('#hourSlider').slider('option', 'max', 24 - stepHours);
 223         $('#hourSlider').slider('option', 'step', stepHours);
 224
 225         $('#minuteSlider').slider('option', 'max', 60 - stepMinutes);
 226         $('#minuteSlider').slider('option', 'step', stepMinutes);
 227
 228         $('#secondSlider').slider('option', 'max', 60 - stepSeconds);
 229         $('#secondSlider').slider('option', 'step', stepSeconds);
 230
 231         $('.hour_text').html($.datepicker._get(inst, 'hourText'));
 232         $('.minute_text').html($.datepicker._get(inst, 'minuteText'));
 233         $('.second_text').html($.datepicker._get(inst, 'secondText'));
 234
 235         this._inputId = input.id;
 236
 237         if (!this._visible) {
 238             this._parseTime();
 239             this._orgValue = $('#' + this._inputId).val();
 240         }
 241
 242         this.resize();
 243
 244         $('#' + this._mainDivId).show();
 245
 246         this._visible = true;
 247
 248         var dpDiv     = $('#' + $.datepicker._mainDivId);
 249         var dpDivPos  = dpDiv.position();
 250
 251         var viewWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + $(document).scrollLeft();
 252         var tpRight   = this.tpDiv.offset().left + this.tpDiv.outerWidth();
 253
 254         if (tpRight > viewWidth) {
 255             dpDiv.css('left', dpDivPos.left - (tpRight - viewWidth) - 5);
 256             this.tpDiv.css('left', dpDiv.offset().left + dpDiv.outerWidth() + 'px');
 257         }
 258     },
 259
 260     update: function (fd)
 261     {
 262         var curTime = $('#' + this._mainDivId + ' span.fragHours').text()
 263                     + ':'
 264                     + $('#' + this._mainDivId + ' span.fragMinutes').text()
 265                     + ':'
 266                     + $('#' + this._mainDivId + ' span.fragSeconds').text()
 267                     ;
 268
 269         if (!this._time24h) {
 270             curTime += ' ' + $('#' + this._mainDivId + ' span.fragAmpm').text();
 271         }
 272
 273         var curDate = $('#' + this._inputId).val();
 274
 275         $('#' + this._inputId).val(fd + ' ' + curTime);
 276
 277         if (this._altTimeField) {
 278             $(this._altTimeField).each(function() { $(this).val(curTime); });
 279         }
 280     },
 281
 282     hide: function ()
 283     {
 284         this._visible = false;
 285         $('#' + this._mainDivId).hide();
 286     },
 287
 288     resize: function ()
 289     {
 290         var dpDiv = $('#' + $.datepicker._mainDivId);
 291         var dpDivPos = dpDiv.position();
 292
 293         var hdrHeight = $('#' + $.datepicker._mainDivId +  ' > div.ui-datepicker-header:first-child').height();
 294
 295         $('#' + this._mainDivId + ' > div.ui-datepicker-header:first-child').css('height', hdrHeight);
 296
 297         this.tpDiv.css({
 298             'height': dpDiv.height(),
 299             'top'   : dpDivPos.top,
 300             'left'  : dpDivPos.left + dpDiv.outerWidth() + 'px'
 301         });
 302
 303         $('#hourSlider').css('height',   this.tpDiv.height() - (3.5 * hdrHeight));
 304         $('#minuteSlider').css('height', this.tpDiv.height() - (3.5 * hdrHeight));
 305         $('#secondSlider').css('height', this.tpDiv.height() - (3.5 * hdrHeight));
 306     },
 307
 308     _generateHtml: function ()
 309     {
 310         var html = '';
 311
 312         html += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">';
 313         html += '<div class="ui-datepicker-title" style="margin:0">';
 314         html += '<span class="fragHours">08</span><span class="delim">:</span><span class="fragMinutes">45</span>:</span><span class="fragSeconds">45</span> <span class="fragAmpm"></span></div></div><table>';
 315         html += '<tr><th>';
 316         html += '<span class="hour_text">Hour</span>';
 317         html += '</th><th>';
 318         html += '<span class="minute_text">Minute</span>';
 319         html += '</th><th>';
 320         html += '<span class="second_text">Second</span>';
 321         html += '</th></tr>';
 322         html += '<tr><td align="center"><div id="hourSlider" class="slider"></div></td><td align="center"><div id="minuteSlider" class="slider"></div></td><td align="center"><div id="secondSlider" class="slider"></div></td></tr>';
 323         html += '</table>';
 324
 325         this.tpDiv.empty().append(html);
 326         $('body').append(this.tpDiv);
 327
 328         var self = this;
 329
 330         $('#hourSlider').slider({
 331             orientation: "vertical",
 332             range: 'min',
 333             min: 0,
 334             max: 23,
 335             step: 1,
 336             slide: function(event, ui) {
 337                 self._writeTime('hour', ui.value);
 338             },
 339             stop: function(event, ui) {
 340                 $('#' + self._inputId).focus();
 341             }
 342         });
 343
 344         $('#minuteSlider').slider({
 345             orientation: "vertical",
 346             range: 'min',
 347             min: 0,
 348             max: 59,
 349             step: 1,
 350             slide: function(event, ui) {
 351                 self._writeTime('minute', ui.value);
 352             },
 353             stop: function(event, ui) {
 354                 $('#' + self._inputId).focus();
 355             }
 356         });
 357
 358         $('#secondSlider').slider({
 359             orientation: "vertical",
 360             range: 'min',
 361             min: 0,
 362             max: 59,
 363             step: 1,
 364             slide: function(event, ui) {
 365                 self._writeTime('second', ui.value);
 366             },
 367             stop: function(event, ui) {
 368                 $('#' + self._inputId).focus();
 369             }
 370         });
 371
 372         $('#hourSlider > a').css('padding', 0);
 373         $('#minuteSlider > a').css('padding', 0);
 374         $('#secondSlider > a').css('padding', 0);
 375     },
 376
 377     _writeTime: function (type, value)
 378     {
 379         if (type == 'hour') {
 380             if (!this._time24h) {
 381                 if (value < 12) {
 382                     $('#' + this._mainDivId + ' span.fragAmpm').text('am');
 383                 } else {
 384                     $('#' + this._mainDivId + ' span.fragAmpm').text('pm');
 385                     value -= 12;
 386                 }
 387
 388                 if (value == 0) value = 12;
 389             } else {
 390                 $('#' + this._mainDivId + ' span.fragAmpm').text('');
 391             }
 392
 393             if (value < 10) value = '0' + value;
 394             $('#' + this._mainDivId + ' span.fragHours').text(value);
 395         }
 396
 397         if (type == 'minute') {
 398             if (value < 10) value = '0' + value;
 399             $('#' + this._mainDivId + ' span.fragMinutes').text(value);
 400         }
 401
 402         if (type == 'second') {
 403             if (value < 10) value = '0' + value;
 404             $('#' + this._mainDivId + ' span.fragSeconds').text(value);
 405         }
 406     },
 407
 408     _parseTime: function ()
 409     {
 410         var dt = $('#' + this._inputId).val();
 411
 412         this._colonPos = dt.search(':');
 413
 414         var m = 0, h = 0, s = 0, a = '';
 415
 416         if (this._colonPos != -1) {
 417             this._scolonPos = dt.substring(this._colonPos + 1).search(':');
 418             h = parseInt(dt.substr(this._colonPos - 2, 2), 10);
 419             m = parseInt(dt.substr(this._colonPos + 1, 2), 10);
 420             if (this._scolonPos != -1) {
 421                 this._scolonPos += this._colonPos + 1;
 422                 s = parseInt(dt.substr(this._scolonPos + 1, 2), 10);
 423                 a = jQuery.trim(dt.substr(this._scolonPos + 3, 3));
 424             } else {
 425                 a = jQuery.trim(dt.substr(this._colonPos + 3, 3));
 426             }
 427         }
 428
 429         a = a.toLowerCase();
 430
 431         if (a != 'am' && a != 'pm') {
 432             a = '';
 433         }
 434
 435         if (h < 0) h = 0;
 436         if (m < 0) m = 0;
 437
 438         if (h > 23) h = 23;
 439         if (m > 59) m = 59;
 440
 441         if (a == 'pm' && h  < 12) h += 12;
 442         if (a == 'am' && h == 12) h  = 0;
 443
 444         this._setTime('hour',   h);
 445         this._setTime('minute', m);
 446         this._setTime('second', s);
 447
 448         this._orgHour   = h;
 449         this._orgMinute = m;
 450         this._orgSecond = s;
 451     },
 452
 453     _setTime: function (type, value)
 454     {
 455         if (isNaN(value)) value = 0;
 456         if (value < 0)    value = 0;
 457         if (value > 23 && type == 'hour')   value = 23;
 458         if (value > 59 && type == 'minute') value = 59;
 459         if (value > 59 && type == 'second') value = 59;
 460
 461         if (type == 'hour') {
 462             $('#hourSlider').slider('value', value);
 463         }
 464
 465         if (type == 'minute') {
 466             $('#minuteSlider').slider('value', value);
 467         }
 468
 469         if (type == 'second') {
 470             $('#secondSlider').slider('value', value);
 471         }
 472
 473         this._writeTime(type, value);
 474     }
 475 };
 476
 477 $.timepicker = new Timepicker();
 478 $('document').ready(function () {$.timepicker.init();});
 479
 480 })(jQuery);