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