Можем ли мы добавить цвет к определенным датам в угловом материале md-calendar? - PullRequest
Новая
       1

Можем ли мы добавить цвет к определенным датам в угловом материале md-calendar?

0 голосов
/ 12 декабря 2018

Я хотел добавить цвет к определенным датам для md-calandar, например {17-12-2018,20-12-2018,21-12-2018} красным цветом и {18-12-2018,23-12-2018} зеленого цвета и т. Д. Возможно ли использование дизайна материалов в AngularJS?

1 Ответ

0 голосов
/ 12 декабря 2018

Я что-то пробовал, но я не дошел до конечного результата - я все еще отправляю свой код, просто немного терпения, и я думаю, вы получите это сами;) 

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <link href='style.css' />
  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>

<body ng-app="datepickerValidations" ng-cloak>
  <!--
    Your HTML content here
  -->  
  <style>

   .red .md-calendar-date-selection-indicator{
  color: red;
}
  .green .md-calendar-date-selection-indicator{
  color: green;
}

</style>
 <div ng-controller="AppCtrl as vm" >


<div>
<div ng-class="{red:value1}">
      <md-calendar
       ng-model="vm.myDate" md-date-filter="vm.onlyWeekendsPredicate"></md-datepicker>

</div>
</div>
<div>
<div ng-class="{green:value2}">
      <md-calendar
       ng-model="vm.myDate" md-date-filter="vm.onlyWeekendsPredicate2"></md-datepicker>

</div>
</div>
</div>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    angular.module('datepickerValidations', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
      var vm = this;
     vm.myDate = new Date();
     $scope.today = vm.myDate;
    $scope.value1 = false;

   vm.onlyWeekendsPredicate = function(date) {
    var date= date.getDate()/date.getMonth()/date.getFullYear();
    if( date === 17/11/2018 ||  date === 20/11/2018 ||  date === 21/11/2018){
       return (
         date,
         $scope.value2 = true
       )  
    } 
};
 vm.onlyWeekendsPredicate2 = function(date) {
    var date= date.getDate()/date.getMonth()/date.getFullYear();
    if (date === 18/11/2018 ||  date === 23/11/2018){
      return (
        date,
        $scope.value1 = true
      )
    } 
};

});
  </script>

</body>
</html>

Посмотрите на ng-style и попробуйте изменить класс из функции filter.Плункер: http://next.plnkr.co/edit/Zlk6yzXneAIsfG19

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...