日期时间jQuery datetimepicker

Question

我无法在文本框中的页面上显示日期时间。 在小提琴上查看： http : //jsfiddle.net/LkpPJ/5/

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

Chrome浏览器显示：2013/12/16上午01:00

Internet Explorer和Firefox中的Javascript控制台说：

解析日期/时间字符串时出错：位置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

在查阅有关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/

编辑：我采取了稍微改进您的代码的自由。 这是更新的小提琴： http : //jsfiddle.net/LkpPJ/7/ ，它将您的选项存储到变量中，并且只检查一次Modernizr 。

Answer 2

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

对于支持它的浏览器，这会将输入文本框保留为datetime-local。 如果没有，那么它将使用带有时间选择器插件的jquery ui datepicker。

请评论您可能需要优化代码的任何提示。

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'));
        }
    });

});

}