Knockout.js with jquery ui datepicker works everyw

Question

I used a knockout.js templatescript to create a form that can be duplicated and deleted. The fiddle can be found here.

I editted the script with a litle help from SE to add a jquery-ui datepicker. The short version of the fiddle can be found [here][2]. So far so good, but when testing i found out that everything works in any browser, except for IExplorer (various versions).

The problem is in this specific part, but i have no clue where.

script type='text/javascript'>//<![CDATA[ 
ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};

        console.log("datepicker");                        
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    }
};

Also now we're at it. The datepicker doesn't close when you click outside the box. This happens in any browser.

Additional questions

1. I use this (and many others) to autocorrect a field. In this case uppercase the input. This works excellent on the first form. But not on any duplicate forms.

   $(".hoofdletters").keyup(function(e) { $(".hoofdletters").val(($(".hoofdletters").val()).toUpperCase()); });

2. When i use uniqueName: true, every field (also duplicated forms) will get validated. But my $_POST names are all renamed. I would like the originall field names, for example year[] instead of ko_unique_1. Works when removing uniqueName, but then the duplicated forms don't validate anymore.

   [2]: http://jsfiddle.net/QUxyy/5/enter code here

Answer 1

1. To make the code work on IE: Remove "console.log" instruction

2. To change the date format, you can define a binding like this one:

   data-bind='datepicker: beschikkingsdatum, datepickerOptions: {dateFormat: "dd/mm/yy"}, uniqueName: true'

Answer 2

2 things:

like I said in the comments, use window.console.log (or a wrapper function) instead of console.log to prevent errors on older browsers who don't know the console object.

I use this (and many others) to autocorrect a field. In this case uppercase the input. This works excellent on the first form. But not on any duplicate forms.

replace:

$(".hoofdletters").keyup(function(e) { $(".hoofdletters").val(($(".hoofdletters").val()).toUpperCase()); });

with :

$(".hoofdletters").on('keyup', '#<some root element>', function(e) { $(".hoofdletters").val(($(".hoofdletters").val()).toUpperCase()); });

that way you guarantee that future elements receive the keyup handler The root element is needed to limit the DOM monitoring scope for the on function. Ideally this would be a DIV element