git.roojs.org Git - roojs1/blob - Roo/bootstrap/TimeField.js

   1 /*
   2  * - LGPL
   3  *
   4  * TimeField
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TimeField
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap DateField class
  12  *
  13  *
  14  * @constructor
  15  * Create a new TimeField
  16  * @param {Object} config The config object
  17  */
  18
  19 Roo.bootstrap.TimeField = function(config){
  20     Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
  21     this.addEvents({
  22             /**
  23              * @event show
  24              * Fires when this field show.
  25              * @param {Roo.bootstrap.DateField} thisthis
  26              * @param {Mixed} date The date value
  27              */
  28             show : true,
  29             /**
  30              * @event show
  31              * Fires when this field hide.
  32              * @param {Roo.bootstrap.DateField} this
  33              * @param {Mixed} date The date value
  34              */
  35             hide : true,
  36             /**
  37              * @event select
  38              * Fires when select a date.
  39              * @param {Roo.bootstrap.DateField} this
  40              * @param {Mixed} date The date value
  41              */
  42             select : true
  43         });
  44 };
  45
  46 Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
  47
  48     /**
  49      * @cfg {String} format
  50      * The default time format string which can be overriden for localization support.  The format must be
  51      * valid according to {@link Date#parseDate} (defaults to 'H:i').
  52      */
  53     format : "H:i",
  54
  55     onRender: function(ct, position)
  56     {
  57
  58         Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
  59
  60         this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.TimeField.template);
  61
  62         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
  63
  64         this.pop = this.picker().select('>.datepicker-time',true).first();
  65         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
  66
  67         this.picker().on('mousedown', this.onMousedown, this);
  68         this.picker().on('click', this.onClick, this);
  69
  70         this.picker().addClass('datepicker-dropdown');
  71
  72         this.fillTime();
  73         this.update();
  74
  75         this.pop.select('span.hours-up', true).first().on('click', this.onIncrementHours, this);
  76         this.pop.select('span.hours-down', true).first().on('click', this.onDecrementHours, this);
  77         this.pop.select('span.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
  78         this.pop.select('span.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
  79         this.pop.select('button.period', true).first().on('click', this.onTogglePeriod, this);
  80         this.pop.select('button.ok', true).first().on('click', this.setTime, this);
  81
  82     },
  83
  84     fireKey: function(e){
  85         if (!this.picker().isVisible()){
  86             if (e.keyCode == 27) { // allow escape to hide and re-show picker
  87                 this.show();
  88             }
  89             return;
  90         }
  91
  92         e.preventDefault();
  93
  94         switch(e.keyCode){
  95             case 27: // escape
  96                 this.hide();
  97                 break;
  98             case 37: // left
  99             case 39: // right
 100                 this.onTogglePeriod();
 101                 break;
 102             case 38: // up
 103                 this.onIncrementMinutes();
 104                 break;
 105             case 40: // down
 106                 this.onDecrementMinutes();
 107                 break;
 108             case 13: // enter
 109             case 9: // tab
 110                 this.setTime();
 111                 break;
 112         }
 113     },
 114
 115     onClick: function(e) {
 116         e.stopPropagation();
 117         e.preventDefault();
 118     },
 119
 120     picker : function()
 121     {
 122         return this.el.select('.datepicker', true).first();
 123     },
 124
 125     fillTime: function()
 126     {
 127         var time = this.pop.select('tbody', true).first();
 128
 129         time.dom.innerHTML = '';
 130
 131         time.createChild({
 132             tag: 'tr',
 133             cn: [
 134                 {
 135                     tag: 'td',
 136                     cn: [
 137                         {
 138                             tag: 'a',
 139                             href: '#',
 140                             cls: 'btn',
 141                             cn: [
 142                                 {
 143                                     tag: 'span',
 144                                     cls: 'hours-up glyphicon glyphicon-chevron-up'
 145                                 }
 146                             ]
 147                         }
 148                     ]
 149                 },
 150                 {
 151                     tag: 'td',
 152                     cls: 'separator'
 153                 },
 154                 {
 155                     tag: 'td',
 156                     cn: [
 157                         {
 158                             tag: 'a',
 159                             href: '#',
 160                             cls: 'btn',
 161                             cn: [
 162                                 {
 163                                     tag: 'span',
 164                                     cls: 'minutes-up glyphicon glyphicon-chevron-up'
 165                                 }
 166                             ]
 167                         }
 168                     ]
 169                 },
 170                 {
 171                     tag: 'td',
 172                     cls: 'separator'
 173                 }
 174             ]
 175         });
 176
 177         time.createChild({
 178             tag: 'tr',
 179             cn: [
 180                 {
 181                     tag: 'td',
 182                     cn: [
 183                         {
 184                             tag: 'span',
 185                             cls: 'timepicker-hour',
 186                             html: '00'
 187                         }
 188                     ]
 189                 },
 190                 {
 191                     tag: 'td',
 192                     cls: 'separator',
 193                     html: ':'
 194                 },
 195                 {
 196                     tag: 'td',
 197                     cn: [
 198                         {
 199                             tag: 'span',
 200                             cls: 'timepicker-minute',
 201                             html: '00'
 202                         }
 203                     ]
 204                 },
 205                 {
 206                     tag: 'td',
 207                     cls: 'separator'
 208                 },
 209                 {
 210                     tag: 'td',
 211                     cn: [
 212                         {
 213                             tag: 'button',
 214                             type: 'button',
 215                             cls: 'btn btn-primary period',
 216                             html: 'AM'
 217
 218                         }
 219                     ]
 220                 }
 221             ]
 222         });
 223
 224         time.createChild({
 225             tag: 'tr',
 226             cn: [
 227                 {
 228                     tag: 'td',
 229                     cn: [
 230                         {
 231                             tag: 'a',
 232                             href: '#',
 233                             cls: 'btn',
 234                             cn: [
 235                                 {
 236                                     tag: 'span',
 237                                     cls: 'hours-down glyphicon glyphicon-chevron-down'
 238                                 }
 239                             ]
 240                         }
 241                     ]
 242                 },
 243                 {
 244                     tag: 'td',
 245                     cls: 'separator'
 246                 },
 247                 {
 248                     tag: 'td',
 249                     cn: [
 250                         {
 251                             tag: 'a',
 252                             href: '#',
 253                             cls: 'btn',
 254                             cn: [
 255                                 {
 256                                     tag: 'span',
 257                                     cls: 'minutes-down glyphicon glyphicon-chevron-down'
 258                                 }
 259                             ]
 260                         }
 261                     ]
 262                 },
 263                 {
 264                     tag: 'td',
 265                     cls: 'separator'
 266                 }
 267             ]
 268         });
 269
 270     },
 271
 272     update: function()
 273     {
 274
 275         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
 276
 277         this.fill();
 278     },
 279
 280     fill: function()
 281     {
 282         var hours = this.time.getHours();
 283         var minutes = this.time.getMinutes();
 284         var period = 'AM';
 285
 286         if(hours > 11){
 287             period = 'PM';
 288         }
 289
 290         if(hours == 0){
 291             hours = 12;
 292         }
 293
 294
 295         if(hours > 12){
 296             hours = hours - 12;
 297         }
 298
 299         if(hours < 10){
 300             hours = '0' + hours;
 301         }
 302
 303         if(minutes < 10){
 304             minutes = '0' + minutes;
 305         }
 306
 307         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
 308         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
 309         this.pop.select('button', true).first().dom.innerHTML = period;
 310
 311     },
 312
 313     place: function()
 314     {
 315         this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
 316
 317         var cls = ['bottom'];
 318
 319         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
 320             cls.pop();
 321             cls.push('top');
 322         }
 323
 324         cls.push('right');
 325
 326         if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
 327             cls.pop();
 328             cls.push('left');
 329         }
 330
 331         this.picker().addClass(cls.join('-'));
 332
 333         var _this = this;
 334
 335         Roo.each(cls, function(c){
 336             if(c == 'bottom'){
 337                 _this.picker().setTop(_this.inputEl().getHeight());
 338                 return;
 339             }
 340             if(c == 'top'){
 341                 _this.picker().setTop(0 - _this.picker().getHeight());
 342                 return;
 343             }
 344
 345             if(c == 'left'){
 346                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
 347                 return;
 348             }
 349             if(c == 'right'){
 350                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
 351                 return;
 352             }
 353         });
 354
 355     },
 356
 357     onFocus : function()
 358     {
 359         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
 360         this.show();
 361     },
 362
 363     onBlur : function()
 364     {
 365         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
 366         this.hide();
 367     },
 368
 369     show : function()
 370     {
 371         this.picker().show();
 372         this.pop.show();
 373         this.update();
 374         this.place();
 375
 376         this.fireEvent('show', this, this.date);
 377     },
 378
 379     hide : function()
 380     {
 381         this.picker().hide();
 382         this.pop.hide();
 383
 384         this.fireEvent('hide', this, this.date);
 385     },
 386
 387     setTime : function()
 388     {
 389         this.hide();
 390         this.setValue(this.time.format(this.format));
 391
 392         this.fireEvent('select', this, this.date);
 393
 394
 395     },
 396
 397     onMousedown: function(e){
 398         e.stopPropagation();
 399         e.preventDefault();
 400     },
 401
 402     onIncrementHours: function()
 403     {
 404         Roo.log('onIncrementHours');
 405         this.time = this.time.add(Date.HOUR, 1);
 406         this.update();
 407
 408     },
 409
 410     onDecrementHours: function()
 411     {
 412         Roo.log('onDecrementHours');
 413         this.time = this.time.add(Date.HOUR, -1);
 414         this.update();
 415     },
 416
 417     onIncrementMinutes: function()
 418     {
 419         Roo.log('onIncrementMinutes');
 420         this.time = this.time.add(Date.MINUTE, 1);
 421         this.update();
 422     },
 423
 424     onDecrementMinutes: function()
 425     {
 426         Roo.log('onDecrementMinutes');
 427         this.time = this.time.add(Date.MINUTE, -1);
 428         this.update();
 429     },
 430
 431     onTogglePeriod: function()
 432     {
 433         Roo.log('onTogglePeriod');
 434         this.time = this.time.add(Date.HOUR, 12);
 435         this.update();
 436     }
 437
 438
 439 });
 440
 441 Roo.apply(Roo.bootstrap.TimeField,  {
 442
 443     content : {
 444         tag: 'tbody',
 445         cn: [
 446             {
 447                 tag: 'tr',
 448                 cn: [
 449                 {
 450                     tag: 'td',
 451                     colspan: '7'
 452                 }
 453                 ]
 454             }
 455         ]
 456     },
 457
 458     footer : {
 459         tag: 'tfoot',
 460         cn: [
 461             {
 462                 tag: 'tr',
 463                 cn: [
 464                 {
 465                     tag: 'th',
 466                     colspan: '7',
 467                     cls: '',
 468                     cn: [
 469                         {
 470                             tag: 'button',
 471                             cls: 'btn btn-info ok',
 472                             html: 'OK'
 473                         }
 474                     ]
 475                 }
 476
 477                 ]
 478             }
 479         ]
 480     }
 481 });
 482
 483 Roo.apply(Roo.bootstrap.TimeField,  {
 484
 485     template : {
 486         tag: 'div',
 487         cls: 'datepicker dropdown-menu',
 488         cn: [
 489             {
 490                 tag: 'div',
 491                 cls: 'datepicker-time',
 492                 cn: [
 493                 {
 494                     tag: 'table',
 495                     cls: 'table-condensed',
 496                     cn:[
 497                     Roo.bootstrap.TimeField.content,
 498                     Roo.bootstrap.TimeField.footer
 499                     ]
 500                 }
 501                 ]
 502             }
 503         ]
 504     }
 505 });
 506
 507
 508
 509