datefield ready, need tests

src/inputs/date/date.js

@@ -26,32 +26,37 @@ $(function(){
 
     var Date = function (options) {
         this.init('date', options, Date.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({}, Date.defaults.datepicker, directOptions, options.datepicker);
-
-        //by default viewformat equals to format
-        if(!this.options.viewformat) {
-            this.options.viewformat = this.options.datepicker.format;
-        }  
-        
-        //language
-        this.options.datepicker.language = this.options.datepicker.language || 'en'; 
-        
-        //store DPglobal
-        this.dpg = $.fn.datepicker.DPGlobal; 
-        
-        //store parsed formats
-        this.parsedFormat = this.dpg.parseFormat(this.options.datepicker.format);
-        this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);
+        this.initPicker();
     };
 
     $.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);    
     
     $.extend(Date.prototype, {
+        initPicker: function() {
+            //'format' is set directly from settings or data-* attributes
+
+            //by default viewformat equals to format
+            if(!this.options.viewformat) {
+                this.options.viewformat = this.options.format;
+            }
+            
+            //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({}, Date.defaults.datepicker, this.options.datepicker, {
+                format: this.options.viewformat
+            });
+            
+            //language
+            this.options.datepicker.language = this.options.datepicker.language || 'en'; 
+
+            //store DPglobal
+            this.dpg = $.fn.datepicker.DPGlobal; 
+
+            //store parsed formats
+            this.parsedFormat = this.dpg.parseFormat(this.options.format);
+            this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);            
+        },
+        
         render: function () {
             Date.superclass.render.call(this);
             this.$input.datepicker(this.options.datepicker);

src/inputs/date/datefield.js

@@ -0,0 +1,85 @@
+/**
+Bootstrap datefield input - modification for inline mode.
+Shows normal <input type="text"> and binds popup datepicker.  
+Automatically shown in inline mode.
+**/
+(function ($) {
+
+    var DateField = function (options) {
+        this.init('datefield', options, DateField.defaults);
+        this.initPicker();
+    };
+
+    $.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);    
+    
+    $.extend(DateField.prototype, {
+        render: function () {
+            this.$input = $(this.options.tpl);
+            this.$field = this.$input.find('input');
+            
+            if(this.options.inputclass) {
+                this.$field.addClass(this.options.inputclass); 
+            }
+            
+            if (this.options.placeholder) {
+                this.$field.attr('placeholder', this.options.placeholder);
+            } 
+            
+            this.$input.datepicker(this.options.datepicker);
+            
+            //need to disable original event handlers
+            this.$field.off('focus keyup keydown');
+            
+            //shadow update value of datepicker
+            this.$field.keyup($.proxy(function(){
+               this.$input.data('datepicker').date = this.input2value();  
+            }, this));
+        },   
+        
+       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.$input.datepicker('update');
+       },
+        
+       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  
+       }
+    });
+    
+    DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
+        /**
+        @property tpl 
+        @default <input type="text">
+        **/         
+        tpl:'<div class="input-append date"><input class="input-small" type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
+        /**
+        @property inputclass 
+        @default ''
+        **/         
+        inputclass: '',
+        datepicker: {autoclose: true}, 
+        clear: false
+    });
+    
+    $.fn.editabletypes.datefield = DateField;
+
+}(window.jQuery));