CODEWITHSUNDEEP
c#javascriptjqueryasp.netdatetimepicker
user1605822
user1605822

Reputation: 99

Date Time Jquery datetimepicker

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

Upvotes: 1

Views: 2613

Answers (2)

user1605822
user1605822

Reputation: 99

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

});

}

Upvotes: 0

Daniel
Daniel

Reputation: 13122

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.

Upvotes: 1

Related Questions