Angular Material datepicker过滤器特定日期 [英] Angular Material datepicker filter specific date

问题描述

有人可以解释一下如何使用Angular Material将自定义日期应用为过滤器，而又不会导致选择该日的每个星期吗?

Can someone please explain how to apply a custom date as a filter using Angular Material without causing everyweek on that day to be selectable?

我已经按照文档进行操作，可以使它在该周的特定日期工作，但是却导致同一天的每个星期都被过滤.所有文档似乎都突出显示了此功能，这是允许/不允许用户使用日期选择器选择特定日期的必要功能.

I've followed the documentation and can get it to work for the specific day of that week, yet it causes every week of the same day to be filtered. All the documentation appears to highlight this as a necessary feature for allowing/not allowing a user to select a specific date using the datepicker.

推荐答案

请参见下面的代码.基本上，我所做的就是排列一系列我们希望允许的日期.然后只使用索引of来检查是否允许这一天.另外，您可以编写一个获取月中当前日期的函数，如果用户选择了day，则将该天从currentDaysInMonth数组中弹出.这是我的 codepen .希望有帮助，我可以根据需要进行更新.

Please see below code. Basically, all I did was make an array of date's we'd like to allow. Then just used index of to check if the day was allowed. Additionally, you could write a function get current days in month and if user selects day then pop that day out of the currentDaysInMonth array. Here's my codepen. Hope it helps, I can update as needed.

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.
    -->

这篇关于Angular Material datepicker过滤器特定日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！