JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div>Start Date<input type="date" data-bind="value:selectedStartDate"/></div>
<div>End Date<input type="date" data-bind="value:selectedEndDate"/></div>
<div>Search Key<input id="txtSearchText" type="text" data-bind="value:selectedSearchKey,valueUpdate:['update'],['afterkeydown']"/></div>
<button type="button" id="btnSearch" data-bind="click: filter" class="btn btn-primary btn-large" >Filter</button>

JavaScript

$(document).ready(function () {
    $("#txtSearchText").keyup(function (event) {
        var evt = event || window.event;

        if (evt.keyCode == 13) {
            alert(evt.keyCode);
            $("#btnSearch").click();


        }
    });

});

var ListCasesViewModel = function () {
var self = this;
console.log(self);
self.selectedStartDate = ko.observable(null);
self.selectedEndDate = ko.observable(new Date());
self.selectedSearchKey = ko.observable("");
//self.selectedStatuses = ko.observableArray();
//self.selectedHospitals = ko.observableArray();

    
    self.selectedSearchKey.subscribe(function(){
        console.log("updated",self.selectedSearchKey());
    });
    
// methods...
self.init = function () {
    self.selectedEndDate(new Date());
    self.filter();

}

self.filter = function () {

    // get filter control values
    var startDate = self.selectedStartDate(); // dtStart.value();
    var endDate = self.selectedEndDate(); //dtEnd.value();
    var searchText = self.selectedSearchKey(); //txtSearchText.val();
  //  var lstStatus = $("#lstStatus").data("kendoMultiSelect");
//    var lstHospital = $("#lstHospitals").data("kendoMultiSelect");
 //   var status = lstStatus.value().toString();
 //   var hospitalIDs = lstHospital.value().toString();

console.log(searchText);
    // prepare filters
    $filter = new Array();

    if (startDate != undefined)
        $filter.push({ field: "startDate", operator: "eq", value: startDate });

    if (endDate != undefined)
        $filter.push({ field: "endDate", operator: "eq", value: endDate });

  

    if (searchText != undefined)
        $filter.push({ field: "searchText", operator: "eq", value: searchText });


   // var list = $("#listView").data("kendoListView");
  //  list.dataSource.filter($filter);

}};
    
    var vm=new ListCasesViewModel();
    ko.applyBindings(vm);
    vm.init();