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.

can you post a fiddle elaborating just a little bit more including your viewmodel? — gkb, Aug 08 '18 at 04:49

score 0 · Answer 1 · answered Aug 08 '18 at 08:14

0

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.

answered Aug 08 '18 at 08:14

Michael meshaev

31
1
11

Just to confirm, do you need to call .datepicker() every time the DOM refreshes? So each time the text box reloads you need to re-apply the datepicker using jQuery? If that is what you are doing then I can show you a much more elegant way :) – Laurence Frost Aug 08 '18 at 09:09
hi need to call it every time the DOM refreshes... ca you show the elegant way? – Michael meshaev Aug 08 '18 at 11:35

score 0 · Answer 2 · answered Aug 08 '18 at 09:10

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" />

Durandal - Run datePicker after the DOM activated

2 Answers2