diff --git a/modules/backend/formwidgets/DatePicker.php b/modules/backend/formwidgets/DatePicker.php
index 4cae343a4..79867b149 100644
--- a/modules/backend/formwidgets/DatePicker.php
+++ b/modules/backend/formwidgets/DatePicker.php
@@ -61,21 +61,38 @@ class DatePicker extends FormWidgetBase
 
         $this->vars['timeName'] = self::TIME_PREFIX.$this->formField->getName(false);
 
-        $value = $this->getLoadData();
+        if ($value = $this->getLoadData()) {
 
-        if ($this->mode != 'datetime' && $value) {
-            if (is_string($value)) {
-                $value = substr($value, 0, 10);
+            /*
+             * Date / Time
+             */
+            if ($this->mode == 'datetime') {
+                if (is_string($value)) {
+                    $dateTime = explode(' ', $value);
+                }
+                elseif (is_object($value)) {
+                    $value = $value->toDateTimeString();
+                }
+                $value = $dateTime[0];
+                $this->vars['timeValue'] = isset($dateTime[1]) ? substr($dateTime[1], 0, 5) : '';
             }
-            elseif (is_object($value)) {
-                $value = $value->toDateString();
+            /*
+             * Date
+             */
+            elseif ($this->mode == 'date') {
+                if (is_string($value)) {
+                    $value = substr($value, 0, 10);
+                }
+                elseif (is_object($value)) {
+                    $value = $value->toDateString();
+                }
             }
-        } elseif ($this->mode == 'datetime') {
-            if ($value) {
-                $dateTime = explode(' ', $value);
+            elseif ($this->mode == 'time') {
+                if (is_object($value)) {
+                    $value = $value->toTimeString();
+                }
             }
-            $this->vars['valueDate'] = isset($dateTime[1]) ? $dateTime[0] : '';
-            $this->vars['valueTime'] = isset($dateTime[1]) ? substr($dateTime[1], 0, 5) : '';
+
         }
 
         $this->vars['value'] = $value ?: '';
diff --git a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css
index 44490728b..cfccc5732 100644
--- a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css
+++ b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css
@@ -10,7 +10,7 @@
 
 /* Picked from bootstrap: .popover, .btn, .text-primary */
 
-.popover {
+.clockpicker-popover {
   position: absolute;
   top: 0;
   left: 0;
@@ -28,19 +28,19 @@
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 		  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 }
-.popover.top {
+.clockpicker-popover.top {
   margin-top: -10px;
 }
-.popover.right {
+.clockpicker-popover.right {
   margin-left: 10px;
 }
-.popover.bottom {
+.clockpicker-popover.bottom {
   margin-top: 10px;
 }
-.popover.left {
+.clockpicker-popover.left {
   margin-left: -10px;
 }
-.popover-title {
+.clockpicker-popover .popover-title {
   padding: 8px 14px;
   margin: 0;
   font-size: 14px;
@@ -50,11 +50,11 @@
   border-bottom: 1px solid #ebebeb;
   border-radius: 5px 5px 0 0;
 }
-.popover-content {
+.clockpicker-popover .popover-content {
   padding: 9px 14px;
 }
-.popover > .arrow,
-.popover > .arrow:after {
+.clockpicker-popover > .arrow,
+.clockpicker-popover > .arrow:after {
   position: absolute;
   display: block;
   width: 0;
@@ -77,14 +77,14 @@
   -ms-transform:none;
   transform:none;
 }
-.popover > .arrow {
+.clockpicker-popover > .arrow {
   border-width: 11px;
 }
-.popover > .arrow:after {
+.clockpicker-popover > .arrow:after {
   content: "";
   border-width: 10px;
 }
-.popover.top > .arrow {
+.clockpicker-popover.top > .arrow {
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
@@ -92,14 +92,14 @@
   border-top-color: rgba(0, 0, 0, .25);
   border-bottom-width: 0;
 }
-.popover.top > .arrow:after {
+.clockpicker-popover.top > .arrow:after {
   bottom: 1px;
   margin-left: -10px;
   content: " ";
   border-top-color: #fff;
   border-bottom-width: 0;
 }
-.popover.right > .arrow {
+.clockpicker-popover.right > .arrow {
   top: 50%;
   left: -11px;
   margin-top: -11px;
@@ -107,14 +107,14 @@
   border-right-color: rgba(0, 0, 0, .25);
   border-left-width: 0;
 }
-.popover.right > .arrow:after {
+.clockpicker-popover.right > .arrow:after {
   bottom: -10px;
   left: 1px;
   content: " ";
   border-right-color: #fff;
   border-left-width: 0;
 }
-.popover.bottom > .arrow {
+.clockpicker-popover.bottom > .arrow {
   top: -11px;
   left: 50%;
   margin-left: -11px;
@@ -122,14 +122,14 @@
   border-bottom-color: #999;
   border-bottom-color: rgba(0, 0, 0, .25);
 }
-.popover.bottom > .arrow:after {
+.clockpicker-popover.bottom > .arrow:after {
   top: 1px;
   margin-left: -10px;
   content: " ";
   border-top-width: 0;
   border-bottom-color: #fff;
 }
-.popover.left > .arrow {
+.clockpicker-popover.left > .arrow {
   top: 50%;
   right: -11px;
   margin-top: -11px;
@@ -137,68 +137,13 @@
   border-left-color: #999;
   border-left-color: rgba(0, 0, 0, .25);
 }
-.popover.left > .arrow:after {
+.clockpicker-popover.left > .arrow:after {
   right: 1px;
   bottom: -10px;
   content: " ";
   border-right-width: 0;
   border-left-color: #fff;
 }
-.btn {
-  cursor: pointer;
-  -webkit-user-select: none;
-	 -moz-user-select: none;
-	  -ms-user-select: none;
-		  user-select: none;
-  background-image: none;
-  border: 1px solid transparent;
-
-}
-.btn:focus,
-.btn:active:focus,
-.btn.active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.btn:hover,
-.btn:focus {
-  color: #333;
-  text-decoration: none;
-}
-.btn:active,
-.btn.active {
-  background-image: none;
-  outline: 0;
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-		  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-}
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active,
-.btn-default.active,
-.open .dropdown-toggle.btn-default {
-  color: #333;
-  background-color: #ebebeb;
-  border-color: #adadad;
-}
-.btn-default:active,
-.btn-default.active,
-.open .dropdown-toggle.btn-default {
-  background-image: none;
-}
-.btn-block {
-  display: block;
-  width: 100%;
-}
-.text-primary {
-  color: #428bca;
-}
 
 /*!
  * ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/)
diff --git a/modules/backend/formwidgets/datepicker/partials/_datepicker.htm b/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
index a96b0655e..1b66c09b7 100644
--- a/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
+++ b/modules/backend/formwidgets/datepicker/partials/_datepicker.htm
@@ -34,7 +34,7 @@
                         type="text"
                         id="<?= $this->getId('input') ?>"
                         name="<?= $name ?>"
-                        value="<?= $valueDate ?>"
+                        value="<?= $value ?>"
                         class="form-control align-right"
                         autocomplete="off">
                 </div>
@@ -49,7 +49,7 @@
                         type="text"
                         id="<?= $this->getId('input') ?>-time"
                         name="<?= $timeName ?>"
-                        value="<?= $valueTime ?>"
+                        value="<?= $timeValue ?>"
                         class="form-control align-right"
                         autocomplete="off"
                         data-autoclose="true"