Feature: support conditional import

README.md

@@ -57,6 +57,16 @@ include it anywhere in your HTML.
 <script src="node_modules/configurable-date-input-polyfill/dist/configurable-date-input-polyfill.dist.js"></script>
 ```
 
+* **ES modules:**
+```js
+import supportsDateInput from 'configurable-date-input-polyfill/src';
+
+if (!supportsDateInput()) {
+  import('configurable-date-input-polyfill/src/add-picker')
+    .then(({ default: addPickerToInputs }) => addPickerToInputs([yourInputElement]));
+}
+```
+
 
 * This package supports **AMD**.
 

src/add-picker.d.ts

@@ -0,0 +1 @@
+export default function addPickerToInputs(dateInputs: HTMLElement[]): void;

src/add-picker.js

@@ -0,0 +1,49 @@
+import {
+    showPicker,
+    getDateRange,
+    setupKeyEvents,
+    getLocaleLabels,
+    returnDateFormat,
+    returnSelectedLocale,
+    setupValueProperties,
+    returnSelectedMinDate,
+    returnSelectedMaxDate,
+    createMutationObserver,
+    returnForcePolyfillFlag,
+    returnSelectedFirstDayOfWeek,
+} from './inputUtilities';
+
+export default function addPickerToInputs(dateInputs) {
+    for (let i = 0; i < dateInputs.length; i += 1) {
+        const htmlElement = dateInputs[i];
+        const locale = returnSelectedLocale(htmlElement);
+        const dateFormat = returnDateFormat(htmlElement);
+        const minDateAttribute = returnSelectedMinDate(htmlElement);
+        const maxDateAttribute = returnSelectedMaxDate(htmlElement);
+        const dateRange = getDateRange(minDateAttribute, maxDateAttribute);
+        const localeLabels = getLocaleLabels(locale);
+        const firstDayOfWeek = returnSelectedFirstDayOfWeek(htmlElement);
+        const forcePolyfill = returnForcePolyfillFlag(htmlElement);
+
+        if (forcePolyfill) htmlElement.setAttribute('type', 'text');
+
+        const dateInput = {
+            htmlElement,
+            firstDayOfWeek,
+            dateFormat,
+            dateRange,
+            locale,
+            localeLabels,
+            minDateAttribute,
+            maxDateAttribute,
+        };
+
+        htmlElement.setAttribute('data-has-picker', '');
+        htmlElement.addEventListener('focus', () => showPicker(dateInput));
+        htmlElement.addEventListener('mouseup', () => showPicker(dateInput));
+
+        createMutationObserver(dateInput);
+        setupValueProperties(dateInput);
+        setupKeyEvents(dateInput);
+    }
+}

src/configurable-date-input-polyfill.js

@@ -1,64 +1,8 @@
 import './configurable-date-input-polyfill.scss';
-import {
-    showPicker,
-    getDateRange,
-    setupKeyEvents,
-    getLocaleLabels,
-    returnDateFormat,
-    returnSelectedLocale,
-    setupValueProperties,
-    returnSelectedMinDate,
-    returnSelectedMaxDate,
-    createMutationObserver,
-    returnForcePolyfillFlag,
-    returnSelectedFirstDayOfWeek,
-} from './inputUtilities';
 
-function supportsDateInput() {
-    // Return false if the browser does not support input[type="date"].
-    const input = document.createElement('input');
-    input.setAttribute('type', 'date');
+import supportsDateInput from './index';
 
-    const notADateValue = 'not-a-date';
-    input.setAttribute('value', notADateValue);
-
-    return !(input.value === notADateValue);
-}
-
-function addPickerToInputs(dateInputs) {
-    for (let i = 0; i < dateInputs.length; i += 1) {
-        const htmlElement = dateInputs[i];
-        const locale = returnSelectedLocale(htmlElement);
-        const dateFormat = returnDateFormat(htmlElement);
-        const minDateAttribute = returnSelectedMinDate(htmlElement);
-        const maxDateAttribute = returnSelectedMaxDate(htmlElement);
-        const dateRange = getDateRange(minDateAttribute, maxDateAttribute);
-        const localeLabels = getLocaleLabels(locale);
-        const firstDayOfWeek = returnSelectedFirstDayOfWeek(htmlElement);
-        const forcePolyfill = returnForcePolyfillFlag(htmlElement);
-
-        if (forcePolyfill) htmlElement.setAttribute('type', 'text');
-
-        const dateInput = {
-            htmlElement,
-            firstDayOfWeek,
-            dateFormat,
-            dateRange,
-            locale,
-            localeLabels,
-            minDateAttribute,
-            maxDateAttribute,
-        };
-
-        htmlElement.setAttribute('data-has-picker', '');
-        htmlElement.addEventListener('focus', () => showPicker(dateInput));
-        htmlElement.addEventListener('mouseup', () => showPicker(dateInput));
-
-        createMutationObserver(dateInput);
-        setupValueProperties(dateInput);
-        setupKeyEvents(dateInput);
-    }
-}
+import addPickerToInputs from './add-picker';
 
 function addPolyfillPickers() {
     addPickerToInputs(document.querySelectorAll('input[type="text"].date-polyfill:not([data-has-picker])'));

src/index.d.ts

@@ -0,0 +1 @@
+export default function supportsDateInput(): boolean;

src/index.js

@@ -0,0 +1,10 @@
+export default function supportsDateInput() {
+    // Return false if the browser does not support input[type="date"].
+    const input = document.createElement('input');
+    input.setAttribute('type', 'date');
+
+    const notADateValue = 'not-a-date';
+    input.setAttribute('value', notADateValue);
+
+    return !(input.value === notADateValue);
+}