Replace tempusdominus datetimepicker with flatpickr

src/js/app.js

@@ -9,7 +9,7 @@ import "./modules/sidebar";
 import "./modules/user-agent";
 
 // Forms
-import "./modules/datetimepicker";
+import "./modules/flatpickr";
 
 // Charts
 import "./modules/chartjs";

src/js/modules/datetimepicker.js

@@ -1,19 +0,0 @@
-import "tempusdominus-bootstrap-4";
-
-$.fn.datetimepicker.Constructor.Default = $.extend(
-  {},
-  $.fn.datetimepicker.Constructor.Default,
-  {
-    icons: {
-      time: "far fa-clock",
-      date: "far fa-calendar",
-      up: "fas fa-arrow-up",
-      down: "fas fa-arrow-down",
-      previous: "fas fa-chevron-left",
-      next: "fas fa-chevron-right",
-      today: "far fa-calendar-check-o",
-      clear: "fas fa-trash",
-      close: "fas fa-times"
-    }
-  }
-);

src/js/modules/flatpickr.js

@@ -0,0 +1,3 @@
+import flatpickr from "flatpickr";
+
+window.flatpickr = flatpickr;

src/scss/5-vendor/_datetimepicker.scss

@@ -1,13 +0,0 @@
-.bootstrap-datetimepicker-widget {
-  .table th, .table td {
-    border: 0;
-  }
-
-  table th,
-  table td,
-  table td.day {
-    height: 36px;
-    line-height: 36px;
-    width: 36px;
-  }
-}

src/scss/5-vendor/_flatpickr.scss

@@ -0,0 +1,104 @@
+$flatpickr-tile-height: 45px;
+
+.flatpickr-calendar.inline {
+  background: transparent;
+  box-shadow: none;
+  width: 100%;
+  
+  .flatpickr-days {
+    width: 100%;
+  }
+
+  .dayContainer {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .flatpickr-day {
+    border-radius: $border-radius;
+    max-width: inherit;
+    height: $flatpickr-tile-height;
+    line-height: $flatpickr-tile-height;
+
+    &.today {
+      border: 0;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        border-color: rgba(0,0,0,.2) transparent $primary;
+        border-style: solid;
+        border-width: 0 0 7px 7px;
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+      }
+
+      &.selected:before {
+        border-color: rgba(0,0,0,.2) transparent $white;
+      }
+
+      &:hover {
+        background: #e6e6e6;
+        color: $black;
+      }
+    }
+
+    &.selected {
+      &,
+      &:hover,
+      &:focus {
+        border-radius: $border-radius;
+        background: $primary;
+        color: $white;
+      }
+    }
+  }
+
+  .flatpickr-weekdays {
+    height: $flatpickr-tile-height;
+  }
+  .flatpickr-weekday {
+    height: $flatpickr-tile-height;
+    line-height: $flatpickr-tile-height;
+  }
+
+  .flatpickr-months {
+    .flatpickr-month {
+      height: $flatpickr-tile-height;
+    }
+
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      height: $flatpickr-tile-height;
+    }
+  }
+
+  .flatpickr-current-month {
+    padding-top: 0;
+    line-height: $flatpickr-tile-height;
+    height: $flatpickr-tile-height;
+
+    .flatpickr-monthDropdown-months {
+      appearance: none;
+    }
+    
+    .flatpickr-monthDropdown-months,
+    input.cur-year {
+      font-weight: $font-weight-normal;
+      font-size: $h4-font-size;
+    }
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    width: 45px;
+    border-radius: $border-radius;
+
+    &:hover {
+      background: #e6e6e6;
+      color: $black;
+    }
+  }
+}

src/scss/app.scss

@@ -54,8 +54,8 @@
 @import "~@fortawesome/fontawesome-free/scss/solid";
 @import "~jsvectormap/dist/css/jsvectormap";
 @import "~simplebar/dist/simplebar";
-@import "~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4";
+@import "~flatpickr/dist/flatpickr";
 
 // 3rd party plugin styles
-@import "5-vendor/datetimepicker";
 @import "5-vendor/simplebar";
+@import "5-vendor/flatpickr";