Jquery masked input control with knockout JS

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>  

0 comments :

Post a Comment