brianblakely / nodep-date-input-polyfill

Automatically adds datepickers to input[type=date] on IE, macOS Safari, and legacy browsers.
https://www.npmjs.com/package/nodep-date-input-polyfill
MIT License
96 stars 137 forks source link

Run on dynamically added inputs before user clicks? #54

Open dartanian300 opened 7 years ago

dartanian300 commented 7 years ago

Currently, if a date field is added to the DOM with an existing value, the picker does not format the date until the user clicks on it. Since the picker requires the format of 'yyyy-MM-dd', the value jumps from that format to whatever the local version is (in my case it's MM/dd/yyyy). This is a bit confusing for users. Is there anyway to initialize the polyfill on elements before they're added to the DOM or immediately after?

I'm also using jQuery if that matters.

brianblakely commented 7 years ago

This isn't possible right now. It should be added, but in the meantime you'll need to change the display value yourself:

const val = input.value.split(`-`);
input.setAttribute(`value`, `${val[1]}/${val[2]}/${val[0]}`);
dartanian300 commented 7 years ago

@brianblakely is the input you're referring to a reference to the HTML input? If so, that seems to break the polyfill.

brianblakely commented 7 years ago

There must be something else happening; I tested this suggestion. Would you kindly send a demonstration of the issue?

dartanian300 commented 7 years ago

@brianblakely It appears to be working now. I was using jQuery to accomplish the same thing and I believe it was causing the issue. Using the exact fix you gave works great!

Sorry for the confusion.

brianblakely commented 7 years ago

Glad that worked! "Manual" usage will still land at some point.