md-datepicker 日期过滤器：将对象从 HTML 发送到 md-date-filter 函数

Posted 2023-05-07

【中文标题】md-datepicker 日期过滤器：将对象从 HTML 发送到 md-date-filter 函数

【英文标题】：md-datepicker date filter: Send object from HTML to md-date-filter function

【发布时间】：2019-04-01 04:16:13

【问题描述】：

我正在使用 Material Design 在 AngularJS 中创建一个旅游预订系统。

使用ng-repeat 将游览生成到 DOM 中。每个tour 对象都包含有关此游览应该在哪些日期可用的信息。我需要将包含此信息的tour 对象发送到 md-date-filter 函数，但我不知道该怎么做。

html：

<div ng-repeat="tour in tours">
    <md-datepicker
        ng-model="tour.group.selectedDate"
        md-min-date="booking.visit.dateStart"
        md-max-date="booking.visit.dateEnd"
        md-date-filter="disableDepDates"
    ></md-datepicker>
</div>

这是日期过滤功能：

$scope.disableDepDates = function(date) 
    console.log(date);

    //Check date here and return true if date is ok
;

问题是每当我在 HTML 中执行 md-date-filter="disableDepDates(tour)" 时，date 过滤器对象就会丢失。

谢谢！

编辑

我还注意到，当我使用md-date-filter="disableDepDates(tour)" 时，disableDepDates() 函数将在页面加载时自发运行，只要我关注任何表单元素等。默认情况下，md-date-filter 将是此处所述的函数： https://material.angularjs.org/latest/api/directive/mdDatepicker

【问题讨论】：

console.log 的结果是什么？

很遗憾，控制台日志中没有消息。我一直在尝试使用this 找到一些有用的信息，但是在使用md-date-filter="disableDepDates" 时我无法找到日期对象，或者在使用md-date-filter="disableDepDates(tour)" 时无法找到父模型tour。

您是否将“ngMaterial”注入到您的控制器中？

是的，就在这里：var app = angular.module("myApp", ["ngAnimate","ngMessages","ngMaterial","ngMaterialDateRangePicker"]);。整个网站都使用 Material Design，其他一切都运行良好。

我在您的编辑中注意到，当您这样使用该功能时，该功能将运行。因此，我认为它应该通过在函数中输入日期并使其进入某些条件来确定该日期是否对您的应用程序有效，并在函数末尾返回布尔值，表明该输入日期是否有效。这样它就会在日期选择器中相应地禁用。

【参考方案1】：

我从 md-datepicker 了解到的是，您已经将日期限制在 min 和 max 之间。 md-date-filter 将用于使用比较添加过滤器，因此它将评估日历中的每个可用日期（当前可视月份的每一天都经过 min 和 max），并期望返回禁用该日期的可用性一天与否。 假设我们有这个

<md-datepicker
        ng-model="2019-05-06"
        md-min-date="2019-04-01"
        md-max-date="2019-05-15"
        md-date-filter="disableDepDates"
    ></md-datepicker>

我们只有 ['2019-04-05','2019-04-06', '2019-05-06', '2019-05-10'] 可用 所以在脚本中我们应该有类似的东西

$scope.disableDepDates = function(date) 
var day = date.getFullYear() + '-' + ('0' + date.getMonth()).substr(-2) + '-' + ('0' + date.getDate()).substr(-2);
if(['2019-04-05','2019-04-06', '2019-05-06', '2019-05-10'].indexOf(day)!=-1)
 return day;
;
);