clear link in date input

CHANGELOG.txt

@@ -1,8 +1,10 @@
 X-editable changelog
 =============================
        
-Version 1.0.2 wip
+Version 1.1.0 wip
 ----------------------------   
+[enh] 'clear' button added in date (vitalets)      
+[enh] form template changed: added DIV.editable-input, DIV.editable.buttons and $.fn.editableform buttons (vitalets)      
 [enh] new input type: checklist (vitalets)      
 [enh] updated docs: inputs dropdown menu, global templates section (vitalets)      
                             

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>'+
+      $.fn.editableform.buttons = '<button type="submit">ok</button>'+
-                                  '<button type="button">Cancel</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);
             }
         }  
     });

test/unit/date.js

@@ -14,7 +14,7 @@ $(function () {
        return dpg.formatDate(date, dpg.parseFormat(format), 'en');  
     }
      
-    asyncTest("popover should contain datepicker with value and save new entered date", function () {
+    asyncTest("container should contain datepicker with value and save new entered date", function () {
         expect(9);
         
         $.fn.editableform.types.date.defaults.datepicker.weekStart = 1;
@@ -130,5 +130,47 @@ $(function () {
         p.find('button[type=button]').click();
         ok(!p.is(':visible'), 'popover closed');      
       });
+      
+    asyncTest("clear button", function () {
+        var d = '15.05.1984',
+            e = $('<a href="#" data-type="date" data-pk="1" data-url="post-date-clear.php">'+d+'</a>').appendTo(fx).editable({
+                format: f,
+                clear: 'abc'
+            });
+                       
+          $.mockjax({
+              url: 'post-date-clear.php',
+              response: function(settings) {
+                  equal(settings.data.value, '', 'submitted value correct');            
+              }
+          });
+       
+        equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), d, 'value correct');
+            
+        e.click();
+        var p = tip(e);
+        ok(p.find('.datepicker').is(':visible'), 'datepicker exists');
+        
+        equal(frmt(e.data('editable').value, f), d, 'day set correct');
+        equal(p.find('td.day.active').text(), 15, 'day shown correct');
+
+        var clear = p.find('.editable-clear');
+        equal(clear.text(), 'abc', 'clear link shown');
+
+        //click clear
+        clear.click();
+        ok(!p.find('td.day.active').length, 'no active day');
+
+        p.find('form').submit();
+    
+        setTimeout(function() {          
+           ok(!p.is(':visible'), 'popover closed');
+           equal(e.data('editable').value, null, 'null saved to value');
+           equal(e.text(), e.data('editable').options.emptytext, 'empty text shown');
+           e.remove();    
+           start();  
+        }, timeout); 
+        
+     });        
    
 });