use HTML5 date and datetime-local inputs with jquery as fallback, make the year easier to edit

Author: rottaran

script/EntryEditor.js

@@ -14,28 +14,39 @@ var EntryEditor = function($form) {
     $form.find('.struct .hashint').tooltip();
 
     /**
-     * Attach datepicker to date types
+     * Attach datepicker to date types.
+     * Only if browser does not support HTML5 date input.
      */
-    $form.find('input.struct_date').datepicker({
-        dateFormat: 'yy-mm-dd'
-    });
+    var testelem = document.createElement('input');
+    testelem.setAttribute("type", "date");
+    if (testelem.type === "text") {
+        $form.find('input.struct_date').datepicker({
+            dateFormat: 'yyyy-mm-dd',
+            changeYear: true,
+        });
+    }
 
     /**
-     * Attach datepicker to datetype types, keeps time part
+     * Attach datepicker to datetype types, keeps time part.
+     * Only if browser does not support HTML5 datetime-local input.
      */
-    $form.find('input.struct_datetime').datepicker({
-        dateFormat: 'yy-mm-dd',
-        onSelect: function (date, inst) {
-            var $input = jQuery(this);
-            var both = inst.lastVal.split(' ', 2);
-            if (both.length == 2) {
-                date += ' ' + both[1];
-            } else {
-                date += ' 00:00:00';
+    testelem.setAttribute("type", "datetime-local");
+    if (testelem.type === "text") {
+        $form.find('input.struct_datetime').datepicker({
+            dateFormat: 'yyyy-mm-dd',
+            changeYear: true,
+            onSelect: function (date, inst) {
+                var $input = jQuery(this);
+                var both = inst.lastVal.split(' ', 2);
+                if (both.length == 2) {
+                    date += ' ' + both[1];
+                } else {
+                    date += ' 00:00:00';
+                }
+                $input.val(date);
             }
-            $input.val(date);
-        }
-    });
+        });
+    }
 
     /**
      * Attach image dialog to image types

types/Date.php

@@ -48,6 +48,7 @@ public function valueEditor($name, $rawvalue, $htmlID) {
             'name' => $name,
             'value' => $rawvalue,
             'class' => 'struct_date',
+            'type' => 'date',  // HTML5 date picker
             'id' => $htmlID,
         );
         $attributes = buildAttributes($params, true);

types/DateTime.php

@@ -46,6 +46,7 @@ public function valueEditor($name, $rawvalue, $htmlID) {
             'name' => $name,
             'value' => $rawvalue,
             'class' => 'struct_datetime',
+            'type' => 'datetime-local', // HTML5 datetime picker
             'id' => $htmlID,
         );
         $attributes = buildAttributes($params, true);