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

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