Commit cd565668 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

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

parent 4dabae94
......@@ -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/',
......
/**
* @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
......@@ -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;
......
......@@ -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();
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment