Fix datetime picker. Closes cachethq#3143

diegotony · Jun 29, 2018 · d0b802d · d0b802d
1 parent 8c623bc
commit d0b802d
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 421 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
     "bootstrap-sass": "^3.3.6",
     "chart.js": "^2.7.0",
     "cross-env": "^5.1",
-    "eonasdan-bootstrap-datetimepicker": "^4.17",
     "es5-shim": "^4.5.9",
+    "flatpickr": "^4.5.0",
     "github-markdown-css": "^2.3.0",
     "gulp": "^3.9.1",
     "ionicons": "~2.0",

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -20,6 +20,11 @@ window.axios.defaults.headers.common = {
     'X-Requested-With': 'XMLHttpRequest'
 };
 
+/**
+ * Flatpickr.
+ */
+const Flatpickr = require('flatpickr');
+
 ((win, doc) => {
     /**
      * Next, we will create a fresh Vue application instance and attach it to
@@ -43,6 +48,13 @@ window.axios.defaults.headers.common = {
                 }
             }
         },
+        mounted () {
+            Flatpickr('.flatpickr');
+
+            Flatpickr('.flatpickr-time', {
+                enableTime: true
+            });
+        },
         components: {
             'setup': require('./components/Setup'),
             'dashboard': require('./components/dashboard/Dashboard'),

diff --git a/resources/assets/js/cachet.js b/resources/assets/js/cachet.js
@@ -133,52 +133,6 @@ $(function () {
         }
     });
 
-    // Date picker.
-    $('input[rel=datepicker]').datetimepicker({
-        format: "DD/MM/YYYY HH:mm",
-        minDate: new Date(), // Don't allow dates before today.
-        sideBySide: true,
-        icons: {
-            time: 'ion-clock',
-            date: 'ion-android-calendar',
-            up: 'ion-ios-arrow-up',
-            down: 'ion-ios-arrow-down',
-            previous: 'ion-ios-arrow-left',
-            next: 'ion-ios-arrow-right',
-            today: 'ion-android-home',
-            clear: 'ion-trash-a',
-        }
-    });
-
-    $('input[rel=datepicker-any]').datetimepicker({
-        format: "DD/MM/YYYY HH:mm",
-        sideBySide: true,
-        icons: {
-            time: 'ion-clock',
-            date: 'ion-android-calendar',
-            up: 'ion-ios-arrow-up',
-            down: 'ion-ios-arrow-down',
-            previous: 'ion-ios-arrow-left',
-            next: 'ion-ios-arrow-right',
-            today: 'ion-android-home',
-            clear: 'ion-trash-a',
-        }
-    });
-
-    $('input[rel=datepicker-custom]').datetimepicker({
-        sideBySide: true,
-        icons: {
-            time: 'ion-clock',
-            date: 'ion-android-calendar',
-            up: 'ion-ios-arrow-up',
-            down: 'ion-ios-arrow-down',
-            previous: 'ion-ios-arrow-left',
-            next: 'ion-ios-arrow-right',
-            today: 'ion-android-home',
-            clear: 'ion-trash-a',
-        }
-    });
-
     // Sortable models.
     var orderableLists = document.querySelectorAll('[data-orderable-list]');
 

diff --git a/resources/assets/sass/_vendors.scss b/resources/assets/sass/_vendors.scss
@@ -4,6 +4,7 @@ $ionicons-font-path: "../../../fonts" !default;
 @import "./node_modules/ionicons/scss/ionicons";
 
 @import "modules/bootstrap";
+@import "plugins/flatpickr";
 
 html {
     position: relative;

diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss
@@ -19,6 +19,5 @@
 @import "plugins/sweetalert";
 @import "plugins/messenger";
 @import "plugins/animate";
-@import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker";
 @import "plugins/password-strength";
 @import "plugins/sortable";
diff --git a/resources/assets/sass/plugins/_flatpickr.scss b/resources/assets/sass/plugins/_flatpickr.scss
@@ -0,0 +1,61 @@
+@import "./node_modules/flatpickr/dist/flatpickr";
+
+.flatpickr-calendar {
+    width: auto;
+    min-width: 293.75px;
+    padding: rem-calc(10);
+    &.open {
+        z-index: 4 !important;
+    }
+    .flatpickr-month {
+        min-height: 30px;
+    }
+    .flatpickr-prev-month,
+    .flatpickr-current-month,
+    .flatpickr-next-month {
+        padding: 0;
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+        border-radius: 1rem;
+        padding: 0.5rem;
+        &:hover {
+            background-color: $cachet-gray-light;
+            svg {
+                color: rgba(0, 0, 0, 0.9);
+                fill: rgba(0, 0, 0, 0.9);
+            }
+        }
+    }
+    .flatpickr-current-month {
+        .cur-month {
+            margin-left: 1rem;
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+    .flatpickr-day {
+        line-height: 36px;
+        &:hover {
+            background-color: $cachet-gray-light;
+            border-color: $cachet-gray-light;
+        }
+    }
+    .numInputWrapper {
+        width: 4rem;
+        margin-left: 0.5rem;
+        .numInput {
+            padding: 0;
+            box-shadow: none;
+        }
+    }
+}
+
+.flatpickr-time {
+    text-align: left;
+}