week

week

关注
发信
IBM Worklight 6.1 - 为什么Cordova代码放置在子页面时无法正常工作？
检测iPhone中断的类型
Spring Security OAuth2，哪个决定安全性?
MongoDB-大量数据库
空间国家名称黑莓ObjectChoiceField不接受
ember测试通过chrome，而不是phantomjs
以编程方式锁定Android设备
可以仅依靠Paypal IPN记录购买吗?
科尔多瓦：蚂蚁错误code 1号楼的Andr​​oid的Hello World应用程序时
如何将API网关与SQS集成
swiftUI PresentaionLink第二次不起作用
C# SQLDataAdapter - 不将数据插入数据库
iOS版BluetoothManager Framwork
PHP邮件只是突然停止工作
如何在asp.net 4.0应用程序中调用ssrs

Angular Material datepicker 过滤器特定日期

扫码查看
本文介绍了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 过滤器特定日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 19:14
查看更多
Powered by LMLPHP ©2025 week 0.045358