* @cfg {string} dayFormat default 'd'
* @cfg {string} monthFormat default 'm'
* @cfg {string} yearFormat default 'Y'
+ * @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
*
* @constructor
dayFormat : 'd',
monthFormat : 'm',
yearFormat : 'Y',
+ isFormField : true,
+ labellg : 0,
+ labelmd : 0,
+ labelsm : 0,
+ labelxs : 0,
getAutoCreate : function()
{
tag : 'div',
cls : 'row roo-date-split-field-group',
cn : [
-// {
-// tag : 'input',
-// type : 'hidden',
-// cls : 'form-hidden-field',
-// name : this.name
-// }
+ {
+ tag : 'input',
+ type : 'hidden',
+ cls : 'form-hidden-field roo-date-split-field-group-value',
+ name : this.name
+ }
]
- }
+ };
+
+ var labelCls = 'col-md-12';
+ var contentCls = 'col-md-4';
if(this.fieldLabel){
- cfg.cn.push({
+
+ var label = {
tag : 'div',
cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
cn : [
html : this.fieldLabel
}
]
- });
+ };
+
+ if(this.labelAlign == 'left'){
+
+ if(this.labelWidth > 12){
+ label.style = "width: " + this.labelWidth + 'px';
+ }
+
+ if(this.labelWidth < 13 && this.labelmd == 0){
+ this.labelmd = this.labelWidth;
+ }
+
+ if(this.labellg > 0){
+ labelCls = ' col-lg-' + this.labellg;
+ contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
+ }
+
+ if(this.labelmd > 0){
+ labelCls = ' col-md-' + this.labelmd;
+ contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
+ }
+
+ if(this.labelsm > 0){
+ labelCls = ' col-sm-' + this.labelsm;
+ contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
+ }
+
+ if(this.labelxs > 0){
+ labelCls = ' col-xs-' + this.labelxs;
+ contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
+ }
+ }
+
+ label.cls += ' ' + labelCls;
+
+ cfg.cn.push(label);
}
Roo.each(['day', 'month', 'year'], function(t){
cfg.cn.push({
tag : 'div',
- cls : 'column roo-date-split-field-' + t + ' col-md-' + ((this.labelAlign == 'top') ? '4' : ((12 - this.labelWidth) / 3))
+ cls : 'column roo-date-split-field-' + t + ' ' + contentCls
});
}, this);
return cfg;
},
+ inputEl: function ()
+ {
+ return this.el.select('.roo-date-split-field-group-value', true).first();
+ },
+
onRender : function(ct, position)
{
var _this = this;
Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
+ this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
+
this.dayField = new Roo.bootstrap.ComboBox({
allowBlank : this.dayAllowBlank,
alwaysQuery : true,
mode : 'local',
placeholder : this.dayPlaceholder,
selectOnFocus : true,
- tpl : '<div class="select2-result"><b>{value}</b></div>',
+ tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
triggerAction : 'all',
typeAhead : true,
valueField : 'value',
listeners : {
select : function (_self, record, index)
{
- _this.validate();
+ _this.setValue(_this.getValue());
}
}
});
},
select : function (_self, oldvalue, newvalue)
{
- _this.validate();
+ _this.setValue(_this.getValue());
}
}
});
mode : 'local',
placeholder : this.yearPlaceholder,
selectOnFocus : true,
- tpl : '<div class="select2-result"><b>{value}</b></div>',
+ tpl : '<div class="roo-select2-result"><b>{value}</b></div>',
triggerAction : 'all',
typeAhead : true,
valueField : 'value',
listeners : {
select : function (_self, record, index)
{
- _this.validate();
+ _this.setValue(_this.getValue());
}
}
});
setValue : function(v, format)
{
+ this.inputEl.dom.value = v;
+
var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
var d = Date.parseDate(v, f);
- this.dayField.setValue(d.format(this.dayFormat));
- this.monthField.setValue(d.format(this.monthFormat));
- this.yearField.setValue(d.format(this.yearFormat));
+ if(!d){
+ this.validate();
+ return;
+ }
+
+ this.setDay(d.format(this.dayFormat));
+ this.setMonth(d.format(this.monthFormat));
+ this.setYear(d.format(this.yearFormat));
+
+ this.validate();
return;
},
setDay : function(v)
{
this.dayField.setValue(v);
-
+ this.inputEl.dom.value = this.getValue();
+ this.validate();
return;
},
setMonth : function(v)
{
- this.monthField.setValue(v);
-
+ this.monthField.setValue(v, true);
+ this.inputEl.dom.value = this.getValue();
+ this.validate();
return;
},
setYear : function(v)
{
this.yearField.setValue(v);
-
+ this.inputEl.dom.value = this.getValue();
+ this.validate();
return;
},
+ getDay : function()
+ {
+ return this.dayField.getValue();
+ },
+
+ getMonth : function()
+ {
+ return this.monthField.getValue();
+ },
+
+ getYear : function()
+ {
+ return this.yearField.getValue();
+ },
+
getValue : function()
{
var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
return date;
},
+ reset : function()
+ {
+ this.setDay('');
+ this.setMonth('');
+ this.setYear('');
+ this.inputEl.dom.value = '';
+ this.validate();
+ return;
+ },
+
validate : function()
{
var d = this.dayField.validate();
}
this.fireEvent('invalid', this, msg);
+ },
+
+ clearInvalid : function()
+ {
+ var label = this.el.select('label', true).first();
+ var icon = this.el.select('i.fa-star', true).first();
+
+ if(label && icon){
+ icon.remove();
+ }
+
+ this.fireEvent('valid', this);
+ },
+
+ getName: function()
+ {
+ return this.name;
}
});
projects / roojs1 / blobdiff