JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>
<input type="text" data-bind="value: dateValue" />
<input type="text" data-bind="value: ssnValue" />

<div data-bind="text: ko.toJSON($data)"></div>

JavaScript

ko.extenders.mask = function(observable, mask) {
    observable.mask = mask;
    return observable;
}
    

var orgValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor) {
    var mask = valueAccessor().mask;
    if(mask) {
        $(element).mask(mask);
    }
    
    orgValueInit.apply(this, arguments);
}

ko.applyBindings({ dateValue: ko.observable().extend({ mask: "99/99/9999" }), ssnValue: ko.observable().extend({ mask: "999-99-9999"}) });