个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试禁用日历中的特定日期，以便用户无法选择相关日期 - 请参阅 https://plnkr.co/edit/PwCLKWPQU0s3habxgUly?p=preview .
这里唯一的问题是，在将值返回给过滤器时我只能禁用一个日期，而在这种情况下，我想禁用两个示例日期。我也可以在返回语句中硬编码这两个日期，但对于我的实际项目，禁用日期的数组是未知的。
这是JS:
var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];
$scope.onlyWeekendsPredicate = function (date) {
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var todaysDate = new Date (year, month, day).toString();
var confirmedBookingDates = [];
for (var n = 0; n <= bookedDates.length; n++) {
if (todaysDate != bookedDates[n]) {
confirmedBookingDates[n] = true;
}
return confirmedBookingDates[n];
}
};
最佳答案
如果您像上面那样将 bookedDates 从数据库返回到数组中，则可以使用 $filter 来处理预订。 Codepen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<style type="text/css">
.datepickerdemo md-content {
padding-bottom: 200px;
}
.datepickerdemo .validation-messages {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px;
}
</style>
</head>
<body data-ng-app="MyApp">
<div data-ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage">
<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>
</md-content>
</div>
<script type="text/javascript">
function filterBookings() {
return function(date, bookedDates) {
for (var i = 0; i < bookedDates.length; i++) {
return date.toString() !== bookedDates[i];
}
};
}
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $filter) {
var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];
$scope.onlyWeekendsPredicate = function(date) {
return $filter('filterBookings')(date, bookedDates);
};
})
.filter('filterBookings', filterBookings);
</script>
</body>
</html>//Update, insert new predicate func.
$scope.onlyWeekendsPredicate = function(date) {
return bookedDates.indexOf(date.toString()) === -1;
};
关于javascript - 在 Angular Material 中使用日期选择器禁用特定日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40773023/
26
4
0
我是一名优秀的程序员,十分优秀！