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