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         return 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.pickerEl = Roo.get(document.body).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('.hours-up', true).first().on('click', this.onIncrementHours, this);
  83         this.pop.select('.hours-down', true).first().on('click', this.onDecrementHours, this);
  84         this.pop.select('.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
  85         this.pop.select('.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.pickerEl;
 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: 'i',
 151                                     cls: 'hours-up fa fas fa-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: 'i',
 171                                     cls: 'minutes-up fa fas fa-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 fa fas fa-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 fa fas fa-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         //this.picker().setXY(20000,20000);
 338         this.picker().addClass(cls.join('-'));
 339
 340         var _this = this;
 341
 342         Roo.each(cls, function(c){
 343             if(c == 'bottom'){
 344                 (function() {
 345                  //
 346                 }).defer(200);
 347                  _this.picker().alignTo(_this.inputEl(),   "tr-br", [0, 10], false);
 348                 //_this.picker().setTop(_this.inputEl().getHeight());
 349                 return;
 350             }
 351             if(c == 'top'){
 352                  _this.picker().alignTo(_this.inputEl(),   "br-tr", [0, 10], false);
 353
 354                 //_this.picker().setTop(0 - _this.picker().getHeight());
 355                 return;
 356             }
 357             /*
 358             if(c == 'left'){
 359                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
 360                 return;
 361             }
 362             if(c == 'right'){
 363                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
 364                 return;
 365             }
 366             */
 367         });
 368
 369     },
 370
 371     onFocus : function()
 372     {
 373         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
 374         this.show();
 375     },
 376
 377     onBlur : function()
 378     {
 379         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
 380         this.hide();
 381     },
 382
 383     show : function()
 384     {
 385         this.picker().show();
 386         this.pop.show();
 387         this.update();
 388         this.place();
 389
 390         this.fireEvent('show', this, this.date);
 391     },
 392
 393     hide : function()
 394     {
 395         this.picker().hide();
 396         this.pop.hide();
 397
 398         this.fireEvent('hide', this, this.date);
 399     },
 400
 401     setTime : function()
 402     {
 403         this.hide();
 404         this.setValue(this.time.format(this.format));
 405
 406         this.fireEvent('select', this, this.date);
 407
 408
 409     },
 410
 411     onMousedown: function(e){
 412         e.stopPropagation();
 413         e.preventDefault();
 414     },
 415
 416     onIncrementHours: function()
 417     {
 418         Roo.log('onIncrementHours');
 419         this.time = this.time.add(Date.HOUR, 1);
 420         this.update();
 421
 422     },
 423
 424     onDecrementHours: function()
 425     {
 426         Roo.log('onDecrementHours');
 427         this.time = this.time.add(Date.HOUR, -1);
 428         this.update();
 429     },
 430
 431     onIncrementMinutes: function()
 432     {
 433         Roo.log('onIncrementMinutes');
 434         this.time = this.time.add(Date.MINUTE, 1);
 435         this.update();
 436     },
 437
 438     onDecrementMinutes: function()
 439     {
 440         Roo.log('onDecrementMinutes');
 441         this.time = this.time.add(Date.MINUTE, -1);
 442         this.update();
 443     },
 444
 445     onTogglePeriod: function()
 446     {
 447         Roo.log('onTogglePeriod');
 448         this.time = this.time.add(Date.HOUR, 12);
 449         this.update();
 450     }
 451
 452
 453 });
 454
 455
 456 Roo.apply(Roo.bootstrap.TimeField,  {
 457
 458     template : {
 459         tag: 'div',
 460         cls: 'datepicker dropdown-menu',
 461         cn: [
 462             {
 463                 tag: 'div',
 464                 cls: 'datepicker-time',
 465                 cn: [
 466                 {
 467                     tag: 'table',
 468                     cls: 'table-condensed',
 469                     cn:[
 470                         {
 471                             tag: 'tbody',
 472                             cn: [
 473                                 {
 474                                     tag: 'tr',
 475                                     cn: [
 476                                     {
 477                                         tag: 'td',
 478                                         colspan: '7'
 479                                     }
 480                                     ]
 481                                 }
 482                             ]
 483                         },
 484                         {
 485                             tag: 'tfoot',
 486                             cn: [
 487                                 {
 488                                     tag: 'tr',
 489                                     cn: [
 490                                     {
 491                                         tag: 'th',
 492                                         colspan: '7',
 493                                         cls: '',
 494                                         cn: [
 495                                             {
 496                                                 tag: 'button',
 497                                                 cls: 'btn btn-info ok',
 498                                                 html: 'OK'
 499                                             }
 500                                         ]
 501                                     }
 502
 503                                     ]
 504                                 }
 505                             ]
 506                         }
 507                     ]
 508                 }
 509                 ]
 510             }
 511         ]
 512     }
 513 });
 514
 515
 516
 517