Quiver Quiver - 3 months ago 29
Javascript Question

Format date in Kendo Template

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

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

Comments