md-datepicker date filter: Send object from HTML to md-date-filter function

user_809392 0
Viewed 648

I'm creating a tour booking system in AngularJS with Material Design.

The tours are generated into the DOM with ng-repeat. Every tour object contains information about on which dates this tour should be available. I need to send the tour object containing this information to the md-date-filter function, but I don't know how to do it.

HTML:

<div ng-repeat="tour in tours">
    <md-datepicker
        ng-model="tour.group.selectedDate"
        md-min-date="booking.visit.dateStart"
        md-max-date="booking.visit.dateEnd"
        md-date-filter="disableDepDates"
    ></md-datepicker>
</div>

This is the date filter function:

$scope.disableDepDates = function(date) {
    console.log(date);

    //Check date here and return true if date is ok
};

The problem is that whenever I do md-date-filter="disableDepDates(tour)" in the HTML, the date filter object gets lost.

Thank you!

EDIT

I've also noted that when I use md-date-filter="disableDepDates(tour)", the disableDepDates() function will run spontaneously at page load, whenever I focus on any form element etc. By default, md-date-filter will be a function as stated here: https://material.angularjs.org/latest/api/directive/mdDatepicker

material-design angularjs datepicker
1 Answers

what i understood from md-datepicker is that you are already limiting the dates between min and max. the md-date-filter will be used to add filter using a comparison so it will evaluate every available date in the calendar (every day of the current visual month that passes min and max) and will expect a return to disable the availability of that day or not. lets say we have this

<md-datepicker
        ng-model="2019-05-06"
        md-min-date="2019-04-01"
        md-max-date="2019-05-15"
        md-date-filter="disableDepDates"
    ></md-datepicker>

and we only have ['2019-04-05','2019-04-06', '2019-05-06', '2019-05-10'] available so in the script we should have something like

$scope.disableDepDates = function(date) {
var day = date.getFullYear() + '-' + ('0' + date.getMonth()).substr(-2) + '-' + ('0' + date.getDate()).substr(-2);
if(['2019-04-05','2019-04-06', '2019-05-06', '2019-05-10'].indexOf(day)!=-1)
 return day;
};
});
user_89100250
Related