Framework/Elements: Implement DateTime form element

refs #4440

application/layouts/scripts/layout.phtml

@@ -14,6 +14,7 @@
 
     <link rel="stylesheet" href="<?= $this->baseUrl('css/normalize.min.css') ?>">
     <link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/bootstrap.css') ?>">
+    <link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/datetimepicker/bootstrap-datetimepicker.min.css') ?>">
     <link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/ui-lightness/jquery-ui-1.10.3.custom.min.css') ?>">
     <link rel="stylesheet" href="<?= $this->baseUrl('css/main.css') ?>">
     <link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/jquery.qtip.min.css') ?>">

application/views/helpers/FormDateTime.php

@@ -25,30 +25,52 @@
  */
 // {{{ICINGA_LICENSE_HEADER}}}
 
+use \DateTime;
+use \Zend_View_Helper_FormElement;
+
 /**
- * Helper to generate a text input with a datepicker being attached
+ * Helper to generate a "datetime" element
  */
-class Zend_View_Helper_FormDateTime extends \Zend_View_Helper_FormText
+class Zend_View_Helper_FormDateTime extends Zend_View_Helper_FormElement
 {
     /**
-     * Generates a html date input
+     * Generate a 'datetime' element
      *
-     * @access public
+     * @param   string  $name    The element name
+     * @param   int     $value   The default timestamp
+     * @param   array   $attribs Attributes for the element tag
      *
-     * @param string $name The element name.
-     * @param string $value The default value.
-     * @param array $attribs Attributes which should be added to the input tag.
-     *
-     * @return string The input tag and options XHTML.
+     * @return  string  The element XHTML
      */
     public function formDateTime($name, $value = null, $attribs = null)
     {
-        return '<input type="datetime" class="datepick"'
-        . ' name="' . $this->view->escape($name) . '"'
-        . ' value="' . $this->view->escape($value) . '"'
-        . ' id="' . $this->view->escape($name) . '"'
-        . $this->_htmlAttribs($attribs)
-        . $this->getClosingBracket();
+        $info = $this->_getInfo($name, $value, $attribs);
+        extract($info); // name, value, attribs, options, listsep, disable
+
+        // Is it disabled?
+        $disabled = '';
+        if ($disable) {
+            $disabled = ' disabled="disabled"';
+        }
+
+        // Do we have a value?
+        if (isset($value) && !empty($value)) {
+            $dt = new DateTime($value);
+            $value = ' value="' . $dt->format('Y-m-d H:i:s') . '"';
+        } else {
+            $value = '';
+        }
+
+        // Build the element
+        $xhtml = '<div class="datetime">'
+            . '<input type="text" name="' . $this->view->escape($name) . '"'
+            . ' id="' . $this->view->escape($id) . '"'
+            . $value
+            . $disabled
+            . $this->_htmlAttribs($attribs)
+            . $this->getClosingBracket()
+            . '</div>';
+        return $xhtml;
     }
 }
 

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

@@ -30,6 +30,9 @@ namespace Icinga\Web\Form\Element;
 
 use Zend_Form_Element_Xhtml;
 
+/**
+ * Datetime form element
+ */
 class DateTime extends Zend_Form_Element_Xhtml
 {
     /**

public/js/icinga/components/datetime.js

@@ -3,17 +3,18 @@
 /**
  * Ensures that our date/time controls will work on every browser (natively or javascript based)
  */
-define(['jquery', 'datepicker', 'timepicker'],function($) {
+define(['jquery', 'datetimepicker'], function($) {
     "use strict";
 
     var DateTimeBehaviour = function() {
         this.enable = function() {
-            if (!Modernizr.inputtypes.date) {
-                $(".datepick").datepicker();
-            }
-            if (!Modernizr.inputtypes.time) {
-                $(".timepick").timepicker();
-            }
+            $('.datetime input')
+                .attr('data-format', 'yyyy-MM-dd hh:mm:ss');
+            $('.datetime')
+                .addClass('input-append')
+                .append('<span class="add-on">' +
+                    '<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>')
+                .datetimepicker();
         }
     };
     return new DateTimeBehaviour();

public/js/main.js

@@ -14,8 +14,7 @@ requirejs.config({
 
         logging: 'icinga/util/logging',
 
-        datepicker: 'vendor/datepicker/js/bootstrap-datepicker',
-        timepicker: 'vendor/timepicker/js/bootstrap-timepicker'
+        datetimepicker: 'vendor/datetimepicker/bootstrap-datetimepicker.min'
     }
 
 });
@@ -30,6 +29,5 @@ define(['jquery','Holder', 'History'], function ($) {
 });
 
 define(['bootstrap'], function () {
-    requirejs(['datepicker']);
-    requirejs(['timepicker']);
+    requirejs(['datetimepicker']);
 });