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