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         this.fireEvent("blur", this, e);
 212     },
 213
 214     show : function()
 215     {
 216         this.picker().show();
 217         this.picker().select('>.datepicker-months', true).first().show();
 218         this.update();
 219         this.place();
 220
 221         this.fireEvent('show', this, this.date);
 222     },
 223
 224     hide : function()
 225     {
 226         if(this.isInline) return;
 227         this.picker().hide();
 228         this.fireEvent('hide', this, this.date);
 229
 230     },
 231
 232     onMousedown: function(e)
 233     {
 234         e.stopPropagation();
 235         e.preventDefault();
 236     },
 237
 238     keyup: function(e)
 239     {
 240         Roo.bootstrap.MonthField.superclass.keyup.call(this);
 241         this.update();
 242
 243         this.fireEvent("keyup", this, e);
 244     },
 245
 246     fireKey: function(e)
 247     {
 248         if (!this.picker().isVisible()){
 249             if (e.keyCode == 27) // allow escape to hide and re-show picker
 250                 this.show();
 251             return;
 252         }
 253
 254         var dir;
 255
 256         switch(e.keyCode){
 257             case 27: // escape
 258                 this.hide();
 259                 e.preventDefault();
 260                 break;
 261             case 37: // left
 262             case 39: // right
 263                 dir = e.keyCode == 37 ? -1 : 1;
 264
 265                 this.vIndex = this.vIndex + dir;
 266
 267                 if(this.vIndex < 0){
 268                     this.vIndex = 0;
 269                 }
 270
 271                 if(this.vIndex > 11){
 272                     this.vIndex = 11;
 273                 }
 274
 275                 if(isNaN(this.vIndex)){
 276                     this.vIndex = 0;
 277                 }
 278
 279                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 280
 281                 break;
 282             case 38: // up
 283             case 40: // down
 284
 285                 dir = e.keyCode == 38 ? -1 : 1;
 286
 287                 this.vIndex = this.vIndex + dir * 4;
 288
 289                 if(this.vIndex < 0){
 290                     this.vIndex = 0;
 291                 }
 292
 293                 if(this.vIndex > 11){
 294                     this.vIndex = 11;
 295                 }
 296
 297                 if(isNaN(this.vIndex)){
 298                     this.vIndex = 0;
 299                 }
 300
 301                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 302                 break;
 303
 304             case 13: // enter
 305
 306                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 307                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 308                 }
 309
 310                 this.hide();
 311                 e.preventDefault();
 312                 break;
 313             case 9: // tab
 314                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 315                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 316                 }
 317                 this.hide();
 318                 break;
 319             case 16: // shift
 320             case 17: // ctrl
 321             case 18: // alt
 322                 break;
 323             default :
 324                 this.hide();
 325
 326         }
 327
 328         this.fireEvent("specialkey", this, e);
 329     },
 330
 331     remove: function()
 332     {
 333         this.picker().remove();
 334     }
 335
 336 });
 337
 338 Roo.apply(Roo.bootstrap.MonthField,  {
 339
 340     content : {
 341         tag: 'tbody',
 342         cn: [
 343         {
 344             tag: 'tr',
 345             cn: [
 346             {
 347                 tag: 'td',
 348                 colspan: '7'
 349             }
 350             ]
 351         }
 352         ]
 353     },
 354
 355     dates:{
 356         en: {
 357             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 358             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 359         }
 360     }
 361 });
 362
 363 Roo.apply(Roo.bootstrap.MonthField,  {
 364
 365     template : {
 366         tag: 'div',
 367         cls: 'datepicker dropdown-menu roo-dynamic',
 368         cn: [
 369             {
 370                 tag: 'div',
 371                 cls: 'datepicker-months',
 372                 cn: [
 373                 {
 374                     tag: 'table',
 375                     cls: 'table-condensed',
 376                     cn:[
 377                         Roo.bootstrap.DateField.content
 378                     ]
 379                 }
 380                 ]
 381             }
 382         ]
 383     }
 384 });
 385
 386
 387
 388
 389