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

   1 /*
   2  * - LGPL
   3  *
   4  * MonthField
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.MonthField
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap MonthField class
  12  *
  13  * @cfg {String} language default en
  14  *
  15  * @constructor
  16  * Create a new MonthField
  17  * @param {Object} config The config object
  18  */
  19
  20 Roo.bootstrap.MonthField = function(config){
  21     Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
  22
  23     this.addEvents({
  24         /**
  25          * @event show
  26          * Fires when this field show.
  27          * @param {Roo.bootstrap.MonthField} this
  28          * @param {Mixed} date The date value
  29          */
  30         show : true,
  31         /**
  32          * @event show
  33          * Fires when this field hide.
  34          * @param {Roo.bootstrap.MonthField} this
  35          * @param {Mixed} date The date value
  36          */
  37         hide : true,
  38         /**
  39          * @event select
  40          * Fires when select a date.
  41          * @param {Roo.bootstrap.MonthField} this
  42          * @param {Mixed} date The date value
  43          */
  44         select : true
  45     });
  46 };
  47
  48 Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input,  {
  49
  50     onRender: function(ct, position)
  51     {
  52
  53         Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
  54
  55         this.language = this.language || 'en';
  56         this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
  57         this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
  58
  59         this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
  60         this.isInline = false;
  61         this.isInput = true;
  62         this.component = this.el.select('.add-on', true).first() || false;
  63         this.component = (this.component && this.component.length === 0) ? false : this.component;
  64         this.hasInput = this.component && this.inputEL().length;
  65
  66         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
  67
  68         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
  69
  70         this.picker().on('mousedown', this.onMousedown, this);
  71         this.picker().on('click', this.onClick, this);
  72
  73         this.picker().addClass('datepicker-dropdown');
  74
  75         Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
  76             v.setStyle('width', '189px');
  77         });
  78
  79         this.fillMonths();
  80
  81         this.update();
  82
  83         if(this.isInline) {
  84             this.show();
  85         }
  86
  87     },
  88
  89     setValue: function(v)
  90     {
  91         Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
  92
  93         this.update();
  94
  95         this.fireEvent('select', this, this.date);
  96
  97     },
  98
  99     getValue: function()
 100     {
 101         return this.value;
 102     },
 103
 104     onClick: function(e)
 105     {
 106         e.stopPropagation();
 107         e.preventDefault();
 108
 109         var target = e.getTarget();
 110
 111         if(target.nodeName.toLowerCase() === 'i'){
 112             target = Roo.get(target).dom.parentNode;
 113         }
 114
 115         var nodeName = target.nodeName;
 116         var className = target.className;
 117         var html = target.innerHTML;
 118
 119         if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
 120             return;
 121         }
 122
 123         this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
 124
 125         this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 126
 127         this.hide();
 128
 129     },
 130
 131     picker : function()
 132     {
 133         return this.pickerEl;
 134     },
 135
 136     fillMonths: function()
 137     {
 138         var i = 0;
 139         var months = this.picker().select('>.datepicker-months td', true).first();
 140
 141         months.dom.innerHTML = '';
 142
 143         while (i < 12) {
 144             var month = {
 145                 tag: 'span',
 146                 cls: 'month',
 147                 html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
 148             }
 149
 150             months.createChild(month);
 151         }
 152
 153     },
 154
 155     update: function()
 156     {
 157         var _this = this;
 158
 159         if(typeof(this.vIndex) == 'undefined' && this.value.length){
 160             this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
 161         }
 162
 163         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
 164             e.removeClass('active');
 165
 166             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
 167                 e.addClass('active');
 168             }
 169         })
 170     },
 171
 172     place: function()
 173     {
 174         if(this.isInline) return;
 175
 176         this.picker().removeClass(['bottom', 'top']);
 177
 178         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 179             /*
 180              * place to the top of element!
 181              *
 182              */
 183
 184             this.picker().addClass('top');
 185             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
 186
 187             return;
 188         }
 189
 190         this.picker().addClass('bottom');
 191
 192         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
 193     },
 194
 195     onFocus : function()
 196     {
 197         Roo.bootstrap.MonthField.superclass.onFocus.call(this);
 198         this.show();
 199     },
 200
 201     onBlur : function()
 202     {
 203         Roo.bootstrap.MonthField.superclass.onBlur.call(this);
 204
 205         var d = this.inputEl().getValue();
 206
 207         this.setValue(d);
 208
 209         this.hide();
 210     },
 211
 212     show : function()
 213     {
 214         this.picker().show();
 215         this.picker().select('>.datepicker-months', true).first().show();
 216         this.update();
 217         this.place();
 218
 219         this.fireEvent('show', this, this.date);
 220     },
 221
 222     hide : function()
 223     {
 224         if(this.isInline) return;
 225         this.picker().hide();
 226         this.fireEvent('hide', this, this.date);
 227
 228     },
 229
 230     onMousedown: function(e)
 231     {
 232         e.stopPropagation();
 233         e.preventDefault();
 234     },
 235
 236     keyup: function(e)
 237     {
 238         Roo.bootstrap.MonthField.superclass.keyup.call(this);
 239         this.update();
 240     },
 241
 242     fireKey: function(e)
 243     {
 244         if (!this.picker().isVisible()){
 245             if (e.keyCode == 27) // allow escape to hide and re-show picker
 246                 this.show();
 247             return;
 248         }
 249
 250         var dir;
 251
 252         switch(e.keyCode){
 253             case 27: // escape
 254                 this.hide();
 255                 e.preventDefault();
 256                 break;
 257             case 37: // left
 258             case 39: // right
 259                 dir = e.keyCode == 37 ? -1 : 1;
 260
 261                 this.vIndex = this.vIndex + dir;
 262
 263                 if(this.vIndex < 0){
 264                     this.vIndex = 0;
 265                 }
 266
 267                 if(this.vIndex > 11){
 268                     this.vIndex = 11;
 269                 }
 270
 271                 if(isNaN(this.vIndex)){
 272                     this.vIndex = 0;
 273                 }
 274
 275                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 276
 277                 break;
 278             case 38: // up
 279             case 40: // down
 280
 281                 dir = e.keyCode == 38 ? -1 : 1;
 282
 283                 this.vIndex = this.vIndex + dir * 4;
 284
 285                 if(this.vIndex < 0){
 286                     this.vIndex = 0;
 287                 }
 288
 289                 if(this.vIndex > 11){
 290                     this.vIndex = 11;
 291                 }
 292
 293                 if(isNaN(this.vIndex)){
 294                     this.vIndex = 0;
 295                 }
 296
 297                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 298                 break;
 299
 300             case 13: // enter
 301
 302                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 303                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 304                 }
 305
 306                 this.hide();
 307                 e.preventDefault();
 308                 break;
 309             case 9: // tab
 310                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 311                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 312                 }
 313                 this.hide();
 314                 break;
 315             case 16: // shift
 316             case 17: // ctrl
 317             case 18: // alt
 318                 break;
 319             default :
 320                 this.hide();
 321
 322         }
 323     },
 324
 325     remove: function()
 326     {
 327         this.picker().remove();
 328     }
 329
 330 });
 331
 332 Roo.apply(Roo.bootstrap.MonthField,  {
 333
 334     content : {
 335         tag: 'tbody',
 336         cn: [
 337         {
 338             tag: 'tr',
 339             cn: [
 340             {
 341                 tag: 'td',
 342                 colspan: '7'
 343             }
 344             ]
 345         }
 346         ]
 347     },
 348
 349     dates:{
 350         en: {
 351             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 352             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 353         }
 354     }
 355 });
 356
 357 Roo.apply(Roo.bootstrap.MonthField,  {
 358
 359     template : {
 360         tag: 'div',
 361         cls: 'datepicker dropdown-menu roo-dynamic',
 362         cn: [
 363             {
 364                 tag: 'div',
 365                 cls: 'datepicker-months',
 366                 cn: [
 367                 {
 368                     tag: 'table',
 369                     cls: 'table-condensed',
 370                     cn:[
 371                         Roo.bootstrap.DateField.content
 372                     ]
 373                 }
 374                 ]
 375             }
 376         ]
 377     }
 378 });
 379
 380
 381
 382
 383