弹出窗口中的 Kendo UI DatePicker答案

【问题标题】：Kendo UI DatePicker in popup弹出窗口中的 Kendo UI DatePicker
【发布时间】：2015-05-09 13:03:19
【问题描述】：

我想在 Kendo 模板中创建一个 Kendo DatePicker。这是我的剑道模板。

    <script id="popup-doc-details" type="text/x-kendo-template">
      <input id="DateTesting" style="width: 180px">
    </script>

如何初始化 Kendo DatePicker。有关更多信息，此模板是弹出窗口的一部分，当从 Kendo DropDown 中选择某些内容时显示，并且 DatePicker 编号将随着提供数据而动态更改。 DropDown 数据就好了。

    [{name:"test1", tags:[{name:"datename",type:"date"},{name:"datename",type:"date"}]}, {name:"test2", tags:[{name:"datename",type:"date"}]}]

示例：如果我从 DropDown 中选择 test1，Kendo 模板会根据标签加载 DatePicker。

我知道我可以在 Kendo 模板中使用循环来实现这一点。但我的问题是如何动态初始化 Kendo DatePicker。

【问题讨论】：

标签： kendo-ui kendo-template kendo-datepicker

【解决方案1】：

您可以像这样使用 MVVM 样式在模板中创建日期选择器

 <input name="selectedDate" type="date" 
        data-bind="value: selectedDate" 
        data-format="dd MMMM yyyy" 
        data-role="datepicker" />

【讨论】：

【解决方案2】：

对于 Angular2/4：

HTML

<!-- Calendar Icon -->
<span #anchor (click)="onToggle()" class="k-icon k-i-calendar"></span>

<!-- Kendo Popup with calendar inside -->
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
    <kendo-calendar class="pointer" [(value)]="examDate" (valueChange)="calendarFunc($event)"></kendo-calendar>
</kendo-popup>

JS/TS

public onToggle(): void {
    this.show = !this.show;        
}

我使用一个显示变量来显示弹出窗口。

对于 Jquery / Knockout：

Popup Info

Calendar Info

HTML

<!-- Anchor Position with calendar Icon iside --> 
<div class="datepicker-anchor">
    <span class="k-icon k-i-calendar" data-bind="click: onToggle.bind($data)" ></span>
</div>
<!-- Popup with calendar inside -->
<div id="popup">
    <div id="calendar"></div>
</div>

JS/TS

private popup: any;

constructor() {

    function onChangeCalendar() {
        var date = this.value();
        self.onToggle();           
    }

    $("#calendar").kendoCalendar({
        change: onChangeCalendar            
    });

    this.popup = $("#popup").kendoPopup({
        anchor: $(".datepicker-anchor")
    }).data("kendoPopup");
    this.popup.close();
}

onToggle = (): void => {
    this.show = !this.show;

    if(this.show)
        this.popup.open();
    else
        this.popup.close();
};

【讨论】：