JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<p>1. Select Today
2. See that datePicker values were changed but viewModel observer change event didnt fire
</p><p>
3. Select any date in date picker
4. See, that datepicker's change event fired and observer onChange event also fired
</p>
<div id="#dateFilter">
        <input id="datePresetFilter" />
        <ul class="dateRanageFilter">
            <li><input id="dateFromFilter" data-role="datetimepicker" data-bind="value: selectedDateFrom, events: { change: onChange }" /></li>
        </ul>
        <div id="grid"></div>


    </div>

JavaScript

var datePresetFilter = $("#datePresetFilter").kendoDropDownList({

    dataTextField: "name",
    dataValueField: "id",
    dataSource: [                
        { name: "Yesterday", id: 12 },
        { name: "Today", id: 11 },
    ],
    change: function (e) {
        console.log("dropdown value was changed");
        var todayDate = new Date();
        // this value method doesn't call change event of datePicker. It's a bug        
        $("#dateFromFilter").data("kendoDateTimePicker").value(todayDate);
        $("#dateFromFilter").data("kendoDateTimePicker").trigger("change");
    }
});
        
dateRangeViewModel = kendo.observable({
        selectedDateFrom: null,
        onChange: function (e) {
        
        console.log("date: " + kendo.toString(this.get("selectedDateFrom"), "D"));
        
        //                     gridDataSource.filter(filter);
        //                    gridDataSource.read();
        
        }
});

kendo.bind($("#dateFromFilter"), dateRangeViewModel);