Knockout Bootstrap datepicker
Two datepickers dependients
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<div id="target" class="input-group input-daterange">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input name="StartDate" class="date-picker form-control" id="StartDate" type="text" data-bind="textInput: StartDate , datepickerr: StartDate, datepickerOptions: { format: 'dd/mm/yyyy', autoclose: 'true', startDate: 'now'}">
</div>
<span class="input-group-addon"><i class="fa fa-arrow-right"></i></span>
<div class="input-group">
<input name="EndDate" class="date-picker form-control" id="EndDate" type="text" data-bind="textInput: EndDate, datepickerr: EndDate, datepickerOptions: { format: 'dd/mm/yyyy', autoclose: 'true', startDate: 'now'}">
<span class="input-group-addon">End Date</span>
</div>
</div>
<div>Total days:<strong data-bind="text: diffDays()"></strong></div>
<div>
<textarea name="" id="" cols="30" rows="10" data-bind="text: show()"></textarea>
</div>
JavaScript
function viewModelCustom() {
var self = this;
var today = new Date();
var todayFormat = today;
self.StartDate = ko.observable(todayFormat);
self.EndDate = ko.observable(todayFormat);
self.fechas = ko.observableArray([{
init: self.StartDate()
}, {
fin: self.EndDate()
}]);
console.log("Init date: " + self.StartDate());
self.diffDays = function() {
var result;
//debugger;
console.log("Star: " + self.StartDate());
console.log("End: " + self.EndDate());
var start = moment(self.StartDate(), 'DD/MM/YYYY');
var end = moment(self.EndDate(), 'DD/MM/YYYY');
result = Math.abs(start.diff(end, "days")) + 1;
return result;
};
ko.bindingHandlers.datepickerr = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {
format: 'dd/mm/yyyy'
};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var widget = $(element).data("datepicker");
var valor = ko.utils.unwrapObservable(valueAccessor());
console.log("Valor :" + valor);
//var binde = allBindingsAccessor.get('datepickerOptions');
//var formato = binde.format.toUpperCase();
//console.log("Formato " + formato);
//var nuevaFecha = new Date(valor);
//var nuevoVal = moment(nuevaFecha).format(formato);
//console.log("Reformat " + nuevoVal);
//console.log(widget.constructor.toString());
//console.log("Widget: " + widget);
//console.log("In funcion START-UPDATE: " + self.StartDate());
//console.log("In funcion END-UPDATE: " +...