Loading before DOM content has laoded

From jcgertig#34

src/date-input-polyfill.js

@@ -11,15 +11,20 @@ const addPickers = () => {
   }
 }
 
-// Run the above code on any <input type="date"> in the document, also on dynamically created ones.
-addPickers()
-
-document.addEventListener('DOMContentLoaded', () => {
+const init = () => {
+  // Run the above code on any <input type="date"> in the document, also on dynamically created ones.
   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()
+  })
+}
 
-// 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()
-})
+if (document.readyState !== 'loading') {
+  init()
+} else {
+  document.addEventListener('DOMContentLoaded', () => {
+    init()
+  })
+}

src/input.js

@@ -1,9 +1,16 @@
-import thePicker from './picker.js'
 import locales from './locales.js'
 import dateFormat from 'dateformat'
+import Picker from './picker.js'
+
+// This is a singleton.
+let thePicker
 
 export default class Input {
   constructor (input) {
+    if (!thePicker) {
+      thePicker = new Picker()
+    }
+
     this.element = input
     this.element.setAttribute('data-has-picker', '')
 

src/picker.js

@@ -1,10 +1,5 @@
 class Picker {
   constructor () {
-    // This is a singleton.
-    if (window.thePicker) {
-      return window.thePicker
-    }
-
     this.date = new Date()
     this.input = null
     this.isOpen = false
@@ -328,6 +323,4 @@ class Picker {
   }
 }
 
-window.thePicker = new Picker()
-
-export default window.thePicker
+export default Picker