Reputation: 31
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.
Upvotes: 0
Views: 45
Reputation: 6382
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" />
Upvotes: 0
Reputation: 31
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.
Upvotes: 0