knockout wizard + Jquery

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,

score 0 · Accepted Answer · edited May 23 '17 at 11:48

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.

i'm added a class to my input like and PUBLISH, SUBSCIRIBE code in my datePicker.js but nothing change! — ramo, Aug 04 '12 at 18:14
Where do you insert the templates into the document? You need to make sure that this has completed BEFORE you trigger your custom event — carbontax, Aug 04 '12 at 18:25
I edited my code to reflect your script inclusion. I think this is more like what you want. By the way, I like the onSelect handlers, ramo. I think I will use them myself. — carbontax, Aug 04 '12 at 18:37

knockout wizard + Jquery

1 Answers1