DateRangePicker - Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Doug Hill

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/date.js"></script>
<script src="https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div class="btn-group">
    <div class="btn dropdown-toggle">
        <div id="reportrange" data-bind="click: daterangepicker">
            <i class="icon-calendar icon-large"></i>
            <span id="dateRange" data-bind="text: currDateRange"></span>
            <b class="caret" style="margin-top:7px;"></b>
        </div>  
    </div>
</div>

<input data-bind="value: test" />
<input data-bind="value: test2" />

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.css');

.container {
    margin-top: 10px;
}

JavaScript

$('#reportrange').daterangepicker(
{
    ranges: {
        'Today': ['today', 'today'],
        'Yesterday': ['yesterday', 'yesterday'],
        'Last 7 Days': [Date.today().add({ days: -6 }), 'today'],
        'Last 30 Days': [Date.today().add({ days: -29 }), 'today'],
        'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
        'Last Month': [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })]
    }
}, function (start, end) {
    $('#reportrange span').html(start.toString('MM/d/yy') + ' - ' + end.toString('MM/d/yy'));
    }
);

function ViewModel(){
    var self = this;
    self.currDateRange = ko.observable("09/24/12 - 09/24/12");           
    
    self.test = ko.observable("test me");
    
    self.test2 = ko.computed(function () {
        return self.currDateRange();
    },this);
    
    self.daterangepicker = function () {
        console.log("DateRange: " + $('#dateRange').text());
    } 
}

ko.observable.fn.beforeAndAfterSubscribe = function (callback, target) {
    var _oldValue;
    this.subscribe(function (oldValue) {
        _oldValue = oldValue;
    }, null, 'beforeChange');
    
    this.subscribe(function (newValue) {
        callback.call(target, _oldValue, newValue);
    });
};

vm = new ViewModel();

vm.test.beforeAndAfterSubscribe(function (oldVal, newVal) {
    alert("test changed from '" + oldVal + "' to '" + newVal + "'");
});


ko.applyBindings(vm);