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