How to make it work in a simple form

[wasinger]

When I first tried the demo and played around with this polyfill in my own form, my impression was "it doesn't work at all" and was about to look for another datepicker. The problems were:

• When submitting the form, the date value was in the wrong format (localized instead of yyyy-mm-dd)
• when trying to change the date in the input field manually, the displayed date value is not updated by the picker any more
• When trying the demo in a browser with a native date picker (Chrome) both pickers interfere badly

But after looking through previous tickets and the source code, I found that this is mainly a documentation problem. Such problems a new user stumbles upon when trying the demo should be mentioned in the README.

So, for the records, here is what I needed to do to make it work as expected:

• In order to not create the polyfilled datepicker in browsers that support date inputs natively, remove the data-nodep-date-input-polyfill-debug attribute from the script tag in the demo HTML page.

• In order to prevent manual typing in the input field, and submit the date in the standard format when submitting the form via the classic submit button, add the following Javascript somewhere in the end of your page:

var dateinputs = document.querySelectorAll('input[type="date"]');
for (var i=0; i<dateinputs.length; i++) {
     var el = dateinputs[i];
     el.addEventListener('keydown', function(e) {
         if (el.hasAttribute('data-has-picker')) e.preventDefault();
     });
     if (el.form) {
         el.form.addEventListener('submit', function(e) {
              if (el.hasAttribute('data-has-picker')) el.setAttribute('value', el.value);
         });
     }
}

[brianblakely]

Thanks so much for your detailed feedback. I'll need to expand the "Usage Notes" section of the documentation so as to help a wider variety of use cases get up and running.

Regarding the "demo HTML page," the demo is here, driven by the gh-pages branch, whereas the HTML to which you are referring is only for development testing of the library itself.

[brianblakely]

More documentation has been added in published version v4.9.1. Thank you again!