Дата Время JQuery datetimepicker

Question

У меня возникли проблемы с отображением даты на странице в текстовом поле. Посмотреть на Fiddle: http://jsfiddle.net/LkpPJ/5/

обозреватель Internet Explorer и Firefox шоу: 2013-12-16T01: 00

Chrome показывает: 12/16/2013 1:00 утра

Консоль Javascript в Internet Explorer и Firefox говорит :

Ошибка разбор строка дата/время: Неожиданный буквальная в положении 2 строка дата/время = 2013-12-16T01: 00 TimeFormat = чч: мм ТТ DateFormat = мм/дд/гг

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 Ваши потребности обновляются. Кроме того, необходимо указать DateFormat, так как вы не используете по умолчанию:

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/

Edit: я взял на себя смелость немного улучшения кода. Вот обновленная скрипка: http://jsfiddle.net/LkpPJ/7/, которая хранит ваши параметры в переменной и только проверяет Modernizr один раз.

Answer 2

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

Это оставит текстовое поле ввода как DateTime-местный для браузеров, которые поддерживают его. Если нет, то он будет использовать 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')); 
     } 
    }); 

}); 

}