Format date in Kendo Template

Question

I'm trying to format my DateTime object in my Kendo ListView Template but the suggested kendo.toString method doesn't seem to work for me.

I've cut out a lot of code that doesn't relate to my problem to make it a little more simple to understand.

I have a Kendo DataSource that looks like the following:

contactDataSource: new kendo.data.DataSource({
    transport: {
        read: {
            url: "/baa/contact/getcontacts",
            dataType: "json",
            type: "GET"
        }
     },
     schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number", editable: false, nullable: true },
                CompanyName: { type: "string" },
                ContactName: { type: "string" },
                ContactPhone: { type: "string" },
                ContactEmail: { type: "string" },
                ImageUrl: { type: "string" },
                Website: { type: "string" },
                RecentBaas: [
                    {
                        Name: { type: "string" },
                        StatusDisplay: { type: "string" },
                        Status: { type: "number" },
                        LastModDate: { type: "date" }
                    }
                ]
            }
        }
    }
})

And then I have a template on my view that looks like the following:

<script type="text/x-kendo-templ" id="contactTemplate">
    <div class="row">
        <div class="col-md-12">
            # for (var i = 0; i < RecentBaas.length; i++) { #
            # if (RecentBaas[i].Status == 1) { #
                <div class="alert alert-success" role="alert">
                    <p>#=kendo.toString(RecentBaas[i].LastModDate, "F")#</p>
                </div>
            # } #
            # } #
        </div>
    </div>
</script>

I'm not getting any errors in my console when I load this page, but the date is not formatted at all. It still just shows as /Date(1461203814927)/ for example.

I've read the Kendo Documentation on how to use the toString function to format DateTime objects and as far as I can tell I'm doing everything right. But maybe I'm still missing something?

Answer 1

Please try with the below code snippet.

<script type="text/x-kendo-templ" id="contactTemplate">
    <div class="row">
        <div class="col-md-12">
            # for (var i = 0; i < RecentBaas.length; i++) { #
            # if (RecentBaas[i].Status == 1) { #
                <div class="alert alert-success" role="alert"> <p>#=kendo.toString(kendo.parseDate(RecentBaas[i].LastModDate), 'yyyy-MM-dd')#</p>
                </div>
            # } #
            # } #
        </div>
    </div>
</script>

Let me know if its not working