S13787 Corrected qfq-datepicker JS to get min and maxDate work. Added...

S13787 Corrected qfq-datepicker JS to get min and maxDate work. Added documentation for the possible datetimepicker configurations which can be set.

Documentation/Form.rst

@@ -1289,7 +1289,9 @@ Type: date
 * Range datetime: '1000-01-01' to '9999-12-31' or '0000-00-00'. (http://dev.mysql.com/doc/refman/5.5/en/datetime.html)
 * Optional:
 
-  * *FormElement.parameter.dateFormat*: yyyy-mm-dd | dd.mm.yyyy
+  * *FormElement.parameter.dateFormat*: YYYY-MM-DD | DD.MM.YYYY
+
+Actually datetimepicker is used as default. For more options see :ref:`Installation_datetimepicker`
 
 Type: datetime
 ^^^^^^^^^^^^^^
@@ -1299,10 +1301,11 @@ Type: datetime
 
   * *FormElement.parameter*:
 
-    * *dateFormat* = yyyy-mm-dd | dd.mm.yyyy
+    * *dateFormat* = YYYY-MM-DD | DD.MM.YYYY
     * *showSeconds* = 0|1 - shows the seconds. Independent if the user specifies seconds, they are displayed '1' or not '0'.
     * *showZero* = 0|1 - For an empty timestamp, With '0' nothing is displayed. With '1' the string '0000-00-00 00:00:00' is displayed.
 
+Actually datetimepicker is used as default. For more options see :ref:`Installation_datetimepicker`
 Type: extra
 ^^^^^^^^^^^
 
@@ -1944,6 +1947,7 @@ Type: time
   * *showSeconds* = `0|1` - shows the seconds. Independent if the user specifies seconds, they are displayed '1' or not '0'.
   * *showZero* =  `0|1` - For an empty timestamp, With '0' nothing is displayed. With '1' the string '00:00[:00]' is displayed.
 
+Actually datetimepicker is used as default. For more options see :ref:`Installation_datetimepicker`
 .. _`input-upload`:
 
 Type: upload

Documentation/Installation.rst

@@ -296,6 +296,19 @@ As first option both can be inserted to the setup of the main Template like the
 
 Second option is to use the UZH CD template.
 
+Following configurations can be set over FormElement.parameter:
+
+dateFormat = *DD.MM.YYYY HH:mm:ss* | *MM-DD-YYYY HH:mm* | *dddd DD.MM.YYYY HH:mm* -> DD:day of month,MM:month value,YYYY:year value,HH:24h,hh:12h AM-PM,mm:minutes,ss:seconds,dddd:written day of week
+dateDaysOfWeekEnabled = *0,1,6* -> 0:sunday,1:monday,2:tuesday,3:wednesday,4:thursday,5:friday,6:saturday
+dateLocale = *en* | *de* -> Set language
+min = *03.05.2022* -> minDate that can be selected
+max = *23.07.2022* -> maxDate that can be selected
+dateViewModeDefault = *days* | *months* | *years*
+clearMe = *0* | *1* -> show clear button
+dateShowCalendarWeeks = *false* | *true*
+dateUseCurrentDatetime = *false* | *true*
+datetimeSideBySide = *false* | *true* -> Show time right to date
+
 .. _form-editor:
 
 FormEditor

javascript/src/Main.js

@@ -128,25 +128,26 @@ $(document).ready( function () {
         $('.qfq-datepicker').each(function() {
             var dates = {};
             var datesToFormat = ["minDate", "maxDate"];
+            var correctAttributeNames = ["mindate", "maxdate"];
             for(var i = 0; i < datesToFormat.length; i++) {
                 var date = false;
-                if($(this).data(datesToFormat[i])) {
-                    var dateArray = $(this).data(datesToFormat[i]).split(".");
-                    date = dateArray[1] + "." + dateArray[0] + "." + dateArray[2];
+                if($(this).data(correctAttributeNames[i])) {
+                    var dateArray = $(this).data(correctAttributeNames[i]).split(".");
+                    date = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2];
                 }
                 dates[datesToFormat[i]] = date;
             }
             var options = {
                 locale: $(this).data("locale") || "en",
                 daysOfWeekDisabled: $(this).data("days-of-week-disabled") || [0,6],
-                minDate: dates.minDate,
-                maxDate: dates.maxDate,
                 format: $(this).data("format") || "DD.MM.YYYY HH:mm",
                 viewMode: $(this).data("view-mode-default") || "days",
                 showClear: ($(this).data("show-clear-button") !== undefined) ? $(this).data("show-clear-button") : true,
                 calendarWeeks: ($(this).data("show-calendar-weeks") !== undefined) ? $(this).data("show-calendar-weeks") : false,
                 useCurrent: ($(this).data("use-current-datetime") !== undefined) ? $(this).data("use-current-datetime") : false,
-                sideBySide: ($(this).data("datetime-side-by-side") !== undefined) ? $(this).data("datetime-side-by-side") : false
+                sideBySide: ($(this).data("datetime-side-by-side") !== undefined) ? $(this).data("datetime-side-by-side") : false,
+                minDate: dates.minDate,
+                maxDate: dates.maxDate
             };
 
             var currentDatePicker = $(this).datetimepicker(options);