diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index c15f408..d9b3c8b 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/src/editable-form/editable-form.css b/src/editable-form/editable-form.css
index 7a5b7b0..6c18918 100644
--- a/src/editable-form/editable-form.css
+++ b/src/editable-form/editable-form.css
@@ -56,4 +56,5 @@
.editable-clear {
float: right;
font-size: 0.9em;
+ text-decoration: none;
}
\ No newline at end of file
diff --git a/src/inputs/dateui/dateui.js b/src/inputs/dateui/dateui.js
index 266d15c..986726a 100644
--- a/src/inputs/dateui/dateui.js
+++ b/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: '× clear'
});
$.fn.editableform.types.dateui = DateUI;
diff --git a/test/unit/dateui.js b/test/unit/dateui.js
index 1fc14fa..91c22fb 100644
--- a/test/unit/dateui.js
+++ b/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);
+
+ });
});
\ No newline at end of file