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