剣道UIオブジェクトの再初期化時に日付ピッカーを処理する方法

Question

剣道スケジューライベントを作成するための独自のフォームを作成する必要があります。

ビルトイン形isAllDayチェックボックスはdatetimepickersがちょうどdatepickersとその逆となってチェックされている場合せる機能...

を持っている私持ってinital pageload上で次の

<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を置き換えるのではなく、datetimeピッカー内にdatepickerが表示されます。

要素を削除し、必要に応じて再初期化するにはどうすればよいですか？ The_Black_Smurfの答えに基づいて

UPDATE

私は私のスクリプトへの更新...

<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> 

結果は、新たな剣道の要素は、元の内部initaliesです...まだ同じです。

Answer 1

OK固定されました。入力を囲む折り返し部分があり、これらは空の要素です。次に、入力を再作成し、それらを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> 

Answer 2

すべての剣道ウィジェットにはdestroyメソッドがあり、ウィジェットに関連するすべてのサポートがクリアされます。 destroyメソッドを呼び出したら、DOM要素を空にすることができます。必要に応じて、その要素で新しいウィジェットを再作成することができます。ここで

がkendoDateTimePickerにkendoDatePickerに変わりますサンプルコードです：

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({...}); 

UPDATE

私が言及するのを忘れてしまった...いくつかの剣道ウィジェットは、新しいDOM要素内にラップされます（とこれはdatePickerとdateTimePickerの場合です）。これは、参照として使用した要素が、もはや要素のルートにならないことを意味します。そこから、ウィジェットのルート（通常は、k-widgetクラスの最も近い親）を見つけて、そのノードを置き換える必要があります。私の更新された例はあなたに論理のアイデアを与えるでしょう。