JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<div>
    Pick Date: <input class="DatePicker" />
    <button id="dateDisable">Disable</button>
</div>
<div>
    Enter Number: <input id="NumericTextBox" />
    <button id="numDisable">Disable</button>
</div>

JavaScript

$(".DatePicker").kendoDatePicker(); 

$('#dateDisable').on('click', function() {
    var picker = $(".DatePicker").data("kendoDatePicker");
    
    if (!$(".DatePicker")[0].disabled) {
        $(this).text('Enable');
        picker.enable(false);
    } else {
        $(this).text('Disable');
        picker.enable(true);
    }
});
 
$("#NumericTextBox").kendoNumericTextBox({
     value: 0.22,
     format: "p"
 });

$('#numDisable').on('click', function() {
    var picker = $("#NumericTextBox").data("kendoNumericTextBox");
 $(this).text('Disable');
        picker.enable(true); 
   
        $(this).text('Enable');
        picker.enable(false);                    
    
                  
    
});