[英]Disable specific dates using datepicker in Angular Material
I'm trying to disable specific dates in a calendar so a user can't select the dates in question - please see https://plnkr.co/edit/PwCLKWPQU0s3habxgUly?p=preview . 我正在尝试禁用日历中的特定日期,因此用户无法选择有问题的日期-请参阅https://plnkr.co/edit/PwCLKWPQU0s3habxgUly?p=preview 。
The only issue here is that I can only disable one date when returning the value to the filter, whereas in this case there are two example dates I was wanting to disable. 这里唯一的问题是,当将值返回到过滤器时,我只能禁用一个日期,而在这种情况下,我想禁用两个示例日期。 I can also hard-code the two dates in the return statement, yet for my actual project the array of disabled dates is unknown.
我还可以在return语句中对这两个日期进行硬编码,但是对于我的实际项目,禁用日期的数组是未知的。
Here is the JS: 这是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];
}
};
If you have the bookedDates let say from a DB returned into array like you do above you can use a $filter to handle bookings. 如果您有bookedDates的话,可以像上面一样从数据库返回到数组,则可以使用$ filter来处理预订。 Codepen
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;
};
Its working, you can use php variable for dynamically disable the dates, you can bind this value from database to get dynamic output. 它的工作原理是,您可以使用php变量动态禁用日期,也可以从数据库绑定此值以获取动态输出。
for disable date, use !==
sign 对于禁用日期,请使用
!==
号
Just copy paste the following code and checkout 只需复制粘贴以下代码并签出
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="datepickerValidations" ng-cloak>
<!--
Your HTML content here
-->
<md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>
<div layout-gt-xs="row">
<div flex-gt-xs>
<h4>Disable specific date</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"
md-date-filter="ctrl.disableSpecificDate"></md-datepicker>
</div>
</div>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('datepickerValidations', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function() {
this.myDate = new Date();
this.minDate = new Date(
this.myDate.getFullYear(),
this.myDate.getMonth() - 2,
this.myDate.getDate()
);
this.maxDate = new Date(
this.myDate.getFullYear(),
this.myDate.getMonth() + 2,
this.myDate.getDate()
);
this.disableSpecificDate = function(date) {
var date= date.getDate()/date.getMonth()/date.getFullYear();
return date !== 20/6/2017 && date !== 21/6/2017;
};
});
</script>
</body>
</html>
two days + weekend for alphagrim: 两天+周末的alphagrim:
function filterBookings() {
return function(date, bookedDates) {
var day = date.getDay();
if(day === 1 || day === 2 || day === 3 || day === 4 || day === 5){
var sw = 0;
for(var i =0; i < (bookedDates.length); i++) {
if(date.toString().trim() === bookedDates[i].toString().trim()){
sw = 1;
}
}
if(sw==0){
return date.toString();
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.