sync

[roojs1] / Roo / bootstrap / DateSplitField.js

diff --git a/Roo/bootstrap/DateSplitField.js b/Roo/bootstrap/DateSplitField.js
index 7fecbf2..421a119 100644 (file)
--- a/Roo/bootstrap/DateSplitField.js
+++ b/Roo/bootstrap/DateSplitField.js
@@ -22,6 +22,10 @@
  * @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
@@ -79,6 +83,10 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
     monthFormat : 'm',
     yearFormat : 'Y',
     isFormField : true,
+    labellg : 0,
+    labelmd : 0,
+    labelsm : 0,
+    labelxs : 0,
     
     getAutoCreate : function()
     {
@@ -93,10 +101,14 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
                     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 : [
@@ -105,13 +117,48 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
                         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);
         
@@ -127,7 +174,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
     {
         var _this = this;
         
-        Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
+        Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
         
         this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
         
@@ -141,7 +188,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
             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',
@@ -156,7 +203,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
             listeners : {
                 select : function (_self, record, index)
                 {
-                    _this.validate();
+                    _this.setValue(_this.getValue());
                 }
             }
         });
@@ -178,7 +225,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
                 },
                 select : function (_self, oldvalue, newvalue)
                 {
-                    _this.validate();
+                    _this.setValue(_this.getValue());
                 }
             }
         });
@@ -195,7 +242,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
             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',
@@ -210,7 +257,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
             listeners : {
                 select : function (_self, record, index)
                 {
-                    _this.validate();
+                    _this.setValue(_this.getValue());
                 }
             }
         });
@@ -227,6 +274,7 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
         var d = Date.parseDate(v, f);
         
         if(!d){
+            this.validate();
             return;
         }
         
@@ -242,21 +290,42 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
     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;
@@ -266,6 +335,16 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
         return date;
     },
     
+    reset : function()
+    {
+        this.setDay('');
+        this.setMonth('');
+        this.setYear('');
+        this.inputEl.dom.value = '';
+        this.validate();
+        return;
+    },
+    
     validate : function()
     {
         var d = this.dayField.validate();