在 Angular Material 中使用 md-datepicker 实现依赖于不可用日期的 md-tooltip 的最佳方法是什么？
以下代码片段显示了两个以红色禁用的自定义日期，我需要在鼠标悬停时显示一个工具提示，以显示自定义消息，即“已预订”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Material DatePicker Example</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;
}
.md-default-theme .md-calendar-date-disabled, .md-calendar-date-disabled, .md-default-theme .md-calendar-month-label-disabled, .md-calendar-month-label-disabled {
color: red;
font-weight: bold;
}
</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>Two dates are not available</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
md-date-filter="onlyWeekendsPredicate">
</md-datepicker>
</div>
</div>
</md-content>
</div>
<script type="text/javascript">
angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function ($scope) {
var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];
$scope.onlyWeekendsPredicate = function (date) {
return bookedDates.indexOf(date.toString()) == -1;
};
})
</script>
</body>
</html>
最佳答案
我也遇到过同样的问题。由于没有找到任何原生解决方案，我使用 (S)CSS 实现了自定义的类似 md 的工具提示(用于相应的内部 md-calendar 元素):
.md-datepicker-calendar-pane{
.md-datepicker-calendar{
md-calendar{
md-calendar-month{
.md-calendar-date.md-calendar-date-disabled:hover{
text-decoration: underline;
&::after{
content: 'Date is out of range';
position: absolute;
font-size: 10px;
padding: 5px;
background-color: dimgray;
color: white;
opacity: 0.8;
border-radius: 5px;
}
}
}
}
}
}
您可以在 this pen 测试工作演示
关于javascript - 在 md-datepicker 中显示不可用日期的 md-tooltip，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41854353/