AngularJS Filter Value From DatePicker

Question

I am trying to filter my ng-repeat based on a date selected in a datepicker. My HTML/Javascript:

<script>
    $('#myFirstDate').datepicker({ 
        startDate: '+1d',
        todayHighlight: true
        }).on('changeDate', function(e){
            var theDate= $('#myFirstDate').datepicker('getDate').toString();
            var regex = /[A-Z]\w+/;
            theDate = regex.exec(theDate);  

    });
</script>
<div class="itemcontainer" ng-repeat="BreadToOrder in BreadsToOrder | filter:{ days: theDate}">
    <img ng-src="img/{{BreadToOrder.text|lowercase|nospace}}.jpg"></img><span class="itemname">{{BreadToOrder.text}}</span><span class="itemprice">{{BreadToOrder.price}}</span><input type="number" placeholder="#">
</div>

My controller looks like this:

$scope.BreadsToOrder = [ 
    { 
        text: 'Apple Bread', 
        price: '$7.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '$5.95', 
        days: ["Thu","Fri"]
    }
    ]

So basically I would like a bread to be displayed only if the right day of the week is selected. This works great if I put in the actual date instead of theDate such as filter:{ days: 'Mon'} but I suppose Angular can't see the theDate variable? Is it a scope issue? Should I put that jquery in the controller or what is the best way to do this, since I mostly still think like a JQuery rather than an Angular person?

Answer 1

It works with these additions to the HTML/Javascript and Controller:

HTML/Javascript:

<script>
   $('#myFirstDate').datepicker({ 
        startDate: '+1d',
        todayHighlight: true
        }).on('changeDate', function(e){
        var theDate= $('#myFirstDate').datepicker('getDate').toString();
        var regex = /[A-Z]\w+/;
        theDate = regex.exec(theDate)[0];
        console.log(theDate);
        var element = angular.element($('#myFirstDate'));
        var controller = element.controller();
        var scope = element.scope();
        scope.$apply(function(){
        scope.theDate = theDate;
     });
        });
</script>
<div class="itemcontainer" ng-repeat="BreadToOrder in BreadsToOrder | filter:{ days: theDate}">
    <img ng-src="img/{{BreadToOrder.text|lowercase|nospace}}.jpg"></img><span class="itemname">{{BreadToOrder.text}}</span><span class="itemprice">{{BreadToOrder.price}}</span><input type="number" placeholder="#">
</div>

Controller:

$scope.theDate = "";
$scope.BreadsToOrder = [ 
    { 
        text: 'Apple Bread', 
        price: '$7.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '$5.95', 
        days: ["Thu","Fri"]
    }
    ]

So basically I had to add the angular.element and use $apply to get it to update the controller value. :)

Answer 2

Use $watch() with moment.js which provides lots of formatting options for date by combining these two you can achieve it.