根据日期选择禁用日期

Question

我有一个包含星期几的下拉选项。我想要发生的是当我将下拉列表更改为运行 $scope.disabled() 方法时。从而改变 date.getDay() === 2 日期中的静态数字。

你可以看到我想做的 $scope.disabled() 功能的评论。

Answer 1

Updated Plunker

在您的 select 元素中，您使用的是 ngOptions，因此您可以使用表达式的 select 作为 部分使用 ng-options="day.id as day.name for day in daysOfWeek" 将每个选项的值设置为 id。所以现在，每次更改 select 时，selectedDay 的值都会更新并启动摘要。这意味着你不需要看任何东西，你的禁用功能可以简化如下：

$scope.disabled = function(date, mode) {
   var day = angular.isUndefined($scope.selectedDay) ? 0 : $scope.selectedDay;
  if (mode === 'day' && date.getDay() === $scope.selectedDay) {
    return true;
  }
  return;
};

我添加了一个检查以将 day 的值设置为 0，以防用户没有 select一天，但您也可以使用以下方法初始化 select 的值：

$scope.selectedDay = 0;

现在一切正常，但有一个问题：日期选择器仅在呈现时运行禁用的函数，并且调用其内部 refreshView 函数。我认为以编程方式触发日期选择器刷新的最简单方法是更改其 ng-model 值。为此，我添加了一个函数：

$scope.triggerDate = function(date) {
  $scope.dt = new Date(date);
}

通过在 select 元素的更改事件上调用 triggerDate，我们将日期选择器的值重置为当前 selected 日期（因此我们根本没有更改该值），这足以强制刷新指令。所以，最终的 select 看起来像：

<select class="form-control input-sm" ng-model="selectedDay" ng-options="day.id as day.name for day in daysOfWeek" ng-change="triggerDate(dt)"></select>

根据日期选择禁用日期

Disable a dates based on day selection

javascript

angularjs

angular-ui-bootstrap

Updated Plunker