Filter events by date using AngularJS - angularjs

Question

I'd like to filter my events by date using AngularJS and jQuery Datepicker. But it seems not working using the input text...
My code below works with the title of the event...
Main issue : when I choose a date in the jQuery Datepicker, I get no events...
$scope.onChange = function(){
$scope.search.start = new Date(moment($scope.search.start, 'DD/MM/YYYY').format("YYYY-MM-DD 00:00:00"));
$scope.search = _.reduce($scope.search, function(result, n, key) {
if (n !== '') {
result[key] = n;
}
return result;
}, {});
$scope.events = data.events;
$scope.filteredEvents = $filter('filter')($scope.events, $scope.search);
};
<input class="form-control datepicker" id="start" type="text" ng-model="search.start" ng-change="onChange()" autocomplete="off">
<input class="form-control" id="title" type="text" ng-model="search.title" ng-change="onChange()" autocomplete="off">
<div class="col-12" ng-repeat="event in events | filter:search | limitTo:limit">
<div class="event">
<div class="event-body">
{{event.title}}
<p ng-if="event.end" class="event-date">{{event.start | date:"dd/MM/yyyy"}}</p>
</div>
</div>
<div class="space10"></div>
</div>

Answer 1

Out of the Box the JQueryUI datepicker will not work with angular because the angular model is not being updated when Jquery sets the input value. You need to tell JQueryUI datepicker to update the model.
The best way to do that is create a directive that sets up the datepicker and adds an onSelect method that sets the view value model controllers view value ngModelCtrl.$setViewValue and applies it to the scope scope.$apply()
HTML:
<input type="text" ng-model="date" datepicker />
JS
app.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'dd/mm/y',
onSelect:function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
If you also want to use a date in a different format than available using the Date Picker you will need to format using the ng-change directive.
<input class="form-control " datepicker type="text"
ng-model="search.start" ng-change="onChange()"/>
$scope.onChange = function(){
$scope.search.start = moment($scope.search.start, 'DD/MM/YYYY')
.format("YYYY-MM-DDT00:00:00.000[Z]");
};
Working Example