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