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

   1 /*
   2  * - LGPL
   3  *
   4  * TimeField
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TimeField
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap DateField class
  12  *
  13  *
  14  * @constructor
  15  * Create a new TimeField
  16  * @param {Object} config The config object
  17  */
  18
  19 Roo.bootstrap.TimeField = function(config){
  20     Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
  21 };
  22
  23 Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
  24
  25     /**
  26      * @cfg {String} format
  27      * The default time format string which can be overriden for localization support.  The format must be
  28      * valid according to {@link Date#parseDate} (defaults to 'H:i').
  29      */
  30     format : "H:i",
  31
  32     onRender: function(ct, position)
  33     {
  34
  35         Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
  36
  37         this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.TimeField.template);
  38
  39         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
  40
  41         this.pop = this.picker().select('>.datepicker-time',true).first();
  42         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'
  43
  44         this.picker().on('mousedown', this.onMousedown, this);
  45
  46         this.picker().addClass('datepicker-dropdown');
  47
  48         this.fillTime();
  49         this.update();
  50
  51         this.pop.select('span.hours-up', true).first().on('click', this.onIncrementHours, this);
  52         this.pop.select('span.hours-down', true).first().on('click', this.onDecrementHours, this);
  53         this.pop.select('span.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
  54         this.pop.select('span.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
  55         this.pop.select('button', true).first().on('click', this.onTogglePeriod, this);
  56
  57     },
  58
  59     picker : function()
  60     {
  61         return this.el.select('.datepicker', true).first();
  62     },
  63
  64     fillTime: function()
  65     {
  66         var time = this.pop.select('tbody', true).first();
  67
  68         time.dom.innerHTML = '';
  69
  70         time.createChild({
  71             tag: 'tr',
  72             cn: [
  73                 {
  74                     tag: 'td',
  75                     cn: [
  76                         {
  77                             tag: 'a',
  78                             href: '#',
  79                             cls: 'btn',
  80                             cn: [
  81                                 {
  82                                     tag: 'span',
  83                                     cls: 'hours-up glyphicon glyphicon-chevron-up'
  84                                 }
  85                             ]
  86                         }
  87                     ]
  88                 },
  89                 {
  90                     tag: 'td',
  91                     cls: 'separator'
  92                 },
  93                 {
  94                     tag: 'td',
  95                     cn: [
  96                         {
  97                             tag: 'a',
  98                             href: '#',
  99                             cls: 'btn',
 100                             cn: [
 101                                 {
 102                                     tag: 'span',
 103                                     cls: 'minutes-up glyphicon glyphicon-chevron-up'
 104                                 }
 105                             ]
 106                         }
 107                     ]
 108                 },
 109                 {
 110                     tag: 'td',
 111                     cls: 'separator'
 112                 }
 113             ]
 114         });
 115
 116         time.createChild({
 117             tag: 'tr',
 118             cn: [
 119                 {
 120                     tag: 'td',
 121                     cn: [
 122                         {
 123                             tag: 'span',
 124                             cls: 'timepicker-hour',
 125                             html: '00'
 126                         }
 127                     ]
 128                 },
 129                 {
 130                     tag: 'td',
 131                     cls: 'separator',
 132                     html: ':'
 133                 },
 134                 {
 135                     tag: 'td',
 136                     cn: [
 137                         {
 138                             tag: 'span',
 139                             cls: 'timepicker-minute',
 140                             html: '00'
 141                         }
 142                     ]
 143                 },
 144                 {
 145                     tag: 'td',
 146                     cls: 'separator'
 147                 },
 148                 {
 149                     tag: 'td',
 150                     cn: [
 151                         {
 152                             tag: 'button',
 153                             type: 'button',
 154                             cls: 'btn btn-primary',
 155                             html: 'AM'
 156
 157                         }
 158                     ]
 159                 }
 160             ]
 161         });
 162
 163         time.createChild({
 164             tag: 'tr',
 165             cn: [
 166                 {
 167                     tag: 'td',
 168                     cn: [
 169                         {
 170                             tag: 'a',
 171                             href: '#',
 172                             cls: 'btn',
 173                             cn: [
 174                                 {
 175                                     tag: 'span',
 176                                     cls: 'hours-down glyphicon glyphicon-chevron-down'
 177                                 }
 178                             ]
 179                         }
 180                     ]
 181                 },
 182                 {
 183                     tag: 'td',
 184                     cls: 'separator'
 185                 },
 186                 {
 187                     tag: 'td',
 188                     cn: [
 189                         {
 190                             tag: 'a',
 191                             href: '#',
 192                             cls: 'btn',
 193                             cn: [
 194                                 {
 195                                     tag: 'span',
 196                                     cls: 'minutes-down glyphicon glyphicon-chevron-down'
 197                                 }
 198                             ]
 199                         }
 200                     ]
 201                 },
 202                 {
 203                     tag: 'td',
 204                     cls: 'separator'
 205                 }
 206             ]
 207         });
 208
 209     },
 210
 211     update: function()
 212     {
 213
 214         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
 215
 216         this.fill();
 217     },
 218
 219     fill: function()
 220     {
 221         var hours = this.time.getHours();
 222         var minutes = this.time.getMinutes();
 223         var period = 'AM';
 224
 225         if(hours > 11){
 226             period = 'PM';
 227         }
 228
 229         if(hours == 0){
 230             hours = 12;
 231         }
 232
 233
 234         if(hours > 12){
 235             hours = hours - 12;
 236         }
 237
 238         if(hours < 10){
 239             hours = '0' + hours;
 240         }
 241
 242         if(minutes < 10){
 243             minutes = '0' + minutes;
 244         }
 245
 246         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
 247         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
 248         this.pop.select('button', true).first().dom.innerHTML = period;
 249
 250     },
 251
 252     place: function()
 253     {
 254         this.picker().removeClass(['bottom', 'top']);
 255
 256         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 257             /*
 258              * place to the top of element!
 259              *
 260              */
 261
 262             this.picker().addClass('top');
 263             this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
 264
 265             return;
 266         }
 267
 268         this.picker().addClass('bottom');
 269
 270         this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
 271     },
 272
 273     onFocus : function()
 274     {
 275         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
 276         this.show();
 277     },
 278
 279     onBlur : function()
 280     {
 281         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
 282         this.hide();
 283     },
 284
 285     show : function()
 286     {
 287         this.picker().show();
 288         this.pop.show();
 289         this.update();
 290         this.place();
 291     },
 292
 293     hide : function()
 294     {
 295         this.picker().hide();
 296         this.pop.hide();
 297
 298     },
 299
 300     setTime : function()
 301     {
 302         this.hide();
 303         this.setValue(this.time.format(this.format));
 304     },
 305
 306     onMousedown: function(e){
 307         e.stopPropagation();
 308         e.preventDefault();
 309     },
 310
 311     onIncrementHours: function()
 312     {
 313         Roo.log('onIncrementHours');
 314         this.time = this.time.add(Date.HOUR, 1);
 315         this.update();
 316
 317     },
 318
 319     onDecrementHours: function()
 320     {
 321         Roo.log('onDecrementHours');
 322         this.time = this.time.add(Date.HOUR, -1);
 323         this.update();
 324     },
 325
 326     onIncrementMinutes: function()
 327     {
 328         Roo.log('onIncrementMinutes');
 329         this.time = this.time.add(Date.MINUTE, 1);
 330         this.update();
 331     },
 332
 333     onDecrementMinutes: function()
 334     {
 335         Roo.log('onDecrementMinutes');
 336         this.time = this.time.add(Date.MINUTE, -1);
 337         this.update();
 338     },
 339
 340     onTogglePeriod: function()
 341     {
 342         Roo.log('onTogglePeriod');
 343         this.time = this.time.add(Date.HOUR, 12);
 344         this.update();
 345     }
 346
 347
 348 });
 349
 350 Roo.apply(Roo.bootstrap.TimeField,  {
 351
 352     content : {
 353         tag: 'tbody',
 354         cn: [
 355             {
 356                 tag: 'tr',
 357                 cn: [
 358                 {
 359                     tag: 'td',
 360                     colspan: '7'
 361                 }
 362                 ]
 363             }
 364         ]
 365     },
 366
 367     footer : {
 368         tag: 'tfoot',
 369         cn: [
 370             {
 371                 tag: 'tr',
 372                 cn: [
 373                 {
 374                     tag: 'th',
 375                     colspan: '7',
 376                     cls: '',
 377                     cn: [
 378                         {
 379                             tag: 'button',
 380                             cls: 'btn btn-info',
 381                             html: 'OK'
 382                         }
 383                     ]
 384                 }
 385
 386                 ]
 387             }
 388         ]
 389     }
 390 });
 391
 392 Roo.apply(Roo.bootstrap.TimeField,  {
 393
 394     template : {
 395         tag: 'div',
 396         cls: 'datepicker dropdown-menu',
 397         cn: [
 398             {
 399                 tag: 'div',
 400                 cls: 'datepicker-time',
 401                 cn: [
 402                 {
 403                     tag: 'table',
 404                     cls: 'table-condensed',
 405                     cn:[
 406                     Roo.bootstrap.TimeField.content,
 407                     Roo.bootstrap.TimeField.footer
 408                     ]
 409                 }
 410                 ]
 411             }
 412         ]
 413     }
 414 });
 415
 416
 417
 418