From 5900b5e25b1c462d7da1956f62dc00b5dd5a2f50 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Mon, 13 Sep 2021 00:25:23 +0200
Subject: [PATCH] IMPR: Vanilla JS Datepicker

---
 src/js/ui/datepicker.js     | 13 +++++++++++++
 src/scss/ui/datepicker.scss | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/js/ui/datepicker.js
 create mode 100644 src/scss/ui/datepicker.scss

diff --git a/src/js/ui/datepicker.js b/src/js/ui/datepicker.js
new file mode 100644
index 0000000..a4d9bf9
--- /dev/null
+++ b/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;
diff --git a/src/scss/ui/datepicker.scss b/src/scss/ui/datepicker.scss
new file mode 100644
index 0000000..fb33e89
--- /dev/null
+++ b/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";