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