<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
<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-date-filter="onlyWeekendsPredicate" md-current-view="year"></md-datepicker>
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,22, 30];
function formattedDate(day) {
var currentYr = new Date().getFullYear();
return { day: new Date(currentYr, day), booked: false };
}
function getDaysInMonth(year,month) {
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;
console.log(days);
}
var currentMonthDayArray = getDaysInMonth(2018,2);
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;
}
}
};
}）;
/ ** 版权所有2016 Google Inc.保留所有权利。 此源代码的使用受MIT样式许可的约束，该许可可在https://material.angularjs.org/HEAD/license的LICENSE文件中找到。 ** /
</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>
答案 0 :(得分：0)
我们可以使用md-date-filter并实现此目标
这是工作代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.js"></script>
<!-- Angular Material Library -->
<script>
(function() {
angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function() {
var vm = this;
vm.myDate = new Date();
vm.dateRangeToDisable = [new Date("2018-03-14"), new Date("2018-03-13"), new Date("2018-03-12"), new Date("2018-03-11")];
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
vm.onlyWeekendsPredicate = function(date) {
var showDate = true;
angular.forEach(vm.dateRangeToDisable, function(item) {
if (formatDate(item) === formatDate(date)) {
showDate = false;
}
});
return showDate;
};
});
}());
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="AppCtrl">
<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoValidations" ng-app="MyApp">
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
</md-content>
</div>
</body>
</html>
答案 1 :(得分：0)
我发现了如何通过试图在stackoverflow中找到一些早期帖子来禁用它们。
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());
var daysAvailableThisMonth = [1, 10,14,15, 31];
$scope.onlyWeekendsPredicate = function(date) {
var day = date.getDate();
return daysAvailableThisMonth.indexOf(day) > -1;
};
});
/**
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.
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.js"></script>
<!-- Angular Material Library -->
<script>
(function() {
angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function() {
var vm = this;
vm.myDate = new Date();
vm.dateRangeToDisable = [new Date("2018-03-14")];
vm.onlyWeekendsPredicate = function(date) {
var disableDate = false;
angular.forEach(vm.dateRangeToDisable, function(item, index) {
if (item.toDateString() !== date.toDateString()) {
disableDate = true;
}
});
return disableDate;
};
});
}());
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="AppCtrl">
<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoValidations" ng-app="MyApp">
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
</md-content>
</div>
</body>
</html>