Knockout.js with jquery ui datepicker works everywhere except IE

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

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()); });
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

Removing the "console.log" instruction should make it work. For some reason, IE accepts only console.log when the console is open (F12). — gbs
– gbs, Commented Dec 6, 2012 at 13:39
Thank you! If you add it as an answer i can accept it. I upvoted now. Do you also know why the datepicker stays open? And how i could use dd-mm-yyyy instead of mm-dd-yyyy? — mat
– mat, Commented Dec 6, 2012 at 13:51
changing console.log to window.console.log makes the code compatible with all browses and keeps console logging for those who support it — whosrdaddy
– whosrdaddy, Commented Dec 6, 2012 at 14:54
Thanks, will try that! I upvoted. Could you perhaps also check my additional questions? Thank you in advance! — mat
– mat, Commented Dec 6, 2012 at 14:55

gbs · Accepted Answer · 2012-12-06 14:32:03Z

2

To make the code work on IE: Remove "console.log" instruction
To change the date format, you can define a binding like this one:

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

answered Dec 6, 2012 at 14:32

gbs

3,5292 gold badges22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mat Over a year ago

Thank you! This works. I upvoted. Btw i found two more bugs (in startpost). If you have some time, will you please check them out?

whosrdaddy Over a year ago

@Mat instead of updating your original post, ask new questions instead. The original question has been answered and you accepted the answer :)

mat Over a year ago

whosrdaddy > I didn't want to flood the site with newbie questions.

whosrdaddy · Accepted Answer · 2012-12-06 16:12:20Z

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

I appreciate your help. I copied your code and replaced mine. I tried replacing your #<some root element> with a root element like <span> (with and without hashtag. I also tried it with an id of the root or the element itself. All didn't work. My HTML looks like this: <span><input name="hoofdletters[]" class='hoofdletters required txtBox' data-bind='value: hoofdletters, uniqueName: true' style="width:200px;" /></span>
@Mat: add an ID to your Span like this <span id='MyId'> now you can use $(".hoofdletters").on('keyup', '#Myid', ...
I am sorry to bug you with these questions. But I did what you said and the specific field is filled with: [object HTMLElement]
@MAt: try without the root element then, that should work. More information about JQuery ´on´ can be found here: api.jquery.com/on

Collectives™ on Stack Overflow

Knockout.js with jquery ui datepicker works everywhere except IE

2 Answers 2

3 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Linked

Related