Fix datetime picker. Closes #3143

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",

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'),

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]');
 

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;

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";

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;
+}

resources/assets/sass/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.scss

@@ -1,342 +0,0 @@
-// Import boostrap variables including default color palette and fonts
-@import "./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
-
-$bs-datetimepicker-timepicker-font-size: 1.2em !default;
-$bs-datetimepicker-active-bg: $cachet-green !default;
-$bs-datetimepicker-active-color: $btn-primary-color !default;
-$bs-datetimepicker-border-radius: $border-radius-base !default;
-$bs-datetimepicker-btn-hover-bg: $cachet-gray-light !default;
-$bs-datetimepicker-disabled-color: $cachet-gray !default;
-$bs-datetimepicker-alternate-color: $cachet-gray !default;
-$bs-datetimepicker-secondary-border-color: #ccc !default;
-$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
-$bs-datetimepicker-primary-border-color: white !default;
-$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
-
-.bootstrap-datetimepicker-widget {
-    list-style: none;
-
-    &.dropdown-menu {
-        margin: 2px 0;
-        padding: 4px;
-        width: 19em;
-
-        &.timepicker-sbs {
-            @media (min-width: $screen-sm-min) {
-                width: 38em;
-            }
-
-            @media (min-width: $screen-md-min) {
-                width: 38em;
-            }
-
-            @media (min-width: $screen-lg-min) {
-                width: 38em;
-            }
-        }
-
-        &:before, &:after {
-            content: '';
-            display: inline-block;
-            position: absolute;
-        }
-
-        &.bottom {
-            &:before {
-                border-left: 7px solid transparent;
-                border-right: 7px solid transparent;
-                border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
-                border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
-                top: -7px;
-                left: 7px;
-            }
-
-            &:after {
-                border-left: 6px solid transparent;
-                border-right: 6px solid transparent;
-                border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
-                top: -6px;
-                left: 8px;
-            }
-        }
-
-        &.top {
-            &:before {
-                border-left: 7px solid transparent;
-                border-right: 7px solid transparent;
-                border-top: 7px solid $bs-datetimepicker-secondary-border-color;
-                border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
-                bottom: -7px;
-                left: 6px;
-            }
-
-            &:after {
-                border-left: 6px solid transparent;
-                border-right: 6px solid transparent;
-                border-top: 6px solid $bs-datetimepicker-primary-border-color;
-                bottom: -6px;
-                left: 7px;
-            }
-        }
-
-        &.pull-right {
-            &:before {
-                left: auto;
-                right: 6px;
-            }
-
-            &:after {
-                left: auto;
-                right: 7px;
-            }
-        }
-    }
-
-    .list-unstyled {
-        margin: 0;
-    }
-
-    a[data-action] {
-        padding: 6px 0;
-    }
-
-    a[data-action]:active {
-        box-shadow: none;
-    }
-
-    .timepicker-hour, .timepicker-minute, .timepicker-second {
-        width: 54px;
-        font-weight: bold;
-        font-size: $bs-datetimepicker-timepicker-font-size;
-        margin: 0;
-    }
-
-    button[data-action] {
-        padding: 6px;
-    }
-
-    .btn[data-action="incrementHours"]::after {
-        @extend .sr-only;
-        content: "Increment Hours";
-    }
-
-    .btn[data-action="incrementMinutes"]::after {
-        @extend .sr-only;
-        content: "Increment Minutes";
-    }
-
-    .btn[data-action="decrementHours"]::after {
-        @extend .sr-only;
-        content: "Decrement Hours";
-    }
-
-    .btn[data-action="decrementMinutes"]::after {
-        @extend .sr-only;
-        content: "Decrement Minutes";
-    }
-
-    .btn[data-action="showHours"]::after {
-        @extend .sr-only;
-        content: "Show Hours";
-    }
-
-    .btn[data-action="showMinutes"]::after {
-        @extend .sr-only;
-        content: "Show Minutes";
-    }
-
-    .btn[data-action="togglePeriod"]::after {
-        @extend .sr-only;
-        content: "Toggle AM/PM";
-    }
-
-    .btn[data-action="clear"]::after {
-        @extend .sr-only;
-        content: "Clear the picker";
-    }
-
-    .btn[data-action="today"]::after {
-        @extend .sr-only;
-        content: "Set the date to today";
-    }
-
-    .picker-switch {
-        text-align: center;
-
-        &::after {
-            @extend .sr-only;
-            content: "Toggle Date and Time Screens";
-        }
-
-        td {
-            padding: 0;
-            margin: 0;
-            height: auto;
-            width: auto;
-            line-height: inherit;
-
-            span {
-                line-height: 2.5;
-                height: 2.5em;
-                width: 100%;
-            }
-        }
-    }
-
-    table {
-        width: 100%;
-        margin: 0;
-
-
-        & td,
-        & th {
-            text-align: center;
-            border-radius: $bs-datetimepicker-border-radius;
-        }
-
-        & th {
-            height: 20px;
-            line-height: 20px;
-            width: 20px;
-
-            &.picker-switch {
-                width: 145px;
-            }
-
-            &.disabled,
-            &.disabled:hover {
-                background: none;
-                color: $bs-datetimepicker-disabled-color;
-                cursor: not-allowed;
-            }
-
-            &.prev::after {
-                @extend .sr-only;
-                content: "Previous Month";
-            }
-
-            &.next::after {
-                @extend .sr-only;
-                content: "Next Month";
-            }
-        }
-
-        & thead tr:first-child th {
-            cursor: pointer;
-
-            &:hover {
-                background: $bs-datetimepicker-btn-hover-bg;
-            }
-        }
-
-        & td {
-            height: 54px;
-            line-height: 54px;
-            width: 54px;
-
-            &.cw {
-                font-size: .8em;
-                height: 20px;
-                line-height: 20px;
-                color: $bs-datetimepicker-alternate-color;
-            }
-
-            &.day {
-                height: 20px;
-                line-height: 20px;
-                width: 20px;
-            }
-
-            &.day:hover,
-            &.hour:hover,
-            &.minute:hover,
-            &.second:hover {
-                background: $bs-datetimepicker-btn-hover-bg;
-                cursor: pointer;
-            }
-
-            &.old,
-            &.new {
-                color: $bs-datetimepicker-alternate-color;
-            }
-
-            &.today {
-                position: relative;
-
-                &:before {
-                    content: '';
-                    display: inline-block;
-                    border: solid transparent;
-                    border-width: 0 0 7px 7px;
-                    border-bottom-color: $bs-datetimepicker-active-bg;
-                    border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
-                    position: absolute;
-                    bottom: 4px;
-                    right: 4px;
-                }
-            }
-
-            &.active,
-            &.active:hover {
-                background-color: $bs-datetimepicker-active-bg;
-                color: $bs-datetimepicker-active-color;
-                text-shadow: $bs-datetimepicker-text-shadow;
-            }
-
-            &.active.today:before {
-                border-bottom-color: #fff;
-            }
-
-            &.disabled,
-            &.disabled:hover {
-                background: none;
-                color: $bs-datetimepicker-disabled-color;
-                cursor: not-allowed;
-            }
-
-            span {
-                display: inline-block;
-                width: 54px;
-                height: 54px;
-                line-height: 54px;
-                margin: 2px 1.5px;
-                cursor: pointer;
-                border-radius: $bs-datetimepicker-border-radius;
-
-                &:hover {
-                    background: $bs-datetimepicker-btn-hover-bg;
-                }
-
-                &.active {
-                    background-color: $bs-datetimepicker-active-bg;
-                    color: $bs-datetimepicker-active-color;
-                    text-shadow: $bs-datetimepicker-text-shadow;
-                }
-
-                &.old {
-                    color: $bs-datetimepicker-alternate-color;
-                }
-
-                &.disabled,
-                &.disabled:hover {
-                    background: none;
-                    color: $bs-datetimepicker-disabled-color;
-                    cursor: not-allowed;
-                }
-            }
-        }
-    }
-
-    &.usetwentyfour {
-        td.hour {
-            height: 27px;
-            line-height: 27px;
-        }
-    }
-}
-
-.input-group.date {
-    & .input-group-addon {
-        cursor: pointer;
-    }
-}

