JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<input name="date" data-bind="value: startDate, attr: { min: minStartDate, max: maxStartDate }"  value="" type="date"></input>
<output id=startDate data-bind="text: startDate"></output>
<br />
<input name="date" data-bind="value: endDate, attr: { min: minEndDate, max: maxEndDate }" type="date"></input>
<output id=endDate data-bind="text: endDate"></output>
<small id=diffDate></small>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

CSS

#diffDate{
    float:right;
}

JavaScript

//get today date in numbers for an easy comparison
console.info(moment().valueOf());
//viewModel
viewModel = {
    //reset startDate, min, max and EndDate  
    startDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    minStartDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    maxStartDate: ko.observable(moment().add({days:600,months:0}).format("YYYY-MM-DD")),
    endDate: ko.observable(moment().add({days:0,months:0}).format("YYYY-MM-DD")),
    minEndDate: ko.observable(moment().add({days:1,months:0}).format("YYYY-MM-DD")),
    maxEndDate: ko.observable(moment().add({days:365,months:0}).format("YYYY-MM-DD")),
};

viewModel.startDate.subscribe(function(newValue) {
    var start = moment(viewModel.startDate(), 'YYYY-MM-DD');
    var end = moment(viewModel.endDate(), 'YYYY-MM-DD');
    var diff = end.diff(start, 'days', true); 
    if (diff < 0){
        alert("the end date can not be before the start date." + diff); 
        viewModel.endDate.push(viewModel.startDate());
    }else if(diff > 457) {
        // mehr als 457 tage darf man nicht 
        
    }else{
       $("#diffDate").text("Termin fuer "+diff+ " tag(e)");   
       viewModel.dateDiff.push(diff);
    }
});
viewModel.endDate.subscribe(function(newValue) {
    var start = moment(viewModel.startDate(), 'YYYY-MM-DD');
    var end = moment(viewModel.endDate(), 'YYYY-MM-DD');
    var diff = end.diff(start, 'days', true); 
    if (diff < 0){
        alert("the end date can not be before the start date."); 
        viewModel.endDate.push(viewModel.startDate());
    }else if(diff > 457) {
        // mehr als 457 tage darf man nicht 
        
    }else{
       $("#diffDate").text("Termin fuer "+diff+ " tag(e)");
    }
	
});
ko.applyBindings( viewModel);