Use HTML5 date input fields instead of text fields with jquery ui date pickers (#19468).

Patch by Jan Schulz-Hofen.

git-svn-id: http://svn.redmine.org/redmine/trunk@15375 e93f8b46-1217-0410-a6f0-8f06a7374b81

1 files changed, 32 insertions, 5 deletions

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 985467b4c..743b14ff6 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -185,12 +185,12 @@ function buildFilterRow(field, operator, values) {
   case "date":
   case "date_past":
     tr.find('td.values').append(
-      '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_1" size="10" class="value date_value" /></span>' +
-      ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +
+      '<span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_1" size="10" class="value date_value" /></span>' +
+      ' <span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +
       ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" /> '+labelDayPlural+'</span>'
     );
-    $('#values_'+fieldId+'_1').val(values[0]).datepicker(datepickerOptions);
-    $('#values_'+fieldId+'_2').val(values[1]).datepicker(datepickerOptions);
+    $('#values_'+fieldId+'_1').val(values[0]).datepickerFallback(datepickerOptions);
+    $('#values_'+fieldId+'_2').val(values[1]).datepickerFallback(datepickerOptions);
     $('#values_'+fieldId).val(values[0]);
     break;
   case "string":
@@ -587,7 +587,7 @@ function beforeShowDatePicker(input, inst) {
       }
       break;
   }
-  $(input).datepicker("option", "defaultDate", default_date);
+  $(input).datepickerFallback("option", "defaultDate", default_date);
 }
 
 (function($){
@@ -723,6 +723,33 @@ function toggleDisabledOnChange() {
 function toggleDisabledInit() {
   $('input[data-disables], input[data-enables]').each(toggleDisabledOnChange);
 }
+
+(function ( $ ) {
+
+  // detect if native date input is supported
+  var nativeDateInputSupported = true;
+
+  var input = document.createElement('input');
+  input.setAttribute('type','date');
+  if (input.type === 'text') {
+    nativeDateInputSupported = false;
+  }
+
+  var notADateValue = 'not-a-date';
+  input.setAttribute('value', notADateValue);
+  if (input.value === notADateValue) {
+    nativeDateInputSupported = false;
+  }
+
+  $.fn.datepickerFallback = function( options ) {
+    if (nativeDateInputSupported) {
+      return this;
+    } else {
+      return this.datepicker( options );
+    }
+  };
+}( jQuery ));
+
 $(document).ready(function(){
   $('#content').on('change', 'input[data-disables], input[data-enables]', toggleDisabledOnChange);
   toggleDisabledInit();