resources/views/dashboard/incidents/add.blade.php

@@ -118,7 +118,7 @@
                         </div>
                         <div class="form-group">
                             <label>{{ trans('forms.incidents.occurred_at') }}</label> <small class="text-muted">{{ trans('forms.optional') }}</small>
-                            <input type="text" name="occurred_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" placeholder="{{ trans('forms.optional') }}">
+                            <input type="text" name="occurred_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" placeholder="{{ trans('forms.optional') }}">
                         </div>
                         @if($notificationsEnabled)
                         <input type="hidden" name="notify" value="0">

resources/views/dashboard/incidents/edit.blade.php

@@ -109,7 +109,7 @@
                     </div>
                     <div class="form-group">
                         <label>{{ trans('forms.incidents.occurred_at') }}</label> <small class="text-muted">{{ trans('forms.optional') }}</small>
-                        <input type="text" name="occurred_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $incident->occurred_at_datetimepicker }}" placeholder="{{ trans('forms.optional') }}">
+                        <input type="text" name="occurred_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $incident->occurred_at_datetimepicker }}" placeholder="{{ trans('forms.optional') }}">
                     </div>
                 </fieldset>
 

resources/views/dashboard/maintenance/add.blade.php

@@ -49,11 +49,11 @@
                     </div>
                     <div class="form-group">
                         <label>{{ trans('forms.schedules.scheduled_at') }}</label>
