return value on ie11 not iso format

README.md

@@ -1,26 +1,26 @@
-# nodep-date-input-polyfill
+# date-input-polyfill
 Just include this simple script and IE, Firefox, and OS X Safari will support `<input type="date">`, without any dependencies, not even jQuery!
 
 Support dynamically created inputs, so can be used in single page applications.
 
-Forked from [html5-simple-date-input-polyfill](https://www.npmjs.com/package/html5-simple-date-input-polyfill). Continuing as a separate project.
+Forked from [nodep-date-input-polyfill](https://github.com/brianblakely/nodep-date-input-polyfilll). Continuing as a separate project.
 
 ## Install
-`npm install --save nodep-date-input-polyfill`
+`npm install --save date-input-polyfill`
 
 Add to your project:
 
-* **Webpack/Browserify:** `require('nodep-date-input-polyfill');`
+* **Webpack/Browserify:** `require('date-input-polyfill');`
 
-    or alongside **Babel:** `import 'nodep-date-input-polyfill';`
+    or alongside **Babel:** `import 'date-input-polyfill';`
 
-* **Script Tag:** Copy `nodep-date-input-polyfill.dist.js` from `node_modules` and
+* **Script Tag:** Copy `date-input-polyfill.dist.js` from `node_modules` and
 include it anywhere in your HTML.
 
 * This package also supports **AMD**.
 
 ## Features
-* **Easily Stylable:** [These are the default styles](https://github.com/brianblakely/nodep-date-input-polyfill/blob/master/nodep-date-input-polyfill.scss),
+* **Easily Stylable:** [These are the default styles](https://github.com/jcgertig/date-input-polyfill/blob/master/date-input-polyfill.scss),
 which you may override with your own.
 
 * **Polyfills `valueAsDate` and `valueAsNumber`:**
@@ -35,6 +35,15 @@ increment/decrement the date by one day.
 
     `<input type="date" lang="en" />`
 
+* **Formatting:** Specify the display format by setting either the
+`date-format` or `data-date-format` attribute of the `input` element.  The default format is `yyyy-mm-dd`.
+[Available options list.](https://github.com/felixge/node-dateformat#mask-options)
+
+    `<input type="date" date-format="mm/dd/yyyy" />`
+
+    `<input type="date" data-date-format="mm/dd/yyyy" />`
+
+
 ## Contributing
 
 ### Local Development

date-input-polyfill.js

@@ -0,0 +1,23 @@
+import './date-input-polyfill.scss';
+import Input from './input.js';
+
+const addPickers = () => {
+  Input.addPickerToOtherInputs();
+  // Check if type="date" is supported.
+  if(!Input.supportsDateInput()) {
+    Input.addPickerToDateInputs();
+  }
+};
+
+// Run the above code on any <input type="date"> in the document, also on dynamically created ones.
+addPickers();
+
+document.addEventListener(`DOMContentLoaded`, () => {
+  addPickers();
+});
+
+// This is also on mousedown event so it will capture new inputs that might
+// be added to the DOM dynamically.
+document.querySelector(`body`).addEventListener(`mousedown`, () => {
+  addPickers();
+});

date-input-polyfill.scss

@@ -0,0 +1,112 @@
+@mixin reset() {
+  background: #fff;
+  color: #000;
+  text-shadow: none;
+  border: 0;
+  padding: 0;
+  height: auto;
+  width: auto;
+  line-height: normal;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+date-input-polyfill {
+  @include reset();
+  position: absolute !important;
+  text-align: center;
+  box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.22);
+  cursor: default;
+  z-index: 1;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  overflow: hidden;
+  display: block;
+
+  &[data-open="false"] {
+    visibility: hidden;
+    z-index: -100 !important;
+    top: 0;
+  }
+  &[data-open="true"] {
+    visibility: visible;
+  }
+
+  select, table, th, td {
+    @include reset();
+    box-shadow: none;
+    font-family: 'Lato', Helvetica, Arial, sans-serif;
+  }
+
+  select, button {
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid #DADFE1;
+    height: 24px;
+    vertical-align: top;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .monthSelect-wrapper {
+    width: 55%;
+    display: inline-block;
+  }
+
+  .yearSelect-wrapper {
+    width: 25%;
+    display: inline-block;
+  }
+
+  select {
+    width: 100%;
+
+    &:first-of-type {
+      border-right: 1px solid #DADFE1;
+      border-radius: 5px 0 0 0;
+      -moz-border-radius: 5px 0 0 0;
+      -webkit-border-radius: 5px 0 0 0;
+    }
+  }
+  button {
+    width: 20%;
+    background: #DADFE1;
+    border-radius: 0 5px 0 0;
+    -moz-border-radius: 0 5px 0 0;
+    -webkit-border-radius: 0 5px 0 0;
+
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  table {
+    border-collapse: separate !important;
+    border-radius: 0 0 5px 5px;
+    -moz-border-radius: 0 0 5px 5px;
+    -webkit-border-radius: 0 0 5px 5px;
+    overflow: hidden;
+    max-width: 280px;
+    width: 280px;
+  }
+
+  th, td {
+    width: 32px;
+    padding: 4px;
+    text-align: center;
+    box-sizing: content-box;
+  }
+  td[data-day] {
+    cursor: pointer;
+
+
+    &:hover {
+      background: #DADFE1;
+    }
+  }
+  [data-selected] {
+    font-weight: bold;
+    background: #D8EAF6;
+  }
+}