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="masked: dateValue, mask: '99/99/9999'" />
<input type="text" data-bind="masked: ssnValue, mask: '999-99-9999'" />

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

JavaScript

ko.bindingHandlers.masked = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var mask = allBindingsAccessor().mask || {};
        $(element).mask(mask);
        ko.utils.registerEventHandler(element, 'focusout', function() {
            var observable = valueAccessor();
            observable($(element).val());
        });
    }, 
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
    }
};

function ViewModel() {
    var self = this;
    self.dateValue = ko.observable("");
    self.ssnValue = ko.observable("");
    
    //ajax load faked here...
    self.ssnValue('1234567890');
}

ko.applyBindings(new ViewModel());