date-ui-field ready, need tests

src/editable-form/editable-form-utils.js

@@ -155,13 +155,25 @@
             var TypeConstructor, typeOptions, input,
                 type = options.type;
             
-            if(type === 'date' && options.mode === 'inline') {
+                //`date` is some kind of virtual type that is transformed to one of exact types
-               if($.fn.editabletypes.datefield) {
+                //depending on mode and core lib
-                   type = 'datefield';
+                if(type === 'date') {
-               } else if($.fn.editabletypes.dateuifield) {
+                    //inline
-                   type = 'dateuifield';
+                    if(options.mode === 'inline') {
-               } 
+                        if($.fn.editabletypes.datefield) {
-            }
+                            type = 'datefield';
+                        } else if($.fn.editabletypes.dateuifield) {
+                            type = 'dateuifield';
+                        }
+                    //popup
+                    } else {
+                        if($.fn.editabletypes.date) {
+                            type = 'date';
+                        } else if($.fn.editabletypes.dateui) {
+                            type = 'dateui';
+                        }
+                    } 
+                }
                 
             //create input of specified type. Input will be used for converting value, not in form
             if(typeof $.fn.editabletypes[type] === 'function') {

src/editable-form/editable-form.js

@@ -60,7 +60,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
             @param {Object} event event object
             **/            
             this.$div.triggerHandler('rendering');
-
+            
             //render input
             $.when(this.input.render())
             .then($.proxy(function () {

src/inputs/abstract.js

@@ -76,7 +76,7 @@ To create your own input you can inherit from this class.
        }, 
        
        /**
-        Converts string received from server into value.
+        Converts string received from server into value. Usually from `data-value` attribute.
         
         @method str2value(str) 
         @param {string} str
@@ -87,7 +87,7 @@ To create your own input you can inherit from this class.
        }, 
        
        /**
-        Converts value for submitting to server
+        Converts value for submitting to server. Result can be string or object.
         
         @method value2submit(value) 
         @param {mixed} value

src/inputs/date/datefield.js

@@ -38,16 +38,8 @@ Automatically shown in inline mode.
             
         },   
         
-       value2str: function(value) {
-            return value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
-       }, 
-       
-       value2submit: function(value) {
-            return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : null;
-       },                
-        
        value2input: function(value) {
-           this.$field.val(this.value2str(value));
+           this.$field.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
            this.$input.datepicker('update');
        },
         
@@ -70,7 +62,7 @@ Automatically shown in inline mode.
     DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
         /**
         @property tpl 
-        @default <input type="text">
+        @default 
         **/         
         tpl:'<div class="input-append date"><input class="input-small" type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
         /**
@@ -79,13 +71,14 @@ Automatically shown in inline mode.
         **/         
         inputclass: '',
         
+        /* datepicker config */
         datepicker: {
             weekStart: 0,
             startView: 0,
-            autoclose: true,
+            autoclose: true
-            keyboardNavigation: false
         },
-         
+        
+        /* disable clear link */ 
         clear: false
     });
     

src/inputs/dateui/dateui.js

@@ -26,30 +26,29 @@ $(function(){
 
     var DateUI = function (options) {
         this.init('dateui', options, DateUI.defaults);
-        
+        this.initPicker(options, DateUI.defaults);
-        //set popular options directly from settings or data-* attributes
-        var directOptions =  $.fn.editableutils.sliceObj(this.options, ['format']);
-
-        //overriding datepicker config (as by default jQuery extend() is not recursive)
-        this.options.datepicker = $.extend({}, DateUI.defaults.datepicker, directOptions, options.datepicker);
-        
-        //by default viewformat equals to format
-        if(!this.options.viewformat) {
-            this.options.viewformat = this.options.datepicker.format;
-        }
-        
-        //correct formats: replace yyyy with yy
-        this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy'); 
-        this.options.datepicker.format = this.options.datepicker.format.replace('yyyy', 'yy'); 
-        
-        //copy format to dateFormat (dateFormat option required for ui datepicker).
-        //This allows common option 'format' for all datepickers
-        this.options.datepicker.dateFormat = this.options.datepicker.format;        
     };
 
     $.fn.editableutils.inherit(DateUI, $.fn.editabletypes.abstractinput);    
     
     $.extend(DateUI.prototype, {
+        initPicker: function(options, defaults) {
+            //by default viewformat equals to format
+            if(!this.options.viewformat) {
+                this.options.viewformat = this.options.format;
+            }
+            
+            //correct formats: replace yyyy with yy (for compatibility with bootstrap datepicker)
+            this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy'); 
+            this.options.format = this.options.format.replace('yyyy', 'yy');             
+            
+            //overriding datepicker config (as by default jQuery extend() is not recursive)
+            //since 1.4 datepicker internally uses viewformat instead of format. Format is for submit only
+            this.options.datepicker = $.extend({}, defaults.datepicker, options.datepicker, {
+                dateFormat: this.options.viewformat
+            });                        
+        },
+        
         render: function () {
             DateUI.superclass.render.call(this);
             this.$input.datepicker(this.options.datepicker);
@@ -83,7 +82,7 @@ $(function(){
         },   
         
         value2str: function(value) {
-           return $.datepicker.formatDate(this.options.datepicker.dateFormat, value);
+           return $.datepicker.formatDate(this.options.format, value);
        }, 
        
        str2value: function(str) {
@@ -94,13 +93,13 @@ $(function(){
            //if string does not match format, UI datepicker throws exception
            var d;
            try {
-              d = $.datepicker.parseDate(this.options.datepicker.dateFormat, str);
+              d = $.datepicker.parseDate(this.options.format, str);
            } catch(e) {}
            
            return d;
        }, 
        
-       value2submit: function(value) {
+       value2submit: function(value) { 
            return this.value2str(value);
        },                     
 
@@ -189,6 +188,5 @@ $(function(){
     });   
 
     $.fn.editabletypes.dateui = DateUI;
-    $.fn.editabletypes.date = DateUI;
 
 }(window.jQuery));

src/inputs/dateui/dateuifield.js

@@ -0,0 +1,80 @@
+/**
+jQuery UI datefield input - modification for inline mode.
+Shows normal <input type="text"> and binds popup datepicker.  
+Automatically shown in inline mode.
+**/
+(function ($) {
+
+    var DateUIField = function (options) {
+        this.init('dateuifield', options, DateUIField.defaults);
+        this.initPicker(options, DateUIField.defaults);
+    };
+
+    $.fn.editableutils.inherit(DateUIField, $.fn.editabletypes.dateui);    
+    
+    $.extend(DateUIField.prototype, {
+        render: function () {
+            $.fn.editabletypes.dateui.superclass.render.call(this);
+            this.$field = this.$input.find('input'); 
+            this.$field.datepicker(this.options.datepicker);
+
+            /*
+            if(this.options.clear) {
+                this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.clear();
+                }, this));
+            } 
+            */           
+       },
+      
+       value2input: function(value) {
+           this.$field.val($.datepicker.formatDate(this.options.viewformat, value));
+       },
+        
+       input2value: function() { 
+           return this.html2value(this.$field.val());
+       },        
+        
+       activate: function() {
+           if(this.$field.is(':visible')) {
+               this.$field.focus();
+               $.fn.editableutils.setCursorPosition(this.$field.get(0), this.$field.val().length);
+           }
+       },
+       
+       autosubmit: function() {
+         //reset autosubmit to empty  
+       }
+    });
+    
+    DateUIField.defaults = $.extend({}, $.fn.editabletypes.dateui.defaults, {
+        /**
+        @property tpl 
+        @default <input type="text">
+        **/         
+        tpl: '<div><input type="text" /></div>',
+        /**
+        @property inputclass 
+        @default ''
+        **/         
+        inputclass: '',
+        
+        /* datepicker config */
+        datepicker: {
+            showOn: "button",
+            buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
+            buttonImageOnly: true,            
+            firstDay: 0,
+            changeYear: true,
+            changeMonth: true
+        },
+        
+        /* disable clear link */ 
+        clear: false
+    });
+    
+    $.fn.editabletypes.dateuifield = DateUIField;
+
+}(window.jQuery));

test/loader.js

@@ -95,6 +95,7 @@ define(function () {
                     'jqueryui/js/jquery-ui-1.9.1.custom'
                 ],                      
                 'inputs/dateui/dateui': ['inputs/abstract'],
+                'inputs/dateui/dateuifield': ['inputs/dateui/dateui'],
 
                 //plain
                 //'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
@@ -136,7 +137,7 @@ define(function () {
                 shim['element/editable-element'].deps.push('containers/editable-popover');
             } else if(f === 'jqueryui') {
                 //jqueryui
-                shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui');
+                shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');
                 shim['element/editable-element'].deps.push('editable-form/editable-form-jqueryui');
                 shim['element/editable-element'].deps.push('containers/editable-tooltip');
             } else {