Date Time Jquery datetimepicker

Question

I am having trouble with displaying a date time on a page in a Textbox. See on Fiddle: http://jsfiddle.net/LkpPJ/5/

Internet explorer and Firefox show: 2013-12-16T01:00

Chrome shows: 12/16/2013 01:00 AM

Javascript Console in Internet explorer and Firefox says:

Error parsing the date/time string: Unexpected literal at position 2 date/time string = 2013-12-16T01:00 timeFormat = hh:mm TT dateFormat = mm/dd/yy

ASP.NET C# Code:

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 code:

 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

After consulting the documentation for timeFormat yours needs updated. You also need to specify a dateFormat since you aren't using the default:

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

Here is a working fiddle: http://jsfiddle.net/LkpPJ/6/

Edit: I took the liberty of improving your code slightly. Here's an updated fiddle: http://jsfiddle.net/LkpPJ/7/ which stores your options into a variable and only checks the Modernizr once.

Answer 2

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

This will leave the input text box as datetime-local for browsers that support it. If not, then it will use the jquery ui datepicker with the timepicker addon.

Please comment with any tips that you may have to optimize the code.

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

});

}