Question

我正在使用角度材料datetimepicker https://github.com/logbon72/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">

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

$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

你无法直接禁用它们，你需要某种过滤器，如下所示，以禁用它们

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

特别感谢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

祝你好运。干杯!!

Answer 3

你应该编写一个函数来返回一年中的所有周末和周三，以便可以将其指定为$scope.dates

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

Stackoverflow Answer

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

3 个答案: