Question

使用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>

Answer 1

我遇到了同样的问题。在没有找到任何nativ-ish解决方案的情况下，我实现了带（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

测试工作演示

在不可用日期在md-datepicker中显示md-tooltip

1 个答案: