How to use KendoDatePicker within x-kendo-template in .NET Core - asp.net-core

Question

I have a popup editor template working for when I want to add/edit a row in my Kendo grid and it is bound to the model's properties. The issue is that I am unable to get Kendo widgets (e.g. datepicker or dropdownlist) to generate inside the kendo-template (primarily wanting to use taghelpers). Nor have I been able to use jQuery to convert inputs into kendo widgets on $(document).ready(). How can I do this?
My grid:
<kendo-grid name="accountsGrid" height="500" on-detail-init="onDetailInit">
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
<transport>
<read url="?handler=Accounts&id=#Model.Id" data="getAntiForgeryKeyValue" type="POST" />
<create url="?handler=CreateAccount&id=#Model.Id" data="getAntiForgeryKeyValue" type="POST" />
<update url="?handler=EditAccount&id=#Model.Id" data="getAntiForgeryKeyValue" type="POST" />
</transport>
<schema>
<model id="AccountId">
<fields>
<field name="LastUpdateDate" type="Date"></field>
</fields>
</model>
</schema>
</datasource>
<columns>
<column field="Id" hidden="true" />
<column field="AccountName"
title="Account Name"
header-html-attributes='HeaderHtmlAttribute(title:"Account Name")' />
<column field="LastUpdateDate"
title="Last Updated"
format="{0:MMMM dd, yyyy}"
header-html-attributes='HeaderHtmlAttribute(title:"Last Updated")' />
<column title="Actions"
header-html-attributes='HeaderHtmlAttribute(title:"Actions")'
html-attributes='new Dictionary<string, object> {["class"] = "center-cell" }'>
<commands>
<column-command name="edit" />
</commands>
</column>
</columns>
<toolbar>
<toolbar-button name="create" template="getTelerikButton('Add')" />
</toolbar>
<editable mode="popup" template-id="accountEditorTemplate" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
</pageable>
<scrollable enabled="true" />
My Editor Template:
<script id="accountEditorTemplate" type="text/x-kendo-template">
<div class="row editor-padding">
#*Account Details*#
<div class="col-md-6 col-xs-12">
<h5 class="editorTemplateHeader">Account Details</h5>
<div class="k-edit-label">
<label for="AccountName">Account Name</label>
</div>
<div class="k-edit-field">
<input required type="text" class="k-input k-textbox" name="AccountName" validationmessage="Account Name is required" maxlength="8" />
</div>
<div class="k-edit-label">
<label for="Description">Description</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox" name="Description" maxlength="100" />
</div>
<div class="k-edit-label">
<label for="ExpirationDate">Expiration Date</label>
</div>
<div class="k-edit-field">
#*I would like to do this, but nothing appears*#
<kendo-datepicker name="ExpirationDate"></kendo-datepicker>
</div>
</div>
</div>

Answer 1

I resolved the problem. It involved using data- syntax. Below is the solution:
<div class="k-edit-field">
<input required type="text"
name="ExpirationDate"
data-type="date"
data-bind="value:ExpirationDate"
data-role="datepicker"
validationmessage="Expiration Date is required" />
</div>