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