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

如何在角度材料中使用md-datepicker實現依賴不可用日期的md-tooltip的最佳方法是什麼？在不可用的日期在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>

來源

2017-01-25 Richard Ansell

除了寫一個自定義日期選擇器，我沒有看到一種方式。 – kuhnroyal

我遇到了同樣的問題。已經沒有發現任何NATIV上下的解決方案，我想實現的自定義MD般的提示用（S）CSS（用於相應的內部MD-曆元）：

.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

來源

2017-12-21 05:26:36

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

回答

相關問題