Below is the sample code for phone and date mask with knockout js and jquery masked input
<script src="http://knockoutjs.com/downloads/knockout-3.4.0.js" type="text/jscript"></script>
<script src="https://code.jquery.com/jquery-2.2.2.js" type="text/jscript"></script>
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js" type="text/jscript"></script>
PhoneNumber :
<input type="text" id="txtPhoneNumber" data-bind="MaskedInput: WorkPhone, mask: '(999) 999-9999'" />
</br>
</br>
Date :
<input type="text" id="txtDate" data-bind="MaskedInput: Date, mask: '99/99/9999'" />
<script>
var ViewModel = function () {
var self = this;
self.WorkPhone = ko.observable('');
self.Date = ko.observable('');
ko.bindingHandlers.MaskedInput = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
}
};
//uncomment the following line to enable ko.validation for the control, otherwise validation for the control won't work.
//ko.validation.makeBindingHandlerValidatable('MaskedInput');
}
ko.applyBindings(new ViewModel());
</script>
