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