Untitled

knockout wizard   Jquery
....
<script id="step1" type="text/html">
 <div>Name: <input type="text" data-bind="value: Name"></div>
 <div>Description: <input type="text" data-bind="value: Description"></div>
</script>

<script id="step2" type="text/html">
  Start: <br/><input type="text" id="from"  data-bind="value: StartDate">
  Stop:<br/> <input type="text" id="to" class="required" data-bind="value: EndDate">
</script>
.....

$(function () {
  $("#from").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});
$("#to").datepicker({
    showOn: "button",
    buttonImage: "/Content/images/calendar.gif",
    buttonImageOnly: true,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});
});

// call this before you call ko.applyBindings()
    ko.bindingHandlers.datepicker = {
         init: function(element, valueAccessor, allBindingsAccessor) {
             // initialize here
         },
         update: function(element, valueAccessor, allBindingsAccessor) {
             // change handler here
         }
    };

<br/>
    Start :<input type="text" id="from" data-bind="datepicker: StartDate, datepickerOptions: {onSelect: $root.onSelectStartDate()}" />
    <br/>
    End :<input type="text" id="to" data-bind="datepicker: EndDate, datepickerOptions: {onSelect: $root.onSelectEndDate()}" />

function ViewModel() {

        // ...

        self.onSelectStartDate = function() {
            return function() {
                alert("Start Date selected");
            };
        };

        self.onSelectEndDate = function() {
            return function() {
                alert("End Date selected");
            };
        };
    };