I am trying to use a custom binding handler I've written for a text input field that has an input mask on it. However, when I am trying to use this, I get an error in my console:
Uncaught TypeError: valueAccessor(...) is not a function
at HTMLInputElement.<anonymous> (knockout.bindings.ts:11)
at HTMLInputElement.dispatch (jquery.js:5206)
at HTMLInputElement.elemData.handle (jquery.js:5014)
at Object.trigger (jquery.js:8201)
at Object.simulate (jquery.js:8260)
at HTMLDocument.handler (jquery.js:8319)
This is my binding handler:
import ko from 'knockout';
import $ from 'jquery';
import Inputmask from 'inputmask';
import moment from 'moment';
ko.bindingHandlers.dateInputMask = {
init: function (element, valueAccessor, allBindings) {
$(element).on('focusout change', function () {
console.log(allBindings);
if (element.inputmask.isComplete()) {
let time = moment(element.value, 'DD-MM-YYYY HH:mm');
valueAccessor()(time); //error thrown from this line
} else {
valueAccessor()(null);
}
});
Inputmask('date').mask(element);
},
update: function (element, valueAccessor) {
let value = ko.utils.unwrapObservable(valueAccessor());
let text = moment(value).format('DD-MM-YYYY HH:mm');
element.value = text;
}
}
My page model (stripped of irrelevant fields):
import ko from 'knockout';
import moment from 'moment';
export class EventModel {
startDate: KnockoutObservable<moment.Moment>;
endDate: KnockoutObservable<moment.Moment>;
constructor(params: any) {
this.startDate = ko.observable<moment.Moment>(moment());
this.endDate = ko.observable<moment.Moment>(params.endDate || moment());
}
}
The HTML:
<div class="form-group row">
<label class="col-lg-3 col-form-label">Startdatum</label>
<div class="col-lg-8">
<input class="form-control date" data-bind="dateInputMask: startDate" />
</div>
</div>
A screen of the console when putting a breakpoint on the init line to see the value of valueAccessor:

A screenshot of the model's json rendered in the HTML (there are some fields in there that I stripped from the model code above):
Any help would be greatly appreciated. From what I can tell, these errors usually mean the passed valueAccessor is not an observable, but I don't think that's the case here.