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

查看：23
本文介绍了Angular Material datepicker 过滤器特定日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

解决方案

请看下面的代码.基本上，我所做的就是制作一个我们希望允许的日期数组.然后只使用 index of 来检查是否允许这一天.此外，您可以编写一个函数获取月份中的当前天数，如果用户选择日期，则从 currentDaysInMonth 数组中弹出该天.这是我的 codepen.希望有帮助，我可以根据需要更新.

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($范围) {$scope.myDate = 新日期();$scope.minDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() - 2,$scope.myDate.getDate());$scope.maxDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() + 2,$scope.myDate.getDate());//如果你处理的日期没有用某种时间戳格式化//你可以使用这样的函数来格式化然后相应地过滤var daysAvailableThisMonth = [1, 15, 30];函数格式化日期(天){var currentMonth = new Date().getMonth();var currentYr = new Date().getFullYear();返回 {日:新日期(currentYr，currentMonth，day)，预订:假};}函数 getDaysInMonth(月，年){var date = new Date(年,月,1);var 天 = [];while (date.getMonth() === 月) {//您可以根据需要设置默认标志，但它会帮助过滤.天.推({日:新日期(日期)，预订:真实});date.setDate(date.getDate() + 1);}返回天数；}var currentMonthDayArray = getDaysInMonth(new Date().getMonth(), new Date().getFullYear());daysAvailableThisMonth.forEach(function(day, index) {daysAvailableThisMonth[index] = formattedDate(day);});currentMonthDayArray.forEach(函数(预订){daysAvailableThisMonth.forEach(function(date) {if (date.day.getTime() == booking.day.getTime()) {预订.预订=假；}})});$scope.onlyWeekendsPredicate = 函数(日期){for (var i = 0; i < currentMonthDayArray.length; i++) {if (currentMonthDayArray[i].day.getTime() === date.getTime() && currentMonthDayArray[i].booked === false) {返回真；}}};});/**版权所有 2016 Google Inc.保留所有权利.此源代码的使用受 MIT 风格的许可管理，该许可可在 http://material.angularjs.org/HEAD/license 的许可文件中找到.**/

<md-content layout-padding=""><div layout-gt-xs="row"><div flex-gt-xs=""><h4>只有给定范围内的周末是可选的</h4><md-datepicker ng-model="myDate" md-placeholder="输入日期" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"><;/md-datepicker>
<div flex-gt-xs=""><h4>输入焦点时打开日历</h4><md-datepicker ng-model="myDate" md-placeholder="输入日期" md-open-on-focus=""></md-datepicker>

<div layout-gt-xs="row"><表单名称="myForm" flex-gt-xs=""><h4>使用 ngMessages</h4><md-datepicker name="dateField" ng-model="myDate" md-placeholder="输入日期" 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">输入的值不是日期！</div><div ng-message="required">此日期是必需的！</div><div ng-message="mindate">日期太早了！</div><div ng-message="maxdate">日期太晚了！</div><div ng-message="filtered">只允许周末！</div>

</表单><表单名称="myOtherForm" flex-gt-xs=""><h4>在 md-input-container 中</h4><md-输入-容器><label>输入日期</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">输入的值不是日期！</div><div ng-message="required">此日期是必需的！</div><div ng-message="mindate">日期太早了！</div><div ng-message="maxdate">日期太晚了！</div>

</md-input-container></表单>

</md-content>

<!--版权所有 2016 Google Inc.保留所有权利.此源代码的使用受 MIT 风格的许可管理，该许可可在 http://material.angularjs.org/HEAD/license 的许可文件中找到.-->

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.

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