How to format dates in Kendo DatePicker from array pulled from a View

Question

Using Telerik's KendoUI DatePicker in an asp.NET MVC project which is also using Entity Framework. I'm adding an enhancement to an existing project to highlight dates on the DatePicker when a record for that date exists in the Oracle database.

In the View:

@{
    var dateList = HelperMethodClass.GetRecordDates(model);
    var dateString = dateList.Aggregate("", (current, date) => current + (date.Equals(dateList.Last()) ? date.ToString("yyyy-MM-dd") : date.ToString("yyyy-MM-dd") + ","));
}

GetRecordDates() is a method in a HelperMethodClass that queries the database for all the dates with a record for the model being passed. I format it so I can later control the parsing (see below). Later in a table in the same view, the DatePicker is placed in the table and I store the dates variable to pull in a different .cshtml page (which is under the View -> Shared -> EditorTemplates folder of the project):

<div class="leftActions">
    <input type="hidden" id="myDates" value="@dateString" />
    <table>
        <tr>
            <td>@Html.EditorFor(m => m.Date, new {@sourcePage = "MyView"})</td>
        <tr>
    </table>
</div>

Here's the other .cshtml page:

@model DateTime?

@{
    var calendar = Html.Kendo().DatePickerFor(m => m).Format("yyyy-MM-dd");

    if (ViewData["sourcePage"] == "MyView")
    {
        calendar.Footer("<p>" + DateTime.Today.ToLongDateString() + "</p><span id=\"legend\">Record Exists<span>");
        calendar.MonthTemplate("# if ($.inArray(+data.date, recordDates) != -1) { #" + "<div class=\"reportDate\">" +
                               "</div>" + "# } #" + "#= data.value #");
    }
}

<span style="width: 6em">
    @calendar
</span>

<script>
    var dates = $('#myDates');
    var dateArray = dates.toString().split(',');
    var recordDates = d(dateArray);
    function d(x) {
        var myArray = [];
        for (var i = 0; i < x.length; i++) {
            myArray.push(new Date(x[i].substring(0, 4), x[i].substring(5, 7), x[i].substring(8)));
        }
        return myArray;
    };
</script>

<style>
    #legend, .reportDate {
         background-color:rgba(0,0,0,.2);
    }

     .reportDate {
         position: absolute;
         width: 32px;
         height: 28px;
     }
</style>

I believe my issue is when I get to the EditorTemplate file (where the DatePicker is actually created). I put a break-point at my code-behind GetRecordDates() method to see what was happening. The View variables are working as expected, and the dates variable in the EditorTemplate is pulling the date string from the View as expected, but that's where it stops. I tried putting a

in the View and use a .innerHtml in the EditorTemplate to set the text of the

equal to either the dateArray or recordDates variables, but, with debugging enabled on the browser, it shows an error that those two variables are null. The calendar shows up fine with the footer, but the dates aren't being highlighted as expected. If I hard-code the date array into the JavaScript, it highlights the dates. I've also tried passing the list created by the query directly into my dates variable, but the result is the same.

I'm new to web app development, so I imagine the issue can be fixed if I understood how the code is interpreted and run when the page is accessed. Any ideas on how I can highlight the dates from an array being created in the code-behind?

You might wonder about the code design in this one and why I'm doing it like this. I was brought onto the project about a year and half after the app went live, so I didn't have any input on the design (not that I would have been much help). I was told this is the way I have to design my enhancement, so if I could get a solution to fix it in the current design, I'd greatly appreciate it. — user3517375, Jun 29 '16 at 20:32
Scripts should never be in EditorTemplates. Not only do you have [inline scripts](http://stackoverflow.com/questions/19002690/why-inline-javascript-is-bad), but you can have duplicate scripts. Do not do this. — , Jun 29 '16 at 23:34
@StephenMuecke, Hit another issue when completing this so ended up scrapping the Kendo datepicker and using jQuery's datepicker instead, which was a lot easier. Thanks for the 'Best Practice'/'Don't be stupid' advice :) — user3517375, Nov 29 '16 at 00:52

score 1 · Accepted Answer · answered Jun 29 '16 at 21:20

I was able to get your code to work(paraphrased) in one of my views but I had to make a couple changes to the d() function.

I changed

var dates = $('#myDates');

to

var dates = $('#myDates').val();

and

myArray.push(new Date(x[i].substring(0, 4), x[i].substring(5, 7), x[i].substring(8)));

to

myArray.push(new Date(x[i].substring(0, 4), x[i].substring(5, 7) - 1, x[i].substring(8)).getTime());

And, then it worked for me using a hardcoded date string:

@{
    var dateString = "2016-06-28,2016-06-29";
}

The problem was that without the .val(), recordDates did not contain any valid dates and without the .getTime() the

$.inArray(+data.date, recordDates)

was comparing a numeric date to a date object.

Once I got them both as numerical, my June 28 and 29 had grey boxes around them.

Tried it, same result. I even changed my `dateString` variable to a hardcorded date string, as you show. — user3517375, Jun 29 '16 at 21:40
Wait, just kidding. I was experimenting with passing the list directly into `dates` and using that in the `inArray()`. Changed `inArray()` back to what it needed to be. Thank you!! — user3517375, Jun 29 '16 at 22:24

How to format dates in Kendo DatePicker from array pulled from a View

1 Answers1