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