knockout wizard + Jquery - asp.net-mvc-3

Question

I have a wizard contains 4 step with knockout its work fine but when i added datepicker of Jquery on step 2 date picker doesn't display (just an input type text display) if i refresh my browser it display, but i lose information of step 1 (if i refresh my browser), how can i solve my problem,
my wizard its like this: http://jsfiddle.net/FyuSD/36/
wizard.cshtml:
....
<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>
.....
DatePicker.js:
$(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);
}
});
});
I'm sorry for my bad English
thanks,

Answer 1

I played with the fiddle a bit and your solution is the answer to this question
jQuery UI datepicker change event not caught by KnockoutJS
Which shows a datepicker implementation for custom bindings as described in the knockout documentation: Knockout - Custom Bindings
You need to create a custom binding handler that will initialize your datepickers when the template is rendered.
// 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
}
};
When you declare your data bindings use the name of your custom binding (instead of "value: StartDate")
<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()}" />
Of course $root refers to your ViewModel class so that means you need some methods there. This is where you could put your minDate and maxDate code.
function ViewModel() {
// ...
self.onSelectStartDate = function() {
return function() {
alert("Start Date selected");
};
};
self.onSelectEndDate = function() {
return function() {
alert("End Date selected");
};
};
};
I tested it in an updated fiddle here http://jsfiddle.net/carbontax/bwA4N/5/. It looks funny because the datepicker css is not available, but the binding handler is doing the right thing.