FSN#38683 flex dates zijn nu native, met jQuery datepicker als backup als er geen native datepicker is

svn path=/Website/trunk/; revision=37292

APPL/Shared/kenmerk_common.inc

@@ -1711,36 +1711,57 @@ function listKenmerk(sql, module, key, props)
         // Zie ook calendar.inc. Delen code was iets te lastig
         $(function()
         {
-            if ($.datepicker) // Is er niet mobile
+            if (typeof Modernizr == "undefined" || !Modernizr.inputtypes.date)
             {
-              $(".fldflexD").not("[readonly]").datepicker({
-                      // buttonImage: "../pictures/calendar2.png",
-                      // buttonImageOnly: true,
-                      showOn: "none",
-                      duration: 'fast',
-                      dateFormat: 'dd-mm-yy', // zo verwacht de flex-code het.
-                      changeYear: true,
-                      changeMonth: true,
-                      duration: 'fast',
-                      beforeShow: function(input, inst) { setTimeout("FcltMgr.resized(window)", 100) },
-                      dayNames: calendar_names.days,
-                      dayNamesMin: calendar_names.daysMin,
-                      dayNamesShort: calendar_names.daysMin,
-                      firstDay: 1,
-                      monthNamesShort: calendar_names.monthsShort,
-                      monthNames: calendar_names.months,
-                      showWeek: true
-                  });
-<%
-              for (i=0; i < dpYearRanges.length; i++)
+              if ($.datepicker)
               {
-                fld_id  = dpYearRanges[i].id;
-                fld_val = dpYearRanges[i].range;
-%>
-                $("#<%=fld_id%>").datepicker("option", "yearRange", "<%=fld_val%>");
+
+                // jQuery datepicker
+                $(".fldflexD").not("[readonly]").datepicker({
+                        // buttonImage: "../pictures/calendar2.png",
+                        // buttonImageOnly: true,
+                        showOn: "none",
+                        duration: 'fast',
+                        dateFormat: 'dd-mm-yy', // zo verwacht de flex-code het.
+                        changeYear: true,
+                        changeMonth: true,
+                        duration: 'fast',
+                        beforeShow: function(input, inst) { setTimeout("FcltMgr.resized(window)", 100) },
+                        dayNames: calendar_names.days,
+                        dayNamesMin: calendar_names.daysMin,
+                        dayNamesShort: calendar_names.daysMin,
+                        firstDay: 1,
+                        monthNamesShort: calendar_names.monthsShort,
+                        monthNames: calendar_names.months,
+                        showWeek: true
+                    });
 <%
-              }
+                for (i=0; i < dpYearRanges.length; i++)
+                {
+                  fld_id  = dpYearRanges[i].id;
+                  fld_val = dpYearRanges[i].range;
 %>
+                  $("#<%=fld_id%>").datepicker("option", "yearRange", "<%=fld_val%>");
+<%
+                }
+%>
+              }
+            }
+            else
+            {
+              // Native datepicker
+              $(".fldflexD").not("[readonly]").each(function() {
+
+                  // Make this a native datepicker
+                  $(this).attr("type", "date");
+
+                  // Native, so change date format from [DD-MM-YYYY] -> [YYYY-MM-DD] (native format)
+                  $(this).val($(this).attr("value").split("-").reverse().join("-"));
+
+                  // Change hidden type field from 'D' to 'DN'
+                  var nativeId = $(this).attr("id").slice(0,-3);
+                  $("input:hidden#"+nativeId+"t").val("DN");
+              });
             }
         });
       </script><%
@@ -2343,6 +2364,15 @@ function flexkenmerken2jsondata(params)
             var kv = getFParam(flex + "val", "");    // kenmerk waarde
             var ke = Request.Form(flex + "e").Count; // Flexkenmerk is een expressie.
 
+            // Native datepicker
+            if (kt == "DN")
+            {
+                kt = "D";
+                // Change format from [YYYY-MM-DD] -> [DD-MM-YYYY] for Oracle
+                // It's format is already checked by checkKenmerk()
+                kv = kv.split("-").reverse().join("-");
+            }
+
             // ATTENTIE: Als het een numeriek/decimaal veld is, kan het zijn dat er een komma in voorkomt die eigenlijk een punt moet zijn.
             //           Als het een numeriek/decimaal veld is, kan het ook een checkbox zijn
             if (kt == "N")

APPL/Shared/kenmerk_js.asp

@@ -86,14 +86,24 @@ function checkKenmerk(field, show, ktype, klen, kdec, kmin, kmax)
       if (ktype == 'D')
       {
         $(field).change(cal_show_onChange);
+
+        // Native datepicker of jQuery datepicker?
+        var native = !(typeof Modernizr == "undefined" || !Modernizr.inputtypes.date);
+
         // Test of er nu een geldig datumformaat staat.
-        var arr = /^(\d{1,2})[-](\d{1,2})[-](\d{1,4})$/.exec(value);
+        // [YYYY-MM-DD] for native pickers,
+        // [DD-MM-YYYY] voor jQuery datepicker
+        var regex = native ? /^(\d{1,4})[-](\d{1,2})[-](\d{1,2})$/
+                           : /^(\d{1,2})[-](\d{1,2})[-](\d{1,4})$/;
+        var arr = regex.exec(value);
         if (arr)
         {
-          var dt = new Date( arr[3], arr[2] -1, arr[1] );
-          if ((arr[1] != dt.getDate()) ||
-              (arr[2] != dt.getMonth() + 1) ||
-              (arr[3] != dt.getYear() && arr[3] != dt.getFullYear()))
+          var date = native ? arr[3] : arr[1];
+          var month = arr[2];
+          var year = native ? arr[1] : arr[3];
+          var dt = new Date(year, month-1, date);
+
+          if (date != dt.getDate() || month != dt.getMonth() + 1 || (year != dt.getYear() && year != dt.getFullYear()))
           {
             valid = false;
           }