Durandal - Run datePicker after the DOM activated

Question

I added a data picker inside a textbox (that should hold the selected date), it should activate when i press the textbox. the HTML code:

<input type="text" class="textboxes" data-bind="value:request().ExpiredDateTO"  id="tbToDate" />

when i press the textbox the date picker doesnt work BUT when i run:

$("#tbToDate").datepicker();

in the Console of Chrome, it works fine. i placed the jQuery script inside the

self.activate 

but yet.... it works only when i run the script in the console.

Answer 1

if anybody need it in the future... i found the answer... i used Deferred : Defferd - mozilla article (very good)

and jQuery api

i have an activate function and i added the Deffered at the begining:

   self.activate = function (data) {


    var deferred = $.Deferred();.....

and i put in the end of the activate the:

        //run the scripts when evry thing else is done 
        deferred.resolve().then(function () {
            $.datepicker.regional['he'];
            $("#tbToDate").datepicker();
            $("#tabs").tabs();
        });
    });
    return deferred.promise();

statement. it makes the job done.

Answer 2

A better solution would be to create a custom binding handler for this. Then the functionality would be reusable and you could even (optionally) set the localization.

ko.bindingHandlers['datepicker'] = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var region = valueAccessor();
        if (region) {
            $.datepicker.regional[region];
        }
        $(element).datepicker();
    }
};

Then use it in your template like so:

<input type="text" class="textboxes" data-bind="value: request().ExpiredDateTO, datepicker: 'he'" id="tbToDate" />