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

   1 /*
   2  * - LGPL
   3  *
   4  * page DateSplitField.
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.form.DateSplitField
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap DateSplitField class
  13  * @cfg {string} fieldLabel - the label associated
  14  * @cfg {Number} labelWidth set the width of label (0-12)
  15  * @cfg {String} labelAlign (top|left)
  16  * @cfg {Boolean} dayAllowBlank (true|false) default false
  17  * @cfg {Boolean} monthAllowBlank (true|false) default false
  18  * @cfg {Boolean} yearAllowBlank (true|false) default false
  19  * @cfg {string} dayPlaceholder
  20  * @cfg {string} monthPlaceholder
  21  * @cfg {string} yearPlaceholder
  22  * @cfg {string} dayFormat default 'd'
  23  * @cfg {string} monthFormat default 'm'
  24  * @cfg {string} yearFormat default 'Y'
  25  * @cfg {Number} labellg set the width of label (1-12)
  26  * @cfg {Number} labelmd set the width of label (1-12)
  27  * @cfg {Number} labelsm set the width of label (1-12)
  28  * @cfg {Number} labelxs set the width of label (1-12)
  29
  30  *
  31  * @constructor
  32  * Create a new DateSplitField
  33  * @param {Object} config The config object
  34  */
  35
  36 Roo.bootstrap.form.DateSplitField = function(config){
  37     Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config);
  38
  39     this.addEvents({
  40         // raw events
  41          /**
  42          * @event years
  43          * getting the data of years
  44          * @param {Roo.bootstrap.form.DateSplitField} this
  45          * @param {Object} years
  46          */
  47         "years" : true,
  48         /**
  49          * @event days
  50          * getting the data of days
  51          * @param {Roo.bootstrap.form.DateSplitField} this
  52          * @param {Object} days
  53          */
  54         "days" : true,
  55         /**
  56          * @event invalid
  57          * Fires after the field has been marked as invalid.
  58          * @param {Roo.form.Field} this
  59          * @param {String} msg The validation message
  60          */
  61         invalid : true,
  62        /**
  63          * @event valid
  64          * Fires after the field has been validated with no errors.
  65          * @param {Roo.form.Field} this
  66          */
  67         valid : true
  68     });
  69 };
  70
  71 Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component,  {
  72
  73     fieldLabel : '',
  74     labelAlign : 'top',
  75     labelWidth : 3,
  76     dayAllowBlank : false,
  77     monthAllowBlank : false,
  78     yearAllowBlank : false,
  79     dayPlaceholder : '',
  80     monthPlaceholder : '',
  81     yearPlaceholder : '',
  82     dayFormat : 'd',
  83     monthFormat : 'm',
  84     yearFormat : 'Y',
  85     isFormField : true,
  86     labellg : 0,
  87     labelmd : 0,
  88     labelsm : 0,
  89     labelxs : 0,
  90
  91     getAutoCreate : function()
  92     {
  93         var cfg = {
  94             tag : 'div',
  95             cls : 'row roo-date-split-field-group',
  96             cn : [
  97                 {
  98                     tag : 'input',
  99                     type : 'hidden',
 100                     cls : 'form-hidden-field roo-date-split-field-group-value',
 101                     name : this.name
 102                 }
 103             ]
 104         };
 105
 106         var labelCls = 'col-md-12';
 107         var contentCls = 'col-md-4';
 108
 109         if(this.fieldLabel){
 110
 111             var label = {
 112                 tag : 'div',
 113                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
 114                 cn : [
 115                     {
 116                         tag : 'label',
 117                         html : this.fieldLabel
 118                     }
 119                 ]
 120             };
 121
 122             if(this.labelAlign == 'left'){
 123
 124                 if(this.labelWidth > 12){
 125                     label.style = "width: " + this.labelWidth + 'px';
 126                 }
 127
 128                 if(this.labelWidth < 13 && this.labelmd == 0){
 129                     this.labelmd = this.labelWidth;
 130                 }
 131
 132                 if(this.labellg > 0){
 133                     labelCls = ' col-lg-' + this.labellg;
 134                     contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
 135                 }
 136
 137                 if(this.labelmd > 0){
 138                     labelCls = ' col-md-' + this.labelmd;
 139                     contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
 140                 }
 141
 142                 if(this.labelsm > 0){
 143                     labelCls = ' col-sm-' + this.labelsm;
 144                     contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
 145                 }
 146
 147                 if(this.labelxs > 0){
 148                     labelCls = ' col-xs-' + this.labelxs;
 149                     contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
 150                 }
 151             }
 152
 153             label.cls += ' ' + labelCls;
 154
 155             cfg.cn.push(label);
 156         }
 157
 158         Roo.each(['day', 'month', 'year'], function(t){
 159             cfg.cn.push({
 160                 tag : 'div',
 161                 cls : 'column roo-date-split-field-' + t + ' ' + contentCls
 162             });
 163         }, this);
 164
 165         return cfg;
 166     },
 167
 168     inputEl: function ()
 169     {
 170         return this.el.select('.roo-date-split-field-group-value', true).first();
 171     },
 172
 173     onRender : function(ct, position)
 174     {
 175         var _this = this;
 176
 177         Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
 178
 179         this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
 180
 181         this.dayField = new Roo.bootstrap.form.ComboBox({
 182             allowBlank : this.dayAllowBlank,
 183             alwaysQuery : true,
 184             displayField : 'value',
 185             editable : false,
 186             fieldLabel : '',
 187             forceSelection : true,
 188             mode : 'local',
 189             placeholder : this.dayPlaceholder,
 190             selectOnFocus : true,
 191             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
 192             triggerAction : 'all',
 193             typeAhead : true,
 194             valueField : 'value',
 195             store : new Roo.data.SimpleStore({
 196                 data : (function() {
 197                     var days = [];
 198                     _this.fireEvent('days', _this, days);
 199                     return days;
 200                 })(),
 201                 fields : [ 'value' ]
 202             }),
 203             listeners : {
 204                 select : function (_self, record, index)
 205                 {
 206                     _this.setValue(_this.getValue());
 207                 }
 208             }
 209         });
 210
 211         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
 212
 213         this.monthField = new Roo.bootstrap.form.MonthField({
 214             after : '<i class=\"fa fa-calendar\"></i>',
 215             allowBlank : this.monthAllowBlank,
 216             placeholder : this.monthPlaceholder,
 217             readOnly : true,
 218             listeners : {
 219                 render : function (_self)
 220                 {
 221                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
 222                         e.preventDefault();
 223                         _self.focus();
 224                     });
 225                 },
 226                 select : function (_self, oldvalue, newvalue)
 227                 {
 228                     _this.setValue(_this.getValue());
 229                 }
 230             }
 231         });
 232
 233         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
 234
 235         this.yearField = new Roo.bootstrap.form.ComboBox({
 236             allowBlank : this.yearAllowBlank,
 237             alwaysQuery : true,
 238             displayField : 'value',
 239             editable : false,
 240             fieldLabel : '',
 241             forceSelection : true,
 242             mode : 'local',
 243             placeholder : this.yearPlaceholder,
 244             selectOnFocus : true,
 245             tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
 246             triggerAction : 'all',
 247             typeAhead : true,
 248             valueField : 'value',
 249             store : new Roo.data.SimpleStore({
 250                 data : (function() {
 251                     var years = [];
 252                     _this.fireEvent('years', _this, years);
 253                     return years;
 254                 })(),
 255                 fields : [ 'value' ]
 256             }),
 257             listeners : {
 258                 select : function (_self, record, index)
 259                 {
 260                     _this.setValue(_this.getValue());
 261                 }
 262             }
 263         });
 264
 265         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
 266     },
 267
 268     setValue : function(v, format)
 269     {
 270         this.inputEl.dom.value = v;
 271
 272         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
 273
 274         var d = Date.parseDate(v, f);
 275
 276         if(!d){
 277             this.validate();
 278             return;
 279         }
 280
 281         this.setDay(d.format(this.dayFormat));
 282         this.setMonth(d.format(this.monthFormat));
 283         this.setYear(d.format(this.yearFormat));
 284
 285         this.validate();
 286
 287         return;
 288     },
 289
 290     setDay : function(v)
 291     {
 292         this.dayField.setValue(v);
 293         this.inputEl.dom.value = this.getValue();
 294         this.validate();
 295         return;
 296     },
 297
 298     setMonth : function(v)
 299     {
 300         this.monthField.setValue(v, true);
 301         this.inputEl.dom.value = this.getValue();
 302         this.validate();
 303         return;
 304     },
 305
 306     setYear : function(v)
 307     {
 308         this.yearField.setValue(v);
 309         this.inputEl.dom.value = this.getValue();
 310         this.validate();
 311         return;
 312     },
 313
 314     getDay : function()
 315     {
 316         return this.dayField.getValue();
 317     },
 318
 319     getMonth : function()
 320     {
 321         return this.monthField.getValue();
 322     },
 323
 324     getYear : function()
 325     {
 326         return this.yearField.getValue();
 327     },
 328
 329     getValue : function()
 330     {
 331         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
 332
 333         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
 334
 335         return date;
 336     },
 337
 338     reset : function()
 339     {
 340         this.setDay('');
 341         this.setMonth('');
 342         this.setYear('');
 343         this.inputEl.dom.value = '';
 344         this.validate();
 345         return;
 346     },
 347
 348     validate : function()
 349     {
 350         var d = this.dayField.validate();
 351         var m = this.monthField.validate();
 352         var y = this.yearField.validate();
 353
 354         var valid = true;
 355
 356         if(
 357                 (!this.dayAllowBlank && !d) ||
 358                 (!this.monthAllowBlank && !m) ||
 359                 (!this.yearAllowBlank && !y)
 360         ){
 361             valid = false;
 362         }
 363
 364         if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
 365             return valid;
 366         }
 367
 368         if(valid){
 369             this.markValid();
 370             return valid;
 371         }
 372
 373         this.markInvalid();
 374
 375         return valid;
 376     },
 377
 378     markValid : function()
 379     {
 380
 381         var label = this.el.select('label', true).first();
 382         var icon = this.el.select('i.fa-star', true).first();
 383
 384         if(label && icon){
 385             icon.remove();
 386         }
 387
 388         this.fireEvent('valid', this);
 389     },
 390
 391      /**
 392      * Mark this field as invalid
 393      * @param {String} msg The validation message
 394      */
 395     markInvalid : function(msg)
 396     {
 397
 398         var label = this.el.select('label', true).first();
 399         var icon = this.el.select('i.fa-star', true).first();
 400
 401         if(label && !icon){
 402             this.el.select('.roo-date-split-field-label', true).createChild({
 403                 tag : 'i',
 404                 cls : 'text-danger fa fa-lg fa-star',
 405                 tooltip : 'This field is required',
 406                 style : 'margin-right:5px;'
 407             }, label, true);
 408         }
 409
 410         this.fireEvent('invalid', this, msg);
 411     },
 412
 413     clearInvalid : function()
 414     {
 415         var label = this.el.select('label', true).first();
 416         var icon = this.el.select('i.fa-star', true).first();
 417
 418         if(label && icon){
 419             icon.remove();
 420         }
 421
 422         this.fireEvent('valid', this);
 423     },
 424
 425     getName: function()
 426     {
 427         return this.name;
 428     }
 429
 430 });
 431
 432