clear link in date input

src/editable-form/editable-form.css

@@ -51,4 +51,9 @@
 .editableform .editable-date {
     padding: 0; 
     margin: 0;
+}
+
+.editable-clear {
+   float: right; 
+   font-size: 0.9em;
 }

src/editable-form/editable-form.js

@@ -418,8 +418,8 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
       $.fn.editableform.loading = '<div class="editableform-loading"></div>';
       
       //buttons
-      $.fn.editableform.buttons = '<button type="submit">Ok</button>'+
-                                  '<button type="button">Cancel</button>';      
+      $.fn.editableform.buttons = '<button type="submit">ok</button>'+
+                                  '<button type="button">cancel</button>';      
       
       //error class attahced to control-group
       $.fn.editableform.errorGroupClass = null;  

src/inputs/abstract.js

@@ -18,6 +18,7 @@ To create your own input you should inherit from this class.
            this.type = type;
            this.options = $.extend({}, defaults, options); 
            this.$input = null;
+           this.$clear = null;
            this.error = null;
        },
        
@@ -28,14 +29,13 @@ To create your own input you should inherit from this class.
        **/       
        render: function() {
             this.$input = $(this.options.tpl);
-            this.$input.addClass('editable-input');
             if(this.options.inputclass) {
                 this.$input.addClass(this.options.inputclass); 
             }
             
             if (this.options.placeholder) {
                 this.$input.attr('placeholder', this.options.placeholder);
-            }            
+            }   
        }, 
 
        /**
@@ -111,6 +111,15 @@ To create your own input you should inherit from this class.
            if(this.$input.is(':visible')) {
                this.$input.focus();
            }
+       },
+       
+       /**
+        Creares input. 
+        
+        @method clear() 
+       **/        
+       clear:  function() {
+           this.$input.val(null);
        } 
     };
         

src/inputs/date/date.js

@@ -54,6 +54,14 @@ $(function(){
         render: function () {
             Date.superclass.render.call(this);
             this.$input.datepicker(this.options.datepicker);
+                        
+            if(this.options.clear) {
+                this.$clear = $('<a href="#">').addClass('editable-clear').html(this.options.clear).click($.proxy(function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.clear();
+                }, this));
+            }
         },
 
         value2html: function(value, element) {
@@ -82,7 +90,12 @@ $(function(){
        },       
        
        activate: function() {
-       }        
+       },
+       
+       clear:  function() {
+          this.$input.data('datepicker').date = null;
+          this.$input.find('.active').removeClass('active');
+       }                
 
     });
     
@@ -131,7 +144,16 @@ $(function(){
             weekStart: 0,
             startView: 0,
             autoclose: false
-        }
+        },
+        /**
+        Text shown as clear date button. 
+        If <code>false</code> clear button will not be rendered.
+        
+        @property clear 
+        @type boolean|string
+        @default 'x clear'         
+        **/
+        clear: '&times; clear'
     });   
 
     $.fn.editableform.types.date = Date;

src/inputs/text.js

@@ -25,8 +25,8 @@ $(function(){
     $.extend(Text.prototype, {
         activate: function() {
             if(this.$input.is(':visible')) {
-                $.fn.editableform.utils.setCursorPosition(this.$input.get(0), this.$input.val().length);
                 this.$input.focus();
+                $.fn.editableform.utils.setCursorPosition(this.$input.get(0), this.$input.val().length);
             }
         }  
     });