clear button in dateui

CHANGELOG.txt

@@ -3,7 +3,7 @@ X-editable changelog
        
 Version 1.1.0 wip
 ----------------------------   
-[enh] 'clear' button added in date (vitalets)      
+[enh] 'clear' button added in date and dateui (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

@@ -56,4 +56,5 @@
 .editable-clear {
    float: right; 
    font-size: 0.9em;
+   text-decoration: none;
 }

src/inputs/dateui/dateui.js

@@ -52,6 +52,14 @@ $(function(){
         render: function () {
             DateUI.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) {
@@ -100,7 +108,11 @@ $(function(){
        },       
        
        activate: function() {
-       }        
+       },
+       
+       clear:  function() {
+           this.$input.datepicker('setDate', null);
+       }   
 
     });
     
@@ -150,7 +162,16 @@ $(function(){
             firstDay: 0,
             changeYear: true,
             changeMonth: true
-        }
+        },
+        /**
+        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.dateui = DateUI;

test/unit/dateui.js

@@ -60,7 +60,7 @@ $(function () {
      
      test("viewformat, init by value", function () {
         var dview = '15/05/1984',
-            d = '1984-05-15',
+            d = '1984-05-15', 
             e = $('<a href="#" data-type="date" data-pk="1" data-weekstart="1" data-value="'+d+'"></a>').appendTo('#qunit-fixture').editable({
                 format: 'yyyy-mm-dd',
                 viewformat: 'dd/mm/yyyy'
@@ -80,6 +80,47 @@ $(function () {
         
         p.find('button[type=button]').click();
         ok(!p.is(':visible'), 'popover closed');      
-      });             
+      }); 
+      
+     asyncTest("clear button", function () {
+        var d = '15.05.1984',
+            f = 'dd.mm.yyyy',
+            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('.ui-datepicker').is(':visible'), 'datepicker exists');
+        
+        equal(frmt(e.data('editable').value, f), d, 'day set correct');
+        equal(p.find('a.ui-state-active').text(), 15, 'day shown correct');
+
+        var clear = p.find('.editable-clear');
+        equal(clear.text(), 'abc', 'clear link shown');
+
+        //click clear
+        clear.click();
+        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); 
+        
+     });                     
     
 });