Add support for loading before DOMContentLoaded

date-input-polyfill.js

@@ -9,15 +9,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();
+  });
+}

input.js

@@ -1,9 +1,16 @@
-import thePicker from './picker.js';
 import locales from './locales.js';
 import dateFormat from './dateformat.js';
+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`, ``);
 

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;
@@ -329,6 +324,4 @@ class Picker {
   }
 }
 
-window.thePicker = new Picker();
-
-export default window.thePicker;
+export default Picker;