md-datepickerのmd-datepickerを利用不可能な日付に表示

角度材料でmd-datepickerを使用すると、利用できない日付に依存するmd-ツールチップを実装する最良の方法はありますか？md-datepickerのmd-datepickerを利用不可能な日付に表示

次のスニペットでは、赤で無効になっている2つのカスタム日付が表示されています。これはマウスのホバー上にカスタムメッセージ（「予約済み」）を表示するツールチップを表示する必要があります。

<!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

私は同じ問題に直面しました。あなたが働いてデモをテストすることができます

.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; 
        } 
       } 
      } 
     } 
    } 
}

：任意のnativっぽい解決策を見つけていないた、私は（内部MD-カレンダーの要素を対応するため）（S）CSSでカスタムMD-のようなツールチップを実装するのですthis pen

出典

2017-12-21 05:26:36

md-datepickerのmd-datepickerを利用不可能な日付に表示

答えて

関連する問題