_updateDatepicker called on setting value/option

_updateDatepicker called on setting value/option

I'm currently working on a knockout-based site with extensive use of datepickers. While it will probably not be that bad in actual production scenarios, I'm developing on a dataset that results in 90 datepickers total. It takes knockout a very long time to instantiate this and finally I found it that disabling my datepicker binding reduces a ~1-2 second binding time by up to 1 second.

Since I would like to use the datepicker, but also would like a fast UI, I went digging a little. By far the most expensive parts are calls to set options and calls to set value. A little more digging and Chrome's profiling revealed a lot of time being spent in the Datepicker._updateDatepicker function.

Looking at the function, it seems it is used for updating the calendar object shown when you click the datepicker, yet it is called every time the value or an option is changed for the datepicker, as well as when it gains focus. Since this seemed absurd, I tried playing around with disabling it.
  1.     var old = $.datepicker._updateDatepicker;
  2.     $.datepicker._updateDatepicker = function(inst) {
  3.         if (!inst.input.is(":focus"))
  4.             return;
  6.         old.apply(this,Array.prototype.slice.call(arguments));
  7.     };
This seems to work, and greatly reduces update time. Something like it should probably be standard. I would imagine problems begin to arise if the value is set while using the datepicker, so someone might be able to make a more sofisticated check.

Both create 100 inputs, timing different datepicker-operation on them.

  1. inst.dpDiv.is(":visible")
This seems to be a better check.