【发布时间】：2018-03-15 08:11:54
【问题描述】：
<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 谷歌公司。保留所有权利。 此源代码的使用受 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>
【问题讨论】：
-
分享要禁用的日期范围/日期
标签： angularjs datepicker angular-material