-                        <input type="text" name="scheduled_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
+                        <input type="text" name="scheduled_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
                     </div>
                     <div class="form-group">
                         <label>{{ trans('forms.schedules.completed_at') }}</label>
-                        <input type="text" name="completed_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" placeholder="{{ trans('forms.schedules.completed_at') }}">
+                        <input type="text" name="completed_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" placeholder="{{ trans('forms.schedules.completed_at') }}">
                     </div>
                 </fieldset>
 

resources/views/dashboard/maintenance/edit.blade.php

@@ -50,11 +50,11 @@
                     </div>
                     <div class="form-group">
                         <label>{{ trans('forms.schedules.scheduled_at') }}</label>
-                        <input type="text" name="scheduled_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $schedule->scheduled_at_datetimepicker }}" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
+                        <input type="text" name="scheduled_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $schedule->scheduled_at_datetimepicker }}" required placeholder="{{ trans('forms.schedules.scheduled_at') }}">
                     </div>
                     <div class="form-group">
                         <label>{{ trans('forms.schedules.completed_at') }}</label>
-                        <input type="text" name="completed_at" class="form-control" rel="datepicker-custom" data-date-format="YYYY-MM-DD HH:mm" value="{{ $schedule->completed_at_datetimepicker }}" placeholder="{{ trans('forms.schedules.completed_at') }}">
+                        <input type="text" name="completed_at" class="form-control flatpickr-time" data-date-format="Y-m-d H:i" value="{{ $schedule->completed_at_datetimepicker }}" placeholder="{{ trans('forms.schedules.completed_at') }}">
                     </div>
                 </fieldset>
 

webpack.mix.js

@@ -37,7 +37,6 @@ mix
         'node_modules/jquery/dist/jquery.min.js',
         'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
         'node_modules/moment/min/moment-with-locales.min.js',
-        'node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
         'node_modules/lodash/lodash.min.js',
         'node_modules/autosize/dist/autosize.min.js',
         'node_modules/messenger/build/js/messenger.min.js',

yarn.lock

@@ -1062,10 +1062,6 @@ bootstrap-sass@^3.3.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
-bootstrap@^3.3:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
-
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2280,13 +2276,20 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1, domutils@^1.5.1:
+domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dotenv-expand@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
@@ -2422,15 +2425,6 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-eonasdan-bootstrap-datetimepicker@^4.17:
-  version "4.17.47"
-  resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz#7a49970044065276e7965efd16f822735219e735"
-  dependencies:
-    bootstrap "^3.3"
-    jquery "^1.8.3 || ^2.0 || ^3.0"
-    moment "^2.10"
-    moment-timezone "^0.4.0"
-
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -3000,6 +2994,10 @@ flagged-respawn@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7"
 
+flatpickr@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.0.tgz#f72c7164a1c24e3ad419e3b2209d1a2d3604724a"
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
@@ -4334,7 +4332,7 @@ jquery-sparkline@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jquery-sparkline/-/jquery-sparkline-2.4.0.tgz#1be8b7b704dd3857152708aefb1d4a4b3a69fb33"
 
-"jquery@>= 1.7.x", "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^2.2.4:
+"jquery@>= 1.7.x", jquery@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"
 
@@ -5071,13 +5069,7 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-moment-timezone@^0.4.0:
+moment@^2.10.2, moment@^2.17.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.4.1.tgz#81f598c3ad5e22cdad796b67ecd8d88d0f5baa06"
-  dependencies:
-    moment ">= 2.6.0"
-
-"moment@>= 2.6.0", moment@^2.10, moment@^2.10.2, moment@^2.17.1:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
@@ -6585,11 +6577,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@~5.1.1:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0:
+safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"