git.roojs.org Git - roojs1/blob - Roo/bootstrap/form/TimeField.js

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