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);
+ });
+ });
+});