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         Roo.log('el!!!!!!!!!!!!!!!!!!!!!!!!!!1');
  87         Roo.log(this.el);
  88
  89     },
  90
  91     setValue: function(v)
  92     {
  93         Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
  94
  95         this.update();
  96
  97         this.fireEvent('select', this, this.date);
  98
  99     },
 100
 101     getValue: function()
 102     {
 103         return this.value;
 104     },
 105
 106     onClick: function(e)
 107     {
 108         e.stopPropagation();
 109         e.preventDefault();
 110
 111         var target = e.getTarget();
 112
 113         if(target.nodeName.toLowerCase() === 'i'){
 114             target = Roo.get(target).dom.parentNode;
 115         }
 116
 117         var nodeName = target.nodeName;
 118         var className = target.className;
 119         var html = target.innerHTML;
 120
 121         if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
 122             return;
 123         }
 124
 125         this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
 126
 127         this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 128
 129         this.hide();
 130
 131     },
 132
 133     picker : function()
 134     {
 135         return this.pickerEl;
 136     },
 137
 138     fillMonths: function()
 139     {
 140         var i = 0;
 141         var months = this.picker().select('>.datepicker-months td', true).first();
 142
 143         months.dom.innerHTML = '';
 144
 145         while (i < 12) {
 146             var month = {
 147                 tag: 'span',
 148                 cls: 'month',
 149                 html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
 150             }
 151
 152             months.createChild(month);
 153         }
 154
 155     },
 156
 157     update: function()
 158     {
 159         var _this = this;
 160
 161         if(typeof(this.vIndex) == 'undefined' && this.value.length){
 162             this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
 163         }
 164
 165         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
 166             e.removeClass('active');
 167
 168             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
 169                 e.addClass('active');
 170             }
 171         })
 172     },
 173
 174     place: function()
 175     {
 176         if(this.isInline) return;
 177
 178         this.picker().removeClass(['bottom', 'top']);
 179
 180         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 181             /*
 182              * place to the top of element!
 183              *
 184              */
 185
 186             this.picker().addClass('top');
 187             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
 188
 189             return;
 190         }
 191
 192         this.picker().addClass('bottom');
 193
 194         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
 195     },
 196
 197     onFocus : function()
 198     {
 199         Roo.bootstrap.MonthField.superclass.onFocus.call(this);
 200         this.show();
 201     },
 202
 203     onBlur : function()
 204     {
 205         Roo.bootstrap.MonthField.superclass.onBlur.call(this);
 206
 207         var d = this.inputEl().getValue();
 208
 209         this.setValue(d);
 210
 211         this.hide();
 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
 244     fireKey: function(e)
 245     {
 246         if (!this.picker().isVisible()){
 247             if (e.keyCode == 27) // allow escape to hide and re-show picker
 248                 this.show();
 249             return;
 250         }
 251
 252         var dir;
 253
 254         switch(e.keyCode){
 255             case 27: // escape
 256                 this.hide();
 257                 e.preventDefault();
 258                 break;
 259             case 37: // left
 260             case 39: // right
 261                 dir = e.keyCode == 37 ? -1 : 1;
 262
 263                 this.vIndex = this.vIndex + dir;
 264
 265                 if(this.vIndex < 0){
 266                     this.vIndex = 0;
 267                 }
 268
 269                 if(this.vIndex > 11){
 270                     this.vIndex = 11;
 271                 }
 272
 273                 if(isNaN(this.vIndex)){
 274                     this.vIndex = 0;
 275                 }
 276
 277                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 278
 279                 break;
 280             case 38: // up
 281             case 40: // down
 282
 283                 dir = e.keyCode == 38 ? -1 : 1;
 284
 285                 this.vIndex = this.vIndex + dir * 4;
 286
 287                 if(this.vIndex < 0){
 288                     this.vIndex = 0;
 289                 }
 290
 291                 if(this.vIndex > 11){
 292                     this.vIndex = 11;
 293                 }
 294
 295                 if(isNaN(this.vIndex)){
 296                     this.vIndex = 0;
 297                 }
 298
 299                 this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 300                 break;
 301
 302             case 13: // enter
 303
 304                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 305                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 306                 }
 307
 308                 this.hide();
 309                 e.preventDefault();
 310                 break;
 311             case 9: // tab
 312                 if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
 313                     this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 314                 }
 315                 this.hide();
 316                 break;
 317             case 16: // shift
 318             case 17: // ctrl
 319             case 18: // alt
 320                 break;
 321             default :
 322                 this.hide();
 323
 324         }
 325     },
 326
 327     remove: function()
 328     {
 329         this.picker().remove();
 330     }
 331
 332 });
 333
 334 Roo.apply(Roo.bootstrap.MonthField,  {
 335
 336     content : {
 337         tag: 'tbody',
 338         cn: [
 339         {
 340             tag: 'tr',
 341             cn: [
 342             {
 343                 tag: 'td',
 344                 colspan: '7'
 345             }
 346             ]
 347         }
 348         ]
 349     },
 350
 351     dates:{
 352         en: {
 353             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 354             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 355         }
 356     }
 357 });
 358
 359 Roo.apply(Roo.bootstrap.MonthField,  {
 360
 361     template : {
 362         tag: 'div',
 363         cls: 'datepicker dropdown-menu roo-dynamic',
 364         cn: [
 365             {
 366                 tag: 'div',
 367                 cls: 'datepicker-months',
 368                 cn: [
 369                 {
 370                     tag: 'table',
 371                     cls: 'table-condensed',
 372                     cn:[
 373                         Roo.bootstrap.DateField.content
 374                     ]
 375                 }
 376                 ]
 377             }
 378         ]
 379     }
 380 });
 381
 382
 383
 384
 385