如何在 angular material datetimepicker 中禁用周末

Question

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

我想在 angular material 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">

我可以禁用特定日期看下面的代码

$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')];

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

Answer 1

你不能直接禁用它们你需要像下面这样的一些过滤器来禁用它们

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>

Answer 2

你应该写一个 returns 一年中所有周末和星期三的函数，这样它就可以被分配给 $scope.dates

这是它在一年中的所有星期日找到的有用答案。您可以根据需要更改它

Whosebug Answer

Answer 3

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

此代码将禁用星期三日期长达 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

祝你好运。干杯！！

如何在 angular material datetimepicker 中禁用周末

How to disable weekends in angular material datetimepicker

datetimepicker

angularjs

angular-material