I am using this plugin with my AngularJS app and variables to store the start and end date whenever they change.
on date range change, how can i call the controller method to update data on the page?
Like calling this method of the scope:
$scope.updateDataOnDateRangeChange = function(){
// here calling few services to fetch new data for the page
// for the selected date range
}
how to use ng-click or ng-change or custom directive for this plugin?
Basic procedure for using a jQuery plugin is typically to create a directive for it. Inside the link callback you initialize the plugin. Here you have access to the element as jQuery or jQ-lite object, the angular scope , and the plugin callbacks. See important comments about uing $.apply() when making changes to scope within third party code
Sample html:
<input my-picker type="text"/>
Basic script outline:
app.directive('myPicker', function ($timeout) {
return {
link: function (scope, elem, attrs) {
$timeout(function () {
/* elem is a jQuery or jQ-lite object representing the element*/
elem.daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
/* not overly familiar with this plugin but this callback
should allow you to set angular scopes */
function (start, end) {
/* important to do any scope changes within `$.apply()` so angular
becomes aware of changes from third party code*/
scope.$apply(function(){
/* do what you need here with angular scope
have access to plugin data as well as angular scope*/
})
});
}, 1)
}
}
})
You could enhance this directive by adding other attributes to markup and then using the attributes to set various plugin options also.
There is an ngChange directive present within AngularJS which should do what you describe.
Add this directive to your date range input element.
