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