Knockoutjs and JQuery datepicker. Element looses datepicker after re-render

Question

When i'm trying to use input with id "eventStartDate", after it was hidden, and made visible again - it looses datepicker:

<!-- ko 'if': isEvent.forEditing -->
    <div class="editor-field">
        <div class="editor-label">Початок події: </div>
        <input type="datetime" name="eventStartDate" id="eventStartDate" />
        @Html.ValidationMessageFor(model => model.eventStartDate)
    </div>
<!-- /ko -->

Can somebody tell me how to force $("#eventStartDate").datepicker() init this object after it was re rendered?

Thank you.

UPD: i know that it must be done through custom bindings somehow, but can somebody help me to figure out, how exactly?..

Answer 1

The best idea is to consider using a custom binding like the one in this answer: knockoutjs databind with jquery-ui datepicker or this answer: jQuery UI datepicker change event not caught by KnockoutJS.

If you don't need the two-way data-binding, then a minimal custom binding would be simply:

ko.bindingHandlers.datepicker = {
   init: function(element) {
       $(element).datepicker();

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