如何在角材料datetimepicker中禁用周末

I am using angular material datetimepicker https://github.com/logbon72/angular-material-datetimepicker

我正在使用角度材料datetimepicker https://github.com/logbon72/angular-material-datetimepicker

I want to disable weekends and wednesday dates in angular material datetimepicker

我想在角材料datetimepicker中禁用周末和周三日期

<input time="false" date="true" mdc-datetime-picker type="text" id="date" placeholder="Date" ng-model="date" min-date="minDate" max-date="maxDate" disable-dates="dates">

I can disable specific dates look below code

我可以禁用具体日期看下面的代码

$scope.dates = [new Date('2017-04-14T00:00:00'), new Date('2017-04-20T00:00:00'),
        new Date('2017-04-24T00:00:00'), new Date('2017-04-25T00:00:00'), new Date('2017-04-03T00:00:00'),
        new Date('2017-04-30T00:00:00')];

Please help me. Any help should be appreciated. Thanks in advance.

请帮帮我。任何帮助应该得到赞赏。提前致谢。

3 个解决方案

#1

you cant directly disable them you need some kind of filter things like below to make them disabled

你不能直接禁用它们你需要某种过滤器，如下所示，以使它们被禁用

angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
  $scope.myDate = new Date();
  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 1 || day === 2 || day === 3 || day === 4 || day === 5;
 
  };
});

<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
    
    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    
 
   
    <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Only weekends disabled</h4>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
    </div>
   
  </div>
  </div>
  </body>
</html>

#2

Special thanks to Salih. I got answer after a long workout. It may help others. Here is my code.

特别感谢Salih。经过长时间的锻炼，我得到了答案。它可能会帮助别人。这是我的代码。

This code will disable Wednesday dates upto 1 year

此代码将禁用星期三的日期长达1年

$scope.dates = [];

function getDates(year, month, day) { 

           var date = new Date(year, month, day);

            while (date.getDay() != 3) {  // 3 refers to Wednesday and 0 refers to Sunday
                date.setDate(date.getDate() + 1);
            }

            for (var i = 0; i < 52; ++i) { //52 refers to total weeks in a year

                var m = date.getMonth() + 1;
                var d = date.getDate(); 

                if(m === 12 ) {  // if month is December

                    var year = date.getFullYear()+1; // increment to next year current year is 2017 we increment to 2018

                    var lastyear = year - 1;    
                    var setdate = lastyear + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)+'T00:00:00';
                    var finaldate = new Date(setdate);
                    $scope.dates.push(finaldate); // December dates pushing to array

                } else {

                    var setdate = year + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)+'T00:00:00';
                    var finaldate = new Date(setdate);
                    $scope.dates.push(finaldate); //all dates pushing to array except December

                }

                date.setDate(date.getDate() + 7);
            }

}

var todaydate = new Date();
var getdate = getDates(todaydate.getFullYear(), todaydate.getMonth(), todaydate.getDate()); // call function
console.log($scope.dates); // here is your result

Good luck. Cheers!!

祝你好运。干杯！！

#3

You should write a function that returns all weekends and wednesday in a year so that it can be assigined to $scope.dates

你应该编写一个函数来返回一年中的所有周末和周三，以便它可以被赋予$ scope.dates

Here is a helpfull answer it finds all sundays in a year. You may change it according to your needs

这是一个有用的答案，它发现一年中的所有星期日。您可以根据需要进行更改

* Answer

*答案

#1