JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
<div class="form-group">	
<div class="col-sm-8 col-md-7">
    <div>Format: MM/DD/YYYY</div>
    <div class="input-group date" data-bind="datepicker: selectedDate">
     <input type="text" style="width: 150px; height: 35px;" /><span class="input-group-addon btn" style="width: 40px;"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
</div>
</div>

JavaScript

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor) {
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            
            current = $(element).datepicker("getDate");
            
            if(moment(current).isValid()){
                current = moment(current).format("MM/DD/YYYY");
                if (value - current !== 0) {
                    $(element).datepicker("setDate", value);   
                };
            }else{
                $(element).datepicker("setDate", moment().format("MM/DD/YYYY")); 
            };

            //console.log("value: " + value);           
            $(element).datepicker('hide');
    }
};

var viewModel = {
	selectedDate : ko.observable(new Date())
};

ko.applyBindings(viewModel);