JSFiddle - React, Tailwind, and code Playground

by spstieng

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://stiengenterprises.com/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://stiengenterprises.com/datepicker.css">
<div class="input-append date">
    <input type="text" data-bind="value: fromDate, valueUpdate: 'input'" class="date from-date" /> 
    <span class="add-on">to</span>
    <input type="text" data-bind="value: toDate, valueUpdate: 'input'" class="date to-date" />
</div>Dato: <span class="date" data-bind="date"></span>

CSS

.date {
    padding: 5px 10px;
    width: auto;
    margin-bottom: 20px;
}
.ui-datepicker {
    display: none;
}

JavaScript

$('.date').datepicker({
    format: 'mm.dd.yyyy',
    autoclose: true,
    startdate: new Date()

});

ko.applyBindings(dateModel());


function dateModel() {
    var self = this;
    self.fromDate = ko.observable('12.09.2014');
    self.toDate = ko.observable();

    self.validPeriod = ko.computed(function () {
        return self.fromDate + " - " + self.toDate;
    }, self);
}