MGT_711792 MGT_711792 - 7 months ago 7
Javascript Question

Angular Material Datepicker - select monday by default when other days of the week is choosen

I am new to Angularjs. I wonder is there any filtering mechanism for the Angular Material Date Picker(md-datepicker), So that I can choose only Monday when other days of the week is choosen, provided all the days are enabled. For example, when i clicked on 14-04-2016(Thursday), (11-04-2016)monday of that week should be automatically selected.

Let me know if any other details needed. Any help much appreciated. Thanks in advance.

Answer

You can write a filter for your datepicker:

 <md-datepicker ng-model="myDate" md-date-filter="onlyMondays"></md-datepicker>

 $scope.onlyMondays = function(date) {
    var day = date.getDay();
    return day === 1;
 }

Or if you want to let all days selectable you could change the date to monday in the background with:

<md-datepicker ng-model="selectedDate"></md-datepicker>

you could set the date to the last monday afterwards:

var daysToSubstract = $scope.selectedDate.getDay() - 1; 
$scope.myDate.setDate($scope.selectedDate.getDate() - daysToSubstract);
Comments