Return list of datetimes to drop down using Ajax

Question

I have a drop down list that I need to fill with datetime values passed from an ajax call. The values that populate look like this: "/date1234847269/" and not actual dates. I just need the dates to be passed into the drop down list. I do not need the time stamps that are also in the datetime value that is returned from the controller.

I'm not sure if jQuery has issues with handling c# datetime values and not strings. Any help would be appreciated. Thanks

My View:

<select id="ddlDate" class="form-control bold">
    <option value='0'>--Select Date--</option>
</select>

My Ajax Call:

function loadDateDDL(historicalIsChecked, monthlyIsChecked) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetGroupReportDates")',
        dataType: 'json',
        data: { isMonthly: monthlyIsChecked },
        success: function (returnData) {
            convertDate(returnData);
            $("#ddlDate").empty();
            $("#ddlDate").append("<option value='0'>--Select Date--</option>");
                            $.each(returnData, function (value, key) {
                                $("#ddlDate").append($("<option></option>")
                                                    .attr("value", value).text(key));
                            });
            //alert(returnData);
        },
        error: function (ex) {
            alert('Failed to retrieve dates.' + ex);
        }
    });
}

function convertDate(returnData) 
    {
        var date = new Date(returnData);
        return date;
    }

My Controller:

public JsonResult GetGroupReportDates ( Boolean isMonthly )
{
    List<DateTime> reportDates = RealmsModel.RealmsAuditDataInterface ( ).GetGroupQueryRptDates ( isMonthly );

    return new JsonResult ( )
    {
        Data = reportDates,
        MaxJsonLength = Int32.MaxValue
    };
}

Update 1/21/2016:

I am now passing my json data "returnData" to the javascript function below and converting it based on another stack post: How do I format a Microsoft JSON date?

function convertDate(returnData) 
    {
        var date = new Date(returnData);
        return date;
    }

This now gives me the error "date = Invalid Date {}, returnData = ["/Date(1451628000000)/"]". I feel like I'm getting close. Any help is appreciated.

christophano · Answer 1 · 2016-01-21T16:29:59.857

0

The format you're seeing is the old "microsoft" way of formatting dates. There are 2 ways to get around it.

One way would be to use the JSON.Net serialiser instead of the built in JavaScriptSerializer, as it (since version 4.5) formats dates so that they can be automatically parsed.

Another (quicker) way would simply be to extract the numbers from the date in it's current format as pass them to a new javascript Date object.

function toDate(value) {
  return new Date(parseInt(/Date\(([^)]+)\)/.exec(value)[1], 10));
}

edited Jan 21 '16 at 16:29

answered Jan 20 '16 at 22:49

christophano

915
2
20
29

based on your comment I found another stack question: http://stackoverflow.com/questions/206384/format-a-microsoft-json-date I tried: var date = new Date(returnData); and I get invalid date...any Ideas? – coggicc Jan 21 '16 at 14:20
You still need to extract the number from the string (`/Date\(([^)]+)\)/.exec(value)[1]`) and parse this as an int (`parseInt({value}, 10)`) too. You can't just pass "/Date(1451628000000)/" to a `Date` constructor. – christophano Jan 21 '16 at 14:32
That just returns "returnData = ["/Date(1451628000000)/"]", which is the same thing that is passed into your function. – coggicc Jan 21 '16 at 14:42

score 0 · Answer 2 · answered Jan 21 '16 at 15:35

0

I resolved this with the following:

function convertDate(returnData) 
{
    var pattern = /Date\(([^)]+)\)/;
    var results = pattern.exec(returnData);
    var dt = new Date(parseFloat(results[1]));
    return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
}

answered Jan 21 '16 at 15:35

coggicc

245
2
5
13

This answer does the same as mine, with the exception of the date formatting on your final line. – christophano Jan 21 '16 at 16:40
Add the last line to your answer and I'll mark your's correct. – coggicc Jan 21 '16 at 16:52

Return list of datetimes to drop down using Ajax

2 Answers2