CODEWITHSUNDEEP
c#jquerykendo-ui
udayangana
udayangana

Reputation: 235

Load C# date time to KendoUI Date picker

I'm Trying to Load DateTime to KendoUI DatetimePicker. But It shows like /Date(1381964400000)/. I need to get it Like 10/17/2013

this is my Code

date time picker:

@(Html.Kendo().DatePicker().Name("invDate")

Script for loading date time to control

$("#invLoad").click(function (e) {
            $.ajax({
                url: "@Url.Content("Invoice/ItemHeaderByTrnKy")",
                data: { trnNo: $('#trnNo').val() },
                dataType: "Json",
                type: "POST",
                success: function (data) {
                    if (data != null) {

                        $("#invDate").val(data.TrnDt);

                    }
                    else {
                        ClearAll();
                    }
                },
                error: function (e) {
                    ClearAll();
                }
            });

Upvotes: 2

Views: 1161

Answers (1)

Corey
Corey

Reputation: 16564

The first option is to attempt to parse the string into a JavaScript Date object, then pass that object to the kendoDatePicker widget:

success: function (data) {
    if (data) {
        var dateval = parseInt(data.TrnDt.src.replace(/\/Date\((\d+)\)\//, "$1"));
        if (!isNaN(dateval)) {
            var d = new Date(dateval);
            $("#invDate").data("kendoDatePicker").value(d);
    } else {
        ClearAll();
    }
},

Steps:

  1. Extract the numeric value from the string with data.TrnDt.src.replace(/\/Date\((\d+)\)\//, "$1") and parse to integer.
  2. Create a Date object
  3. Pass the Date object to the kendoDatePicker's value() function.

While this mostly works, the result may not be precisely what you expect. The .NET JSON encoding will likely produce a local time offset, while the Date() constructor expects a value as a UTC offset, then coverts to local time. As a result your output will be offset by a number of hours depending on the timezone of the server and the timezone of the client.

On my client, parsing the date value you provided gives a result of Thu Oct 17 2013 09:00:00 GMT+1000. This tells me that you are probably running in one of the GMT+0100 time-zones.

The only reliable way to get around this is the second option: return all of your Date values as strings that can be interpreted by the Date() constructor.

If you format the date value as dd MMM yyyy on the server and pass the resulting string to new Date() then you will get the date value you expected. If you are simply returning an object via return Json(result); in the ASP controller, the simplest way to achieve this is to add a translation property to your object:

public string strTrnDt { get { return TrnDt.ToString("dd MMM yyyy"); } }

Then your code becomes:

success: function (data) {
    if (data) {
        var d = new Date(data.strTrnDt);
        $("#invDate").data("kendoDatePicker").value(d);
    } else {
        ClearAll();
    }
},

Or even simpler:

success: function (data) {
    if (data) {
        $("#invDate").val(data.strTrnDt);
    } else {
        ClearAll();
    }
},

Upvotes: 1

Related Questions