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     format : "F",
  51
  52     onRender: function(ct, position)
  53     {
  54
  55         Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
  56
  57         this.language = this.language || 'en';
  58         this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
  59         this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
  60
  61         this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
  62         this.isInline = false;
  63         this.isInput = true;
  64         this.component = this.el.select('.add-on', true).first() || false;
  65         this.component = (this.component && this.component.length === 0) ? false : this.component;
  66         this.hasInput = this.component && this.inputEL().length;
  67
  68         this.minViewMode = 1;
  69         this.viewMode = 1;
  70
  71         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
  72
  73         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
  74
  75         this.picker().on('mousedown', this.onMousedown, this);
  76         this.picker().on('click', this.onClick, this);
  77
  78         this.picker().addClass('datepicker-dropdown');
  79
  80         this.startViewMode = this.viewMode;
  81
  82         Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
  83             v.setStyle('width', '189px');
  84         });
  85
  86         this.fillMonths();
  87         this.update();
  88
  89         if(this.isInline) {
  90             this.show();
  91         }
  92     },
  93
  94     setValue: function(v)
  95     {
  96         Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
  97
  98         this.update();
  99
 100         this.fireEvent('select', this, this.date);
 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.MonthField.dates[this.language].monthsShort.indexOf(html);
 129
 130         this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
 131         this.hide();
 132
 133     },
 134
 135     picker : function()
 136     {
 137         return this.pickerEl;
 138     },
 139
 140     fillMonths: function()
 141     {
 142         var i = 0
 143         var months = this.picker().select('>.datepicker-months td', true).first();
 144
 145         months.dom.innerHTML = '';
 146
 147         while (i < 12) {
 148             var month = {
 149                 tag: 'span',
 150                 cls: 'month',
 151                 html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
 152             }
 153
 154             months.createChild(month);
 155         }
 156
 157     },
 158
 159     update: function()
 160     {
 161         var _this = this;
 162
 163         if(typeof(this.vIndex) == 'undefined' && this.value.length){
 164             this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
 165         }
 166
 167         Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
 168             e.removeClass('active');
 169
 170             if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
 171                 e.addClass('active');
 172             }
 173         })
 174     },
 175
 176     place: function()
 177     {
 178         if(this.isInline) return;
 179
 180         this.picker().removeClass(['bottom', 'top']);
 181
 182         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 183             /*
 184              * place to the top of element!
 185              *
 186              */
 187
 188             this.picker().addClass('top');
 189             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
 190
 191             return;
 192         }
 193
 194         this.picker().addClass('bottom');
 195
 196         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
 197     },
 198
 199     onFocus : function()
 200     {
 201         Roo.bootstrap.MonthField.superclass.onFocus.call(this);
 202         this.show();
 203     },
 204
 205     onBlur : function()
 206     {
 207         Roo.bootstrap.MonthField.superclass.onBlur.call(this);
 208
 209         var d = this.inputEl().getValue();
 210
 211         this.setValue(d);
 212
 213         this.hide();
 214     },
 215
 216     show : function()
 217     {
 218         this.picker().show();
 219         this.picker().select('>.datepicker-months', true).first().show();
 220         this.update();
 221         this.place();
 222
 223         this.fireEvent('show', this, this.date);
 224     },
 225
 226     hide : function()
 227     {
 228         if(this.isInline) return;
 229         this.picker().hide();
 230         this.fireEvent('hide', this, this.date);
 231
 232     },
 233
 234     onMousedown: function(e)
 235     {
 236         e.stopPropagation();
 237         e.preventDefault();
 238     },
 239
 240     keyup: function(e)
 241     {
 242         Roo.bootstrap.MonthField.superclass.keyup.call(this);
 243         this.update();
 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 dateChanged = false,
 255         dir, day, month, year,
 256         newDate;
 257
 258         switch(e.keyCode){
 259             case 27: // escape
 260                 this.hide();
 261                 e.preventDefault();
 262                 break;
 263             case 37: // left
 264             case 39: // right
 265                 dir = e.keyCode == 37 ? -1 : 1;
 266
 267                 newDate = new Date();
 268
 269
 270
 271                 newDate.setUTCDate(this.date.getUTCDate() + dir);
 272                 newViewDate = new Date(this.viewDate);
 273                 newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
 274
 275
 276
 277                 break;
 278             case 38: // up
 279             case 40: // down
 280                 if (!this.keyboardNavigation) break;
 281                 dir = e.keyCode == 38 ? -1 : 1;
 282                 if (e.ctrlKey){
 283                     newDate = this.moveYear(this.date, dir);
 284                     newViewDate = this.moveYear(this.viewDate, dir);
 285                 } else if (e.shiftKey){
 286                     newDate = this.moveMonth(this.date, dir);
 287                     newViewDate = this.moveMonth(this.viewDate, dir);
 288                 } else {
 289                     newDate = new Date(this.date);
 290                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
 291                     newViewDate = new Date(this.viewDate);
 292                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
 293                 }
 294                 if (this.dateWithinRange(newDate)){
 295                     this.date = newDate;
 296                     this.viewDate = newViewDate;
 297                     this.setValue(this.formatDate(this.date));
 298 //                    this.update();
 299                     e.preventDefault();
 300                     dateChanged = true;
 301                 }
 302                 break;
 303             case 13: // enter
 304                 this.setValue(this.formatDate(this.date));
 305                 this.hide();
 306                 e.preventDefault();
 307                 break;
 308             case 9: // tab
 309                 this.setValue(this.formatDate(this.date));
 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             }
 341             ]
 342         }
 343         ]
 344     },
 345
 346     dates:{
 347         en: {
 348             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 349             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 350         }
 351     }
 352 });
 353
 354 Roo.apply(Roo.bootstrap.MonthField,  {
 355
 356     template : {
 357         tag: 'div',
 358         cls: 'datepicker dropdown-menu roo-dynamic',
 359         cn: [
 360             {
 361                 tag: 'div',
 362                 cls: 'datepicker-months',
 363                 cn: [
 364                 {
 365                     tag: 'table',
 366                     cls: 'table-condensed',
 367                     cn:[
 368                         Roo.bootstrap.DateField.content
 369                     ]
 370                 }
 371                 ]
 372             }
 373         ]
 374     }
 375 });
 376
 377
 378
 379
 380