Initial implementation of https://project/issues/1980

Gruntfile.js

@@ -184,7 +184,7 @@ module.exports = function (grunt) {
                         cwd: 'bower_components/jqwidgets/jqwidgets/styles/',
                         src: [
                             'jqx.base.css',
-                            'jqx.darkblue.css'
+                            'jqx.bootstrap.css'
                         ],
                         expand: true,
                         dest: typo3_css,
@@ -215,7 +215,7 @@ module.exports = function (grunt) {
                         cwd: 'bower_components/jqwidgets/jqwidgets/styles/',
                         src: [
                             'jqx.base.css',
-                            'jqx.darkblue.css'
+                            'jqx.bootstrap.css'
                         ],
                         expand: true,
                         dest: 'css/',

javascript/src/Helper/jqxDateTimeInput.js

+/**
+ * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
+ */
+
+
+/* global $ */
+
+/**
+ * Qfq Namespace
+ *
+ * @namespace QfqNS
+ */
+var QfqNS = QfqNS || {};
+/**
+ * Qfq Helper Namespace
+ *
+ * @namespace QfqNS.Helper
+ */
+QfqNS.Helper = QfqNS.Helper || {};
+
+(function (n) {
+    'use strict';
+
+    /**
+     * Initializes jqxDateTimeInput widgets.
+     *
+     * It configures all `<div>`s having a class `jqw-datetimepicker` as jqxDateTimeInput.
+     *
+     * Given the HTML snippet
+     *
+     *     ...
+     *     <div class="jqw-datetimepicker" data-control-name="datetimepicker" ></div>
+     *     ...
+     *
+     * it will create a hidden input sibling element of the `<div>` where the selected date is stored for plain old
+     * form submission, thus rendering the above snippet effectively to
+     *
+     *     ...
+     *     <div class="jqw-datetimepicker" data-control-name="datetimepicker" ></div>
+     *     <input type="hidden" name="datetimepicker">
+     *     ...
+     *
+     * The jqxDateTimeInput can be configured using following `data` attributes
+     *
+     *  * `data-control-name`: Mandatory attribute. Hold the name of the input element.
+     *  * `data-format-string': Optional Format string as required by jqxDateTimeInput. See also
+     *    {@link http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatetimeinput/jquery-datetimeinput-api.htm}.
+     *    Default: "F".
+     *  * `data-show-time-button`: Boolean value `true` or `false`, indicating whether or not a time picker will be
+     *    displayed.
+     *
+     * @function
+     * @name QfqNS.Helper.jqxDateTimeInput
+     */
+    var jqxDateTimeInput = function () {
+        var index;
+        var $containers = $("div.jqw-datetimepicker");
+
+        $containers.each(function (index, object) {
+            (function ($container) {
+                var controlName = $container.data('control-name');
+                if (!controlName) {
+                    QfqNS.Log.error("jqwDateTimePicker does not have a 'data-control-name' attribute.");
+                    return;
+                }
+
+                var formatString = $container.data('format-string');
+                if (!formatString) {
+                    formatString = "F";
+                }
+
+                var showTimeButton = $container.data('show-time-button');
+                if (showTimeButton === undefined) {
+                    showTimeButton = false;
+                }
+
+                var jqxDateTimeInputConfig = {
+                    formatString: formatString,
+                    showTimeButton: showTimeButton,
+                    width: '300px',
+                    height: '25px'
+                };
+
+                $container.jqxDateTimeInput(jqxDateTimeInputConfig);
+
+                var $hiddenInput = $("<input>")
+                    .attr('type', 'hidden')
+                    .attr('name', controlName);
+
+                $container.after($hiddenInput);
+
+                $hiddenInput.val($container.jqxDateTimeInput('value').toISOString());
+
+                $container.on('valueChanged', function (event) {
+                    $hiddenInput.val(event.args.date.toISOString());
+                });
+            })($(object));
+        });
+
+    };
+
+    n.jqxDateTimeInput = jqxDateTimeInput;
+
+
+})(QfqNS.Helper);
\ No newline at end of file

javascript/src/QfqForm.js

@@ -74,6 +74,9 @@ var QfqNS = QfqNS || {};
         var configurationData = this.readElementConfigurationData();
 
         this.applyElementConfiguration(configurationData);
+
+        // Initialize jqxDateTimeInput elements.
+        n.Helper.jqxDateTimeInput();
     };
 
     n.QfqForm.prototype.on = n.EventEmitter.onMixin;

mockup/personmock.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../css/bootstrap.min.css">
     <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="../css/jqx.base.css">
-    <link rel="stylesheet" href="../css/jqx.darkblue.css">
+    <link rel="stylesheet" href="../css/jqx.bootstrap.css">
     <link rel="stylesheet" href="../css/qfq-bs.css">
     <title>Person Form Mockup</title>
 
@@ -224,7 +224,22 @@
                         <label for="personGeburtstag" class="control-label">Geburtstag</label>
                     </div>
                     <div class="col-md-6">
-                        <input id="personGeburtstag" type="text" class="form-control" name="geburtstag">
+                        <div id="personGeburtstag" class="jqw-datetimepicker"
+                             data-control-name="personGeburtstag" data-format-string="dd.MM.yyyy HH:mm"
+                             data-show-time-button="true"></div>
+                    </div>
+
+                </div>
+
+                <div class="form-group">
+
+                    <div class="col-md-2">
+                        <label for="anotherDate" class="control-label">Another Date</label>
+                    </div>
+                    <div class="col-md-6">
+                        <div id="anotherDate" class="jqw-datetimepicker"
+                             data-control-name="anotherDate" data-format-string="dd.MM.yyyy"
+                             data-show-time-button="false"></div>
                     </div>
 
                 </div>
@@ -1027,6 +1042,8 @@
             fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
         });
 
+        QfqNS.Helper.jqxDateTimeInput();
+
         $("#submitTo").on("change", function (evt) {
             qfqPage.settings.submitTo = 'api/' + $(evt.target).val();
             qfqPage.qfqForm.submitTo = 'api/' + $(evt.target).val();