Угловой Материал датафилькер даты даты

Question

Может кто-нибудь объяснить, как применить пользовательскую дату в качестве фильтра с использованием Углового материала, не вызывая каждый раз в этот день, чтобы его можно было выбрать?

Я следил за документацией и мог заставить ее работать в течение определенного дня этой недели, но она заставляет каждую неделю того же дня фильтроваться. Вся документация, как представляется, выделяет это как необходимую функцию, позволяющую/не позволяющую пользователю выбирать конкретную дату с помощью datepicker.

Answer 1

См. Ниже код. В принципе, все, что я сделал, это сделать массив дат, который мы хотели бы разрешить. Затем просто используйте индекс, чтобы проверить, разрешен ли день. Кроме того, вы можете написать функцию get current days in month, и если пользователь выбирает день, то pop в этот день из текущего массива 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. 
    -->