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