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