日期時間jquery datetimepicker

Question

我無法在文本框中的頁面上顯示日期時間。看到小提琴：http://jsfiddle.net/LkpPJ/5/

Internet Explorer和Firefox顯示：2013-12-16T01：00

Chrome會顯示：2013年12月16日上午01:00

JavaScript控制檯在Internet Explorer和Firefox說：

錯誤解析所述日期/時間字符串：意外字面在位置2 日期/時間字符串= 2013-12-16T01：00 TIMEFORMAT = HH：MM TT DATEFORMAT = MM/DD/YY

ASP.NET C＃代碼：

StartDatePicker.Text = dtStartDate.ToString("yyyy-MM-ddTHH:mm"); 
<asp:TextBox ID="EndDatePicker" runat="server" CssClass="rounded dateinput" ClientIDMode="Static" TextMode="DateTimeLocal"></asp:TextBox> 
<asp:TextBox ID="StartDatePicker" runat="server" CssClass="rounded dateinput" ClientIDMode="Static" TextMode="DateTimeLocal"></asp:TextBox> 

Javascript代碼：

if (!Modernizr.inputtypes.date) { 
     $(function() { 
      $("#StartDatePicker").datetimepicker({ 
       timeFormat: "hh:mm TT", 

       minuteGrid: 10, 
       addSliderAccess: true, 
       sliderAccessArgs: { touchonly: false } 
      }); 
     }); 
    }; 
    if (!Modernizr.inputtypes.date) { 
     $(function() { 
      $("#EndDatePicker").datetimepicker({ 
       timeFormat: "hh:mm TT", 

       minuteGrid: 10, 
       addSliderAccess: true, 
       sliderAccessArgs: { touchonly: false } 
      }); 
     }); 
    }; 

Answer 1

諮詢documentation for timeFormat你需要更新之後。您還需要指定一個日期格式，因爲你不使用默認：

if (!Modernizr.inputtypes.date) { 
    $(function() { 
     $("#StartDatePicker").datetimepicker({ 
      dateFormat: "yy-mm-dd", 
      timeFormat: "'T'HH:mm", 
      minuteGrid: 10, 
      addSliderAccess: true, 
      sliderAccessArgs: { 
       touchonly: false 
      } 
     }); 
    }); }; 

這裏是工作提琴：http://jsfiddle.net/LkpPJ/6/

編輯：我花了小幅改進代碼的自由。這是一個更新的小提琴：http://jsfiddle.net/LkpPJ/7/它將您的選項存儲到一個變量，並且只檢查一次Modernizr。

Answer 2

http://jsfiddle.net/LkpPJ/15/

這將使輸入文本框的日期時間本地爲支持它的瀏覽器。如果沒有，那麼它將使用jquery ui datepicker和timepicker插件。

請對任何可能需要優化代碼的提示發表評論。

if (!Modernizr.inputtypes.date) { 
$(function() { 
    var d = Date.parse($('#StartDatePicker').val()); 
    $('#StartDatePicker').val($.format.date(d, "yyyy-MM-dd hh:mm a")); 
    d = Date.parse($('#EndDatePicker').val()); 
    $('#EndDatePicker').val($.format.date(d, "yyyy-MM-dd hh:mm a")); 

    var startDateTextBox = $('#StartDatePicker'); 
    var endDateTextBox = $('#EndDatePicker'); 
    startDateTextBox.datetimepicker({ 
     dateFormat: "yy-mm-dd", 
     timeFormat: "hh:mm TT", 
     minuteGrid: 10, 
     addSliderAccess: true, 
     sliderAccessArgs: { 
      touchonly: false 
     }, 
     onClose: function (dateText, inst) { 
      if (endDateTextBox.val() != '') { 
       var testStartDate = startDateTextBox.datetimepicker('getDate'); 
       var testEndDate = endDateTextBox.datetimepicker('getDate'); 
       if (testStartDate > testEndDate) endDateTextBox.datetimepicker('setDate', testStartDate); 
      } else { 
       endDateTextBox.val(dateText); 
      } 
     }, 
     onSelect: function (selectedDateTime) { 
      endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate')); 
     } 
    }); 

    endDateTextBox.datetimepicker({ 
     dateFormat: "yy-mm-dd", 
     timeFormat: "hh:mm TT", 
     minuteGrid: 10, 
     addSliderAccess: true, 
     sliderAccessArgs: { 
      touchonly: false 
     }, 
     onClose: function (dateText, inst) { 
      if (startDateTextBox.val() != '') { 
       var testStartDate = startDateTextBox.datetimepicker('getDate'); 
       var testEndDate = endDateTextBox.datetimepicker('getDate'); 
       if (testStartDate > testEndDate) startDateTextBox.datetimepicker('setDate', testEndDate); 
      } else { 
       startDateTextBox.val(dateText); 
      } 
     }, 
     onSelect: function (selectedDateTime) { 
      startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate')); 
     } 
    }); 

}); 

}