Use pickadate instead of the jquery datetimepicker to select dates in the dashboard, initialize new dates with the current date, and tweak input styles a bit

bower.json

@@ -11,9 +11,9 @@
     "awesome-bootstrap-checkbox": "~0.3.7",
     "Sortable": "~1.6.0",
     "simplemde": "~1.11.2",
-    "datetimepicker": "~2.5.16",
     "SpinKit": "~1.2.5",
     "bootstrap-sass": "^3.3.7",
-    "list.js": "^1.5.0"
+    "list.js": "^1.5.0",
+    "pickadate": "^3.5.6"
   }
 }

gulpfile.js

@@ -61,7 +61,8 @@ const jsDashboardLibs = [
     "bower_components/jquery/dist/jquery.js",
     "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
     "bower_components/Sortable/Sortable.js",
-    "bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
+    "bower_components/pickadate/lib/picker.js",
+    "bower_components/pickadate/lib/picker.date.js",
     "bower_components/list.js/dist/list.js",
     "bower_components/simplemde/dist/simplemde.min.js"
 ];

resources/assets/js/dashboard.js

@@ -263,7 +263,7 @@ function editItemInit() {
         $submit = $("#submit"),
         $backButton = $("#back"),
         $textInputs = $(".text-input"),
-        $dateTimePickers = $(".date-time-picker"),
+        $datePickers = $(".date-picker"),
         $mkdEditors = $(".mkd-editor"),
         $imgUploads = $(".image-upload"),
         $token = $("#_token"),
@@ -327,8 +327,8 @@ function editItemInit() {
             addFormData(column, value);
         });
 
-        // add values from the contents of date-time-picker class elements
-        $dateTimePickers.each(function() {
+        // add values from the contents of date-picker class elements
+        $datePickers.each(function() {
             const $this = $(this),
                 column = $this.attr("id"),
                 value = $this.val() + ":00";
@@ -401,12 +401,12 @@ function editItemInit() {
         }
     }
 
-    // enable the datetimepicker for each element with the date-time-picker class
-    $dateTimePickers.each(function() {
-        $(this).datetimepicker({
-            format: "Y-m-d H:i",
-            allowTimes: allowTimes,
-            step: 15
+    // enable the datepicker for each element with the date-picker class
+    $datePickers.each(function() {
+        $(this).pickadate({
+            format: "yyyy-mm-dd",
+            formatSubmit: "yyyy-mm-dd",
+            clear: false
         });
     });
 

resources/assets/sass/dashboard.scss

@@ -2,7 +2,8 @@
 @import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
 @import "font-awesome/scss/font-awesome.scss";
 @import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
-@import "datetimepicker/jquery.datetimepicker";
+@import "pickadate/lib/themes/default";
+@import "pickadate/lib/themes/default.date";
 @import "simplemde/dist/simplemde.min";
 @import "SpinKit/css/spinners/11-folding-cube";
 
@@ -338,8 +339,18 @@ body {
 
 .edit-item {
     margin-top: 10px;
-    .CodeMirror, .CodeMirror-scroll { min-height: 100px; }
-    .date-time-picker { cursor: pointer; }
+
+    .CodeMirror, .CodeMirror-scroll {
+        min-height: 100px;
+    }
+
+    .CodeMirror {
+        padding: 5px;
+    }
+
+    .picker__holder {
+        overflow-y: hidden;
+    }
 
     label {
         height: 32px;
@@ -350,6 +361,17 @@ body {
         margin-bottom: 15px;
         display: block;
         width: 100%;
+
+        &:not([type=file]) {
+            padding: 5px 8px;
+            border: 1px solid darken($c-dashboard-light, 10%);
+            border-radius: 2px;
+            transition: border-color 150ms;
+        }
+
+        &.date-picker {
+            cursor: pointer;
+        }
     }
 
     .current-image {

resources/views/dashboard/edit-item.blade.php

@@ -32,7 +32,7 @@
                             @if($column['type'] == 'text')
                                 <input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" />
                             @elseif($column['type'] == 'date')
-                                <input class="date-time-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
+                                <input class="date-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value == '' ? date('Y-m-d', time()) : preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
                             @elseif($column['type'] == 'mkd')
                                 <textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
                             @elseif($column['type'] == 'select')