diff --git a/js/datepicker.js b/js/datepicker.js index 2de6e8794a..e5f6dbc70f 100644 --- a/js/datepicker.js +++ b/js/datepicker.js @@ -245,7 +245,8 @@ if (this.options.container) { const optEl = this.options.container; - this.options.container = (optEl instanceof HTMLElement?optEl:document.querySelector(optEl)); + this.options.container = + optEl instanceof HTMLElement ? optEl : document.querySelector(optEl); this.$modalEl.appendTo(this.options.container); } else { this.$modalEl.insertBefore(this.el); @@ -263,6 +264,10 @@ toString(format) { format = format || this.options.format; + if (typeof format === 'function') { + return format(this.date); + } + if (!Datepicker._isDate(this.date)) { return ''; } diff --git a/pug/page-contents/pickers_content.html b/pug/page-contents/pickers_content.html index be7ae2b161..0f922cd870 100644 --- a/pug/page-contents/pickers_content.html +++ b/pug/page-contents/pickers_content.html @@ -57,9 +57,9 @@
Options
format - String + String || Function 'mmm dd, yyyy' - The date output format for the input field value. + The date output format for the input field value or a function taking the date and outputting the formatted date string. parse diff --git a/tests/spec/datepicker/datepickerFixture.html b/tests/spec/datepicker/datepickerFixture.html new file mode 100644 index 0000000000..6cdf2f3743 --- /dev/null +++ b/tests/spec/datepicker/datepickerFixture.html @@ -0,0 +1,6 @@ +
+
+ + +
+
diff --git a/tests/spec/datepicker/datepickerSpec.js b/tests/spec/datepicker/datepickerSpec.js new file mode 100644 index 0000000000..92a2d46dba --- /dev/null +++ b/tests/spec/datepicker/datepickerSpec.js @@ -0,0 +1,90 @@ +describe('Datepicker Plugin', function() { + beforeEach(async function() { + await XloadFixtures(['datepicker/datepickerFixture.html']); + M.Datepicker.init(document.querySelectorAll('.datepicker')); + }); + afterEach(function() { + XunloadFixtures(); + }); + + describe('Datepicker', function() { + var normalDropdown; + + beforeEach(function() { + // browserSelect = $('select.normal'); + }); + + it('should open and close programmatically', function(done) { + const input = document.querySelector('#datepickerInput'); + const modal = document.querySelector('.datepicker-modal'); + + expect(modal).toBeHidden('Should be hidden before datepicker input is focused.'); + + M.Datepicker.getInstance(input).open(); + + setTimeout(function() { + expect(modal).toHaveClass( + 'open', + 'Datepicker modal should be shown after datepicker input is focused.' + ); + M.Datepicker.getInstance(input).close(); + + setTimeout(function() { + expect(modal).toNotHaveClass( + 'open', + 'Datepicker modal should be hidden after datepicker input is focused.' + ); + done(); + }, 400); + }, 400); + }); + + it('can have a string format', function(done) { + const input = document.querySelector('#datepickerInput'); + + const today = new Date(); + + M.Datepicker.init(input, { format: 'mm/dd/yyyy' }).open(); + M.Datepicker.getInstance(input).open(); + + setTimeout(function() { + const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); + day1.click(); + + setTimeout(function() { + const year = today.getFullYear(); + let month = today.getMonth() + 1; + month = month < 10 ? `0${month}` : month; + + const value = M.Datepicker.getInstance(input).toString(); + expect(value).toEqual(`${month}/01/${year}`); + done(); + }, 400); + }, 400); + }); + + it('can have a format function', function(done) { + const input = document.querySelector('#datepickerInput'); + + const today = new Date(); + const formatFn = (date) => `${date.getFullYear() - 100}-${date.getMonth() + 1}-99`; + + M.Datepicker.init(input, { format: formatFn }).open(); + M.Datepicker.getInstance(input).open(); + + setTimeout(function() { + const day1 = document.querySelector('.datepicker-modal button[data-day="1"]'); + day1.click(); + + setTimeout(function() { + const year = today.getFullYear() - 100; + const month = today.getMonth() + 1; + + const value = M.Datepicker.getInstance(input).toString(); + expect(value).toEqual(`${year}-${month}-99`); + done(); + }, 400); + }, 400); + }); + }); +});