knockout databind with jqueryUI based dateRangePicker - jquery-ui

Question

I'm using a jQuery UI based dateRangePicker which I am trying to bind with a KnockoutJS based viewModel via a custom binder. But I am not even able to make the dateRangePicker read an observable like
this.range = ko.observable("Jul 1,2015 - Jul 3,2015");
Here is my JSFiddle attempt. Is that a wrong approach and do I need create something like this
this.startDate
this.endDate

Answer 1

The dateRangePicker documentation states that it stores an object with the following properties: start and end. It stores this as a JSON string in the value field of the <input> element that is used to contain dateRangePicker. Therefore, you probably want your range observable to also store an object with start and end properties. I wrote a custom binding which will apply the dateRangePicker to an element and will write the object into your observable any time a different selection is made:
ko.bindingHandlers.dateRangePicker = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $el = $(element);
$el.daterangepicker({
onChange: function() {
var range = JSON.parse($el.val());
valueAccessor()(range);
}
});
var value = valueAccessor()();
if (value) {
var range = {"start": new Date(value["start"] + " 00:00:00")};
if (value["end"]) {
range["end"] = new Date(value["end"] + " 00:00:00");
}
$el.daterangepicker("setRange", range);
}
}
};
You can then apply this to your <input> element:
<input id="e1" data-bind="dateRangePicker: range">
If you need to initialize the value on the dateRangePicker through the viewmodel, then you need to store an object into the range observable that matches the format that the dateRangePicker uses:
this.range = ko.observable({start:"2015-07-01", end:"2015-07-03"});
Here is a fiddle: http://jsfiddle.net/efywmomz/
Update
I altered the custom binding to use the moment library and updated the fiddle to initialize the range from the viewmodel: http://jsfiddle.net/efywmomz/1/
ko.bindingHandlers.dateRangePicker = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $el = $(element);
$el.daterangepicker({
onChange: function() {
var range = JSON.parse($el.val());
valueAccessor()(range);
}
});
var value = valueAccessor()();
if (value) {
var range = {"start": moment(value["start"])._d};
if (value["end"]) {
range["end"] = moment(value["end"])._d;
}
$el.daterangepicker("setRange", range);
}
}
};

Answer 2

Here is a sample which i've implemented with moment js library and daterangepicker js library with knockout
HTML
<div id="reportrange" class="pull-right" data-bind="BindRangeDatePicker: Value">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" data-bind="value: Value" readonly />
<span data-bind="text: Value"></span><b class="caret"></b>
</div>
knockout
ko.bindingHandlers.BindRangeDatePicker = {
init: function (element, valueAccessor, allBindings, vm, context) {
$(element).daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
startDate: moment().subtract('days', 29),
endDate: moment()
}, function (start, end) {
$(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
},
update: function (element, valueAccessor, allBindings, vm, context) {
var value = valueAccessor();
$(element).daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
startDate: moment().subtract('days', 29),
endDate: moment()
}, function (start, end) {
//var val = start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY');
//valueAccessor(val.toString());
$(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
}
}