Question

我必须创建自己的表单来创建Kendo Scheduler事件。

内置表单有一个功能，如果勾选了isAllDay复选框，则datetimepickers变成了datepickers，反之亦然...

我有以下

 <div style="width:300px">
    <br />
    <div>
      <label for="start">Start</label>
      <input id="start" style="width: 100%;" />
    </div>
    <br />
    <div>
      <label for="end">End</label>
      <input id="end" style="width: 100%;" />
    </div>
  </div>
  <div>
    <br />
    <div>
      <label for="isAllDay">
      <input type="checkbox" id="isAllDay" name="isAllDay" onchange="isAllDayChanged()"> Anytime</label>
    </div>
  </div>


<script type="text/javascript">

    //Checkbox On Change Functions
    function isAllDayChanged() {
        setDateTimePickers();
    }

    //Set Datetime pikers with or without time
    function setDateTimePickers() {
        if($('#isAllDay').prop('checked')) {
            // create DateTimePicker from input HTML element for start and end datepickers
            $("#start").kendoDatePicker({
                value:new Date()
            });
            $("#end").kendoDatePicker({
                value:new Date()
            });
        } else {
            // create DatePicker from input HTML element for start and end datepickers
            $("#start").kendoDateTimePicker({
                value:new Date()
            });
            $("#end").kendoDatePicker({
                value:new Date()
            });
        }
    }

    $(document).ready(function () {
        setDateTimePickers();
    };
  </script>

在初始页面加载中，开始和结束输入被初始化为datetimepickers。选中该复选框后，datetimepicker中会出现一个datepicker，而不是替换datetimepicker。

如何删除元素并根据需要重新初始化？

更新

根据The_Black_Smurf的回答，我将脚本更新为...

<script type="text/javascript">
     $(document).ready(function () {
        //initalise start and end as DateTimePickers
        $("#start").kendoDateTimePicker({
            value:new Date()
        });
        $("#end").kendoDateTimePicker({
            value:new Date()
        });

    });

    function isAllDayChanged() {
        setDateTimePickers();
    }

    //Set Datetime pikers with or without time

    function setDateTimePickers() {
        if ($('#isAllDay').prop('checked')) {
            // isAllDay has been checked get rid of initial DateTimePicker and re-initialise as DatePicker
            // do this for both start and end elements
            var kendoDateTimePicker = $("#start").data("kendoDateTimePicker");
            kendoDateTimePicker.destroy();
            $("#start").empty();
            $("#start").kendoDatePicker({
                value:new Date()
            });
            var kendoDateTimePicker = $("#end").data("kendoDateTimePicker");
            kendoDateTimePicker.destroy();
            $("#end").empty();
            $("#end").kendoDatePicker({
                value:new Date()
            });
        } else {
            // isAllDay is not checked get rid of DatePicker and re-initialise as DateTimePicker
            // do this for both start and end elements
            var kendoDatePicker = $("#start").data("kendoDatePicker");
            kendoDatePicker.destroy();
            $("#start").empty();
            $("#start").kendoDateTimePicker({
                value:new Date()
            });
            var kendoDatePicker = $("#end").data("kendoDatePicker");
            kendoDatePicker.destroy();
            $("#end").empty();
            $("#end").kendoDateTimePicker({
                value:new Date()
            });
        }
    }
</script>

结果仍然相同......新的剑道元素是原始内部的实体。

Answer 1

每个kendo小部件都有destroy方法，该方法将清除与小部件相关的所有支持。在您调用destroy方法后，您可以清空DOM元素，并且如果需要，您将能够使用该元素重新创建新的小部件。

这是一个将kendoDatePicker转换为kendoDateTimePicker的示例代码：

var kendoDatePicker = $("#start").data("kendoDatePicker");
kendoDatePicker.destroy();
var widget = $("#start").closest(".k-widget");
var parent = widget.parent();

widget.remove();
parent.append("<input id=\"start\" />");

$("#start").kendoDateTimePicker({...});

<强>更新

我忘了提及......一些kendo小部件将被包装在新的DOM元素中（这就是datePicker和dateTimePicker的情况）。所以这意味着你用作参考的元素不再是元素的根。从那里，您必须找到窗口小部件的根（通常是与k-widget类最接近的父节点）并替换该节点。我的更新示例将让您了解逻辑。

Answer 2

OK固定....我现在在输入周围有一个包装div，这些是我空的元素。然后我重新创建输入，然后将它们作为datetimepicker或datepicker初始化。

    <div style="width:300px">
    <br />
    <div>
      <label for="start">Start</label>
      <div id="startDiv">
        <input id="start" style="width: 100%;" />
      </div>
    </div>
    <br />
    <div>
      <label for="end">End</label>
      <div id="endDiv">
        <input id="end" style="width: 100%;" />
      </div>
    </div>
  </div>
  <div>
    <br />
    <div>
      <label for="isAllDay">
      <input type="checkbox" id="isAllDay" name="isAllDay" onchange="isAllDayChanged()"> Anytime</label>
    </div>
  </div>


<script type="text/javascript">

    //Checkbox On Change Functions
    function isAllDayChanged() {
        setDateTimePickers();
    }

    function setDateTimePickers() {
    if ($('#isAllDay').prop('checked')) {
        // isAllDay has been checked get rid of initial DateTimePicker and re-initialise as DatePicker
        // do this for both start and end elements
        var kendoDateTimePicker = $("#start").data("kendoDateTimePicker");
        kendoDateTimePicker.destroy();
        $("#startDiv").empty();
        $("#startDiv").append('<input id="start" />');
        $("#start").kendoDatePicker({
            value:new Date()
        });
        var kendoDateTimePicker = $("#end").data("kendoDateTimePicker");
        kendoDateTimePicker.destroy();
        $("#endDiv").empty();
        $("#endDiv").append('<input id="end" />');
        $("#end").kendoDatePicker({
            value:new Date()
        });
    } else {
        // isAllDay is not checked get rid of DatePicker and re-initialise as DateTimePicker
        // do this for both start and end elements
        var kendoDatePicker = $("#start").data("kendoDatePicker");
        kendoDatePicker.destroy();
        $("#startDiv").empty();
        $("#startDiv").append('<input id="start" />');
        $("#start").kendoDateTimePicker({
            value:new Date()
        });
        var kendoDatePicker = $("#end").data("kendoDatePicker");
        kendoDatePicker.destroy();
        $("#endDiv").empty();
        $("#endDiv").append('<input id="end" />');
        $("#end").kendoDateTimePicker({
            value:new Date()
        });
    }
}

    $(document).ready(function () {
        //initalise start and end as DateTimePickers
        $("#start").kendoDateTimePicker({
            value:new Date()
        });
        $("#end").kendoDateTimePicker({
            value:new Date()
        });
    };
  </script>

重新初始化kendo ui对象时如何处理日期选择器

2 个答案: