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             var oldMinute = parseInt(now.format('i'));
 287             var newMinute = Math.round(parseInt(now.format('i')) / this.minuteStep) * this.minuteStep;
 288             Roo.log(oldMinute);
 289             Roo.log(newMinute);
 290         }
 291         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
 292
 293         this.fill();
 294     },
 295
 296     fill: function()
 297     {
 298         var hours = this.time.getHours();
 299         var minutes = this.time.getMinutes();
 300         var period = 'AM';
 301
 302         if(hours > 11){
 303             period = 'PM';
 304         }
 305
 306         if(hours == 0){
 307             hours = 12;
 308         }
 309
 310
 311         if(hours > 12){
 312             hours = hours - 12;
 313         }
 314
 315         if(hours < 10){
 316             hours = '0' + hours;
 317         }
 318
 319         if(minutes < 10){
 320             minutes = '0' + minutes;
 321         }
 322
 323         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
 324         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
 325         this.pop.select('button', true).first().dom.innerHTML = period;
 326
 327     },
 328
 329     place: function()
 330     {
 331         this.picker().removeClass(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
 332
 333         var cls = ['bottom'];
 334
 335         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){ // top
 336             cls.pop();
 337             cls.push('top');
 338         }
 339
 340         cls.push('right');
 341
 342         if((Roo.lib.Dom.getViewWidth() + Roo.get(document.body).getScroll().left) - (this.inputEl().getLeft() + this.picker().getWidth()) < 0){ // left
 343             cls.pop();
 344             cls.push('left');
 345         }
 346         //this.picker().setXY(20000,20000);
 347         this.picker().addClass(cls.join('-'));
 348
 349         var _this = this;
 350
 351         Roo.each(cls, function(c){
 352             if(c == 'bottom'){
 353                 (function() {
 354                  //
 355                 }).defer(200);
 356                  _this.picker().alignTo(_this.inputEl(),   "tr-br", [0, 10], false);
 357                 //_this.picker().setTop(_this.inputEl().getHeight());
 358                 return;
 359             }
 360             if(c == 'top'){
 361                  _this.picker().alignTo(_this.inputEl(),   "br-tr", [0, 10], false);
 362
 363                 //_this.picker().setTop(0 - _this.picker().getHeight());
 364                 return;
 365             }
 366             /*
 367             if(c == 'left'){
 368                 _this.picker().setLeft(_this.inputEl().getLeft() + _this.inputEl().getWidth() - _this.el.getLeft() - _this.picker().getWidth());
 369                 return;
 370             }
 371             if(c == 'right'){
 372                 _this.picker().setLeft(_this.inputEl().getLeft() - _this.el.getLeft());
 373                 return;
 374             }
 375             */
 376         });
 377
 378     },
 379
 380     onFocus : function()
 381     {
 382         Roo.bootstrap.form.TimeField.superclass.onFocus.call(this);
 383         this.show();
 384     },
 385
 386     onBlur : function()
 387     {
 388         Roo.bootstrap.form.TimeField.superclass.onBlur.call(this);
 389         this.hide();
 390     },
 391
 392     show : function()
 393     {
 394         this.picker().show();
 395         this.pop.show();
 396         this.update();
 397         this.place();
 398
 399         this.fireEvent('show', this, this.date);
 400     },
 401
 402     hide : function()
 403     {
 404         this.picker().hide();
 405         this.pop.hide();
 406
 407         this.fireEvent('hide', this, this.date);
 408     },
 409
 410     setTime : function()
 411     {
 412         this.hide();
 413         this.setValue(this.time.format(this.format));
 414
 415         this.fireEvent('select', this, this.date);
 416
 417
 418     },
 419
 420     onMousedown: function(e){
 421         e.stopPropagation();
 422         e.preventDefault();
 423     },
 424
 425     onIncrementHours: function()
 426     {
 427         Roo.log('onIncrementHours');
 428         this.time = this.time.add(Date.HOUR, 1);
 429         this.update();
 430
 431     },
 432
 433     onDecrementHours: function()
 434     {
 435         Roo.log('onDecrementHours');
 436         this.time = this.time.add(Date.HOUR, -1);
 437         this.update();
 438     },
 439
 440     onIncrementMinutes: function()
 441     {
 442         Roo.log('onIncrementMinutes');
 443         var minutesToAdd = Math.round((parseInt(this.time.format('i')) + this.minuteStep) / this.minuteStep) * this.minuteStep - parseInt(this.time.format('i'));
 444         this.time = this.time.add(Date.MINUTE, minutesToAdd);
 445         this.update();
 446     },
 447
 448     onDecrementMinutes: function()
 449     {
 450         Roo.log('onDecrementMinutes');
 451         var minutesToSubtract = parseInt(this.time.format('i')) - Math.round((parseInt(this.time.format('i')) - this.minuteStep) / this.minuteStep) * this.minuteStep;
 452         this.time = this.time.add(Date.MINUTE, -1 * minutesToSubtract);
 453         this.update();
 454     },
 455
 456     onTogglePeriod: function()
 457     {
 458         Roo.log('onTogglePeriod');
 459         this.time = this.time.add(Date.HOUR, 12);
 460         this.update();
 461     }
 462
 463
 464 });
 465
 466
 467 Roo.apply(Roo.bootstrap.form.TimeField,  {
 468
 469     template : {
 470         tag: 'div',
 471         cls: 'datepicker dropdown-menu',
 472         cn: [
 473             {
 474                 tag: 'div',
 475                 cls: 'datepicker-time',
 476                 cn: [
 477                 {
 478                     tag: 'table',
 479                     cls: 'table-condensed',
 480                     cn:[
 481                         {
 482                             tag: 'tbody',
 483                             cn: [
 484                                 {
 485                                     tag: 'tr',
 486                                     cn: [
 487                                     {
 488                                         tag: 'td',
 489                                         colspan: '7'
 490                                     }
 491                                     ]
 492                                 }
 493                             ]
 494                         },
 495                         {
 496                             tag: 'tfoot',
 497                             cn: [
 498                                 {
 499                                     tag: 'tr',
 500                                     cn: [
 501                                     {
 502                                         tag: 'th',
 503                                         colspan: '7',
 504                                         cls: '',
 505                                         cn: [
 506                                             {
 507                                                 tag: 'button',
 508                                                 cls: 'btn btn-info ok',
 509                                                 html: 'OK'
 510                                             }
 511                                         ]
 512                                     }
 513
 514                                     ]
 515                                 }
 516                             ]
 517                         }
 518                     ]
 519                 }
 520                 ]
 521             }
 522         ]
 523     }
 524 });
 525
 526
 527
 528