AngularJS按日期过滤

Question

    <div class="well calendar" ng-model="dt">
         <datepicker min="minDate" show-weeks="showWeeks"></datepicker>
    </div>
    <div class="well">
        <ul class="unstyled">
            <li ng-repeat="todo in todos | filter: dt">
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>
                <span class="done-{{todo.done}}">{{todo.date | date:'fullDate'}}</span>
            </li>
        </ul>
    </div>

I have an angular-ui datepicker, and I want to filter my todos list by date. But filter doesn't work.

Answer 1

I think there is a mistake, you need to move ng-model from div to datepicker to ensure the model is updated.

In your case, you could do the filtering inside controller using $watch. Like this:

function testController($scope,$filter){
    $scope.todos = [
        {done:true,text:"test 1",date:new Date(2013,11,24)},
        {done:false,text:"todo 2",date:new Date(2013,11,25)},
        {done:false,text:"todo 3",date:new Date(2013,11,26)}
   ];

   $scope.filterTodos = [];

    $scope.$watch("dt",function(newValue,oldValue,scope){
        if (newValue){
            scope.filterTodos = $filter('filter')(scope.todos, function(todo){
                console.log(todo.date.getDate());
                console.log(newValue);
                return todo.date.getDate() == newValue;
            });
        }
        else{
           scope.filterTodos = scope.todos; //no filter
        }
    });
}

DEMO

In this demo, I allow users to enter free text and filter by date.getDate() , you could modify the logic to filter in any way you want.

Answer 2

I think you don't need the watch as since the view is re-painted every-time the filter changes. So just adding the appropriate filter should work.

And yes you should move ng-model="dt" to the input element, datepicker in your case so that every time you enter any date or modify it, it update the model. And you are using the model as filter so when model changes resulting to change in filter, the view is repainted filtering the results.

Answer 3

I've experienced this most times; read a lot about creating custom app filter. But I think the quickest way, especially if you have access to the date source, and if it is coming from MySQL, just return the date from the database as an ISO Date and angularjs can then filter the date correctly.

date("c", strtotime($mysqlDateValueFromDb))