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