角度材料datepicker过滤器的具体日期

Question

有人可以请解释如何将自定义日期作为使用Angular Material的过滤器应用，而不会导致当天的每周可选择？

我已经遵循了文档，可以让它在当周的特定日子工作，但它会导致同一天的每周都被过滤。所有的文档似乎都强调这是允许/不允许用户使用日期选择器选择特定日期的必要功能。

Answer 1

请参阅下面的代码。基本上，我所做的只是制作一系列我们希望允许的日期。然后，只是使用索引来检查是否允许一天。此外，你可以编写一个函数获取当前在几个月的日期，如果用户选择了一天，然后从currentDaysInMonth数组中弹出那一天。这是我的codepen。希望它有帮助，我可以根据需要进行更新。

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($scope) { 
    $scope.myDate = new Date(); 

    $scope.minDate = new Date(
    $scope.myDate.getFullYear(), 
    $scope.myDate.getMonth() - 2, 
    $scope.myDate.getDate()); 

    $scope.maxDate = new Date(
    $scope.myDate.getFullYear(), 
    $scope.myDate.getMonth() + 2, 
    $scope.myDate.getDate()); 
    //if your dealing with day not formatted with some sort of timestamp 
    // you can use a function like this to format then filter accordingly 
    var daysAvailableThisMonth = [1, 15, 30]; 

    function formattedDate(day) { 
    var currentMonth = new Date().getMonth(); 
    var currentYr = new Date().getFullYear(); 
    return { 
     day: new Date(currentYr, currentMonth, day), 
     booked: false 
    }; 
    } 

    function getDaysInMonth(month, year) { 
    var date = new Date(year, month, 1); 
    var days = []; 
    while (date.getMonth() === month) { 
     //you can set the default flag as you like but itll help filtering. 
     days.push({ 
     day: new Date(date), 
     booked: true 
     }); 
     date.setDate(date.getDate() + 1); 
    } 
    return days; 
    } 
    var currentMonthDayArray = getDaysInMonth(new Date().getMonth(), new Date().getFullYear()); 

    daysAvailableThisMonth.forEach(function(day, index) { 
    daysAvailableThisMonth[index] = formattedDate(day); 
    }); 

    currentMonthDayArray.forEach(function(booking) { 
    daysAvailableThisMonth.forEach(function(date) { 
     if (date.day.getTime() == booking.day.getTime()) { 
     booking.booked = false; 
     } 
    }) 
    }); 
    $scope.onlyWeekendsPredicate = function(date) { 
    for (var i = 0; i < currentMonthDayArray.length; i++) { 
     if (currentMonthDayArray[i].day.getTime() === date.getTime() && currentMonthDayArray[i].booked === false) { 
     return true; 
     } 
    } 
    }; 
}); 

/** 
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 
**/ 

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp"> 
    <md-content layout-padding=""> 

    <div layout-gt-xs="row"> 
     <div flex-gt-xs=""> 
     <h4>Only weekends within given range are selectable</h4> 
     <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker> 
     </div> 

     <div flex-gt-xs=""> 
     <h4>Opening the calendar when the input is focused</h4> 
     <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker> 
     </div> 
    </div> 

    <div layout-gt-xs="row"> 
     <form name="myForm" flex-gt-xs=""> 
     <h4>With ngMessages</h4> 
     <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker> 

     <div class="validation-messages" ng-messages="myForm.dateField.$error"> 
      <div ng-message="valid">The entered value is not a date!</div> 
      <div ng-message="required">This date is required!</div> 
      <div ng-message="mindate">Date is too early!</div> 
      <div ng-message="maxdate">Date is too late!</div> 
      <div ng-message="filtered">Only weekends are allowed!</div> 
     </div> 
     </form> 

     <form name="myOtherForm" flex-gt-xs=""> 
     <h4>Inside a md-input-container</h4> 

     <md-input-container> 
      <label>Enter date</label> 
      <md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate" md-max-date="maxDate"></md-datepicker> 

      <div ng-messages="myOtherForm.dateField.$error"> 
      <div ng-message="valid">The entered value is not a date!</div> 
      <div ng-message="required">This date is required!</div> 
      <div ng-message="mindate">Date is too early!</div> 
      <div ng-message="maxdate">Date is too late!</div> 
      </div> 
     </md-input-container> 
     </form> 
    </div> 

    </md-content> 
</div> 

<!-- 
    Copyright 2016 Google Inc. All Rights Reserved. 
    Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 
    -->