Implement bootstrap datepicker

refs #4929

application/views/helpers/FormDateTime.php

@@ -53,7 +53,6 @@ class Zend_View_Helper_FormDateTime extends Zend_View_Helper_FormElement
 
         $jspicker = (isset($attribs['jspicker']) && $attribs['jspicker'] === true) ? true : false;
 
-        // Do we have a value?
         if (isset($value) && !empty($value)) {
             if ($jspicker) {
                 $value = ' value="' . $this->view->dateFormat()->format($value, $attribs['defaultFormat']) . '"';
@@ -65,8 +64,9 @@ class Zend_View_Helper_FormDateTime extends Zend_View_Helper_FormElement
         }
 
         // Build the element
-        $xhtml = '<div class="datetime">'
-            . '<input type="text" name="' . $name . '"'
+        $xhtml = '<div class="datetime' . (($jspicker === true) ? ' input-group' : ''). '">';
+
+        $xhtml .= '<input type="text" name="' . $name . '"'
             . ' id="' . $name . '"'
             . $value
             . $disabled
@@ -76,8 +76,17 @@ class Zend_View_Helper_FormDateTime extends Zend_View_Helper_FormElement
             $xhtml .= 'data-icinga-component="app/datetime"';
         }
 
-        $xhtml .= $this->getClosingBracket()
-            . '</div>';
+        $xhtml .= $this->getClosingBracket();
+
+        if ($jspicker === true) {
+            $xhtml .= '<span class="input-group-addon">'
+                . '<a href="#">'
+                . '<i class="icinga-icon-reschedule"></i>'
+                . '</a>'
+                . '</span>';
+        }
+
+        $xhtml .= '</div>';
 
         return $xhtml;
     }

library/Icinga/Web/Form/Element/DateTimePicker.php

@@ -42,7 +42,7 @@ use \Icinga\Util\DateTimeFactory;
 class DateTimePicker extends Zend_Form_Element_Text
 {
     /**
-     * Defautl format used my js picker
+     * Default format used my js picker
      *
      * @var string
      */

public/css/icinga/main.less

@@ -115,6 +115,37 @@ p {
   margin-bottom: 15px;
 }
 
+/* =========================================================================
+   Bootstrap overrides
+   ========================================================================= */
+
+.input-group-addon {
+  padding: 4px 12px;
+}
+
+.glyphicon-arrow-right {
+  background: transparent url("@{baseurl}/img/icons/next.png") center center no-repeat;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  text-indent: -999px;
+}
+
+.glyphicon-arrow-right:before {
+
+}
+
+.glyphicon-arrow-left {
+  background: transparent url("@{baseurl}/img/icons/prev.png") center center no-repeat;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  text-indent: -999px;
+}
+.glyphicon-arrow-left:before {
+
+}
+
 /* =========================================================================
    Icinga Logo
    ========================================================================= */

public/js/icinga/components/datetime.js

@@ -40,6 +40,11 @@ define(['jquery', 'datetimepicker'], function($) {
             todayBtn: true,
             todayHighlight: true
         });
+
+        $(target).parent().find('a').click(function(e) {
+            e.preventDefault();
+            $(target).datetimepicker('show');
+        });
     };
 
     return DateTimePicker;