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
  90         if(this.fieldLabel){
  91             cfg.cn.push({
  92                 tag : 'div',
  93                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
  94                 cn : [
  95                     {
  96                         tag : 'label',
  97                         html : this.fieldLabel
  98                     }
  99                 ]
 100             });
 101         }
 102
 103         Roo.each(['day', 'month', 'year'], function(t){
 104             cfg.cn.push({
 105                 tag : 'div',
 106                 cls : 'column roo-date-split-field-' + t + ' col-md-' + ((this.labelAlign == 'top') ? '4' : ((12 - this.labelWidth) / 3))
 107             });
 108         }, this);
 109
 110         return cfg;
 111     },
 112
 113     onRender : function(ct, position)
 114     {
 115         var _this = this;
 116
 117         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
 118
 119         this.dayField = new Roo.bootstrap.ComboBox({
 120             allowBlank : this.dayAllowBlank,
 121             alwaysQuery : true,
 122             displayField : 'value',
 123             editable : false,
 124             fieldLabel : '',
 125             forceSelection : true,
 126             mode : 'local',
 127             placeholder : this.dayPlaceholder,
 128             selectOnFocus : true,
 129             tpl : '<div class="select2-result"><b>{value}</b></div>',
 130             triggerAction : 'all',
 131             typeAhead : true,
 132             valueField : 'value',
 133             store : new Roo.data.SimpleStore({
 134                 data : (function() {
 135                     var days = [];
 136                     _this.fireEvent('days', _this, days);
 137                     return days;
 138                 })(),
 139                 fields : [ 'value' ]
 140             })
 141         });
 142
 143         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
 144
 145         this.monthField = new Roo.bootstrap.MonthField({
 146             after : '<i class=\"fa fa-calendar\"></i>',
 147             allowBlank : this.monthAllowBlank,
 148             placeholder : this.monthPlaceholder,
 149             readOnly : true,
 150             listeners : {
 151                 render : function (_self)
 152                 {
 153                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
 154                         e.preventDefault();
 155                         _self.focus();
 156                     });
 157                 }
 158             }
 159         });
 160
 161         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
 162
 163         this.yearField = new Roo.bootstrap.ComboBox({
 164             allowBlank : this.yearAllowBlank,
 165             alwaysQuery : true,
 166             displayField : 'value',
 167             editable : false,
 168             fieldLabel : '',
 169             forceSelection : true,
 170             mode : 'local',
 171             placeholder : this.yearPlaceholder,
 172             selectOnFocus : true,
 173             tpl : '<div class="select2-result"><b>{value}</b></div>',
 174             triggerAction : 'all',
 175             typeAhead : true,
 176             valueField : 'value',
 177             store : new Roo.data.SimpleStore({
 178                 data : (function() {
 179                     var years = [];
 180                     _this.fireEvent('years', _this, years);
 181                     return years;
 182                 })(),
 183                 fields : [ 'value' ]
 184             })
 185         });
 186
 187         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
 188     },
 189
 190     setValue : function(v, format)
 191     {
 192         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
 193
 194         var d = Date.parseDate(v, f);
 195
 196         this.dayField.setValue(d.format(this.dayFormat));
 197         this.monthField.setValue(d.format(this.monthFormat));
 198         this.yearField.setValue(d.format(this.yearFormat));
 199
 200         return;
 201     },
 202
 203     getValue : function()
 204     {
 205         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
 206
 207         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
 208
 209         return date;
 210     },
 211
 212     validate : function()
 213     {
 214         var d = this.dayField.validate();
 215         var m = this.monthField.validate();
 216         var y = this.yearField.validate();
 217
 218         var valid = true;
 219
 220         if(
 221                 (!this.dayAllowBlank && !d) ||
 222                 (!this.monthAllowBlank && !m) ||
 223                 (!this.yearAllowBlank && !y)
 224         ){
 225             valid = false;
 226         }
 227
 228
 229
 230         return valid;
 231     },
 232
 233     markValid : function()
 234     {
 235
 236         var label = this.el.select('label', true).first();
 237         var icon = this.el.select('i.fa-star', true).first();
 238
 239         if(label && icon){
 240             icon.remove();
 241         }
 242
 243         this.fireEvent('valid', this);
 244     },
 245
 246      /**
 247      * Mark this field as invalid
 248      * @param {String} msg The validation message
 249      */
 250     markInvalid : function(msg)
 251     {
 252
 253         var label = formGroup.select('label', true).first();
 254         var icon = formGroup.select('i.fa-star', true).first();
 255
 256         if(label && !icon){
 257             this.el.findParent('.form-group', false, true).createChild({
 258                 tag : 'i',
 259                 cls : 'text-danger fa fa-lg fa-star',
 260                 tooltip : 'This field is required',
 261                 style : 'margin-right:5px;'
 262             }, label, true);
 263         }
 264
 265         this.fireEvent('invalid', this, msg);
 266     }
 267
 268 });
 269
 270