bootstrap datepicker- v1

http://stackoverflow.com/questions/14416592/bind-bootstrap-datepicker-with-knockoutjs

by grahampcharles

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<div id='target'>
    <div class="input-group date">
        <input type="text" data-bind='datepicker: test_date' class="form-control" /> <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>

    </div>
    <button id='setDate' type="button">Set Date</button>
    <ol id="events"></ol>

CSS

#target {
    margin: 2em;
}

JavaScript

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options).on("changeDate", function (ev) {
            // TODO: update observable only if valid date
            logEvent('changeDate: ' + ev.date);
            var observable = valueAccessor();
            observable(ev.date);
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        logEvent('update: ' + $(element).val());
        $(element).datepicker("setValue", value);
    }
};

var model = {
    test_date: ko.observable(new Date('04/04/2012'))
};

ko.applyBindings(model, $("#target")[0]);

$("#setDate").on("click", function () {
    model.test_date(new Date('04/05/2012'));
});

function logEvent(e) {
    $("#events").prepend($("<li>", {
        text: e
    }));
}