IMPR: Vanilla JS Datepicker

src/js/ui/datepicker.js

@@ -0,0 +1,13 @@
+import Events from '../_events';
+import Datepicker from 'vanillajs-datepicker/Datepicker';
+
+const init = () => {
+    document.querySelectorAll('.js-calendar').forEach((el, i) => {
+        const picker = new Datepicker(el);
+      });
+  };
+
+window.addEventListener(`${Events.LODEDANDREADY}`, init);
+window.addEventListener(`${Events.AJAX}`, init);
+
+export default Datepicker;

src/scss/ui/datepicker.scss

@@ -0,0 +1,32 @@
+@import "node_modules/vanillajs-datepicker/sass/mixins";
+
+@mixin dp-button {
+  .button {
+    @extend .btn;
+    @extend .btn-secondary;
+
+    .datepicker-header & {
+      @include dp-header-button-common;
+
+      // Place style adjustment specific to the header buttons here, if needed
+    }
+
+    .datepicker-footer & {
+      @include dp-footer-button-common;
+
+      // Place style adjustment specific to the footer buttons here, if needed
+    }
+  }
+}
+
+$dp-background-color: $body-bg !default;
+$dp-border-radius: .5rem !default;
+$dp-cell-selected-color: $white !default;
+$dp-cell-focus-background-color: invert($body-bg) !default;
+$dp-cell-focus-color: invert($body-color) !default;
+
+.datepicker-cell.focused:not(.selected) {
+  color: $dp-cell-focus-color;
+}
+
+@import "node_modules/vanillajs-datepicker/sass/datepicker";