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

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