Элемент управления Datepicker не отображается правильно внутри шаблона пользовательского интерфейса kendo

Question

У меня есть шаблон пользовательского интерфейса кендо с элементом управления DatePicker

<script type="text/x-kendo-template" id="tmplStep1">     
 <form>
    Date: <input id="datepicker" maxlength="10"/>  
    <i>(mm/dd/yyyy)</i><br />  
 </form>  
</script>

Я использую всплывающее окно Windows для отображения шаблона таким образом

var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
           .kendoWindow({
                 title: "Form",
                  modal: true,
                  visible: false,
                  resizable: false,
                  width: 100,
                  appendTo: "form#frm"                     
              }).data("kendoWindow");

         wnd.content(detailsTemplate(dataItem));            
         wnd.center().open();

Я знаю, мне нужно инициализировать средство выбора даты, но я не знаю, как это сделать. Я поместил приведенную ниже инструкцию за пределы шаблона, но, очевидно, она не работает, отображаемый элемент управления представляет собой простое текстовое поле.

<script>
      $("#datepicker").kendoDatePicker();
</script>

Кто-нибудь знает как это решить?

Answer 1

Вызов $("#datepicker").kendoDatePicker(); сразу после того, как вы установите шаблон в качестве содержимого окна, потому что до этого шаблон еще не был частью DOM:

...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();