allow string based values for comboboxarray
[roojs1] / Roo / form / MonthField.js
index 5a429c3..05b45f8 100644 (file)
@@ -26,7 +26,7 @@ Roo.form.MonthField = function(config){
         /**
          * @event select
          * Fires when a date is selected
-            * @param {Roo.form.DateField} combo This combo box
+            * @param {Roo.form.MonthFieeld} combo This combo box
             * @param {Date} date The date selected
             */
         'select' : true
@@ -34,15 +34,21 @@ Roo.form.MonthField = function(config){
     });
     
     
-    if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
-    if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
+    if(typeof this.minValue == "string") {
+        this.minValue = this.parseDate(this.minValue);
+    }
+    if(typeof this.maxValue == "string") {
+        this.maxValue = this.parseDate(this.maxValue);
+    }
     this.ddMatch = null;
     if(this.disabledDates){
         var dd = this.disabledDates;
         var re = "(?:";
         for(var i = 0; i < dd.length; i++){
             re += dd[i];
-            if(i != dd.length-1) re += "|";
+            if(i != dd.length-1) {
+                re += "|";
+            }
         }
         this.ddMatch = new RegExp(re + ")");
     }
@@ -54,13 +60,13 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
      * The default date format string which can be overriden for localization support.  The format must be
      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
      */
-    format : "M-Y",
+    format : "M Y",
     /**
      * @cfg {String} altFormats
      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
      */
-    altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
+    altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
     /**
      * @cfg {Array} disabledDays
      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
@@ -110,7 +116,7 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
      */
     minText : "The date in this field must be equal to or after {0}",
     /**
-     * @cfg {String} maxText
+     * @cfg {String} maxTextf
      * The error text to display when the date in the cell is after maxValue (defaults to
      * 'The date in this field must be before {maxValue}').
      */
@@ -133,16 +139,16 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
     /**
      * @cfg {Boolean} useIso
      * if enabled, then the date field will use a hidden field to store the 
-     * real value as iso formated date. default (false)
+     * real value as iso formated date. default (true)
      */ 
-    useIso : false,
+    useIso : true,
     /**
      * @cfg {String/Object} autoCreate
      * A DomHelper element spec, or true for a default element spec (defaults to
      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
      */ 
     // private
-    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
     
     // private
     hiddenField: false,
@@ -168,7 +174,7 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
     validateValue : function(value)
     {
         value = this.formatDate(value);
-        if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
+        if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
             return false;
         }
         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
@@ -189,7 +195,7 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
             return false;
         }
-        if(this.disabledDays){
+        /*if(this.disabledDays){
             var day = value.getDay();
             for(var i = 0; i < this.disabledDays.length; i++) {
                if(day === this.disabledDays[i]){
@@ -198,11 +204,13 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
                }
             }
         }
+        */
         var fvalue = this.formatDate(value);
-        if(this.ddMatch && this.ddMatch.test(fvalue)){
+        /*if(this.ddMatch && this.ddMatch.test(fvalue)){
             this.markInvalid(String.format(this.disabledDatesText, fvalue));
             return false;
         }
+        */
         return true;
     },
 
@@ -218,14 +226,16 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
      */
     getValue : function(){
         
+        
+        
         return  this.hiddenField ?
                 this.hiddenField.value :
-                this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
+                this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
     },
 
     /**
      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
-     * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
+     * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
      * (the default format used is "m/d/y").
      * <br />Usage:
      * <pre><code>
@@ -233,30 +243,46 @@ Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
 
 //Pass a date object:
 var dt = new Date('5/4/06');
-dateField.setValue(dt);
+monthField.setValue(dt);
 
 //Pass a date string (default format):
-dateField.setValue('5/4/06');
+monthField.setValue('5/4/06');
 
 //Pass a date string (custom format):
-dateField.format = 'Y-m-d';
-dateField.setValue('2006-5-4');
+monthField.format = 'Y-m-d';
+monthField.setValue('2006-5-4');
 </code></pre>
      * @param {String/Date} date The date or valid date string
      */
     setValue : function(date){
+        Roo.log('month setValue' + date);
+        // can only be first of month..
+        
+        var val = this.parseDate(date);
+        
         if (this.hiddenField) {
             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
         }
-        Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+        Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
+        this.value = this.parseDate(date);
     },
 
     // private
     parseDate : function(value){
         if(!value || value instanceof Date){
+            value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
             return value;
         }
         var v = Date.parseDate(value, this.format);
+        if (!v && this.useIso) {
+            v = Date.parseDate(value, 'Y-m-d');
+        }
+        if (v) {
+            // 
+            v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
+        }
+        
+        
         if(!v && this.altFormats){
             if(!this.altFormatsArray){
                 this.altFormatsArray = this.altFormats.split("|");
@@ -299,6 +325,7 @@ dateField.setValue('2006-5-4');
         }
         if(this.menu == null){
             this.menu = new Roo.menu.DateMenu();
+           
         }
         
         Roo.apply(this.menu.picker,  {
@@ -309,47 +336,58 @@ dateField.setValue('2006-5-4');
             disabledDatesRE : this.ddMatch,
             disabledDatesText : this.disabledDatesText,
             
-            format : this.format,
+            format : this.useIso ? 'Y-m-d' : this.format,
             minText : String.format(this.minText, this.formatDate(this.minValue)),
             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
             
         });
-        
-        this.menu.on(Roo.apply({}, this.menuListeners, {
+         this.menu.on(Roo.apply({}, this.menuListeners, {
             scope:this
         }));
+       
         
         var m = this.menu;
         var p = m.picker;
-        p.setValue(this.getValue() || new Date());
-        m.show(this.el, "tl-bl?");
-        
-        (function() {
-            Roo.log("show month");
-            p.showMonthPicker();
-        }).defer(100);
-        
         
+        // hide month picker get's called when we called by 'before hide';
         
+        var ignorehide = true;
         p.hideMonthPicker  = function(disableAnim){
-            if(this.monthPicker){
+            if (ignorehide) {
+                return;
+            }
+             if(this.monthPicker){
+                Roo.log("hideMonthPicker called");
                 if(disableAnim === true){
                     this.monthPicker.hide();
                 }else{
                     this.monthPicker.slideOut('t', {duration:.2});
+                    p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
+                    p.fireEvent("select", this, this.value);
+                    m.hide();
                 }
             }
-            p.setValue(new Date().clearTime());
-            p.fireEvent("select", this, this.value);
-            
-            Roo.log(m.picker.mpSelMonth);
-            Roo.log(m.picker.mpSelYear);
-            m.hide();
         }
         
+        Roo.log('picker set value');
+        Roo.log(this.getValue());
+        p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
+        m.show(this.el, 'tl-bl?');
+        ignorehide  = false;
+        // this will trigger hideMonthPicker..
         
         
+        // hidden the day picker
+        Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
+        
+        
+        
+      
+        
+        p.showMonthPicker.defer(100, p);
+    
         
+       
     },
 
     beforeBlur : function(){