JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div class="container">
<button>Reinitialize</button>
<p class="x-widgets"></p>
<br>
<label>
<span>Date</span>
<input class="x-datepicker" />
</label>
</div>
JavaScript
// Debugging function
function number_of_widgets() {
var x = $('body > .k-widget').length;
$('.x-widgets').text('There are ' + x + ' widgets in the document body right now.');
}
// Remember the markup for later use
var html = $('.container label').html();
// Initialize the date picker
$('.x-datepicker').kendoDatePicker({
format: 'dd.MM.yyyy'
});
// Debug
number_of_widgets();
$('button').click(function() {
// Garbage collection
$('.container').siblings().remove();
// Remove the date picker + wrapper
$('.container label').remove();
// Reinitialize the date picker
var label = $('<label></label>');
label.html(html);
label.appendTo('.container');
$('.x-datepicker').kendoDatePicker({
format: 'dd.MM.yyyy'
});
// Debug
number_of_widgets();
});