【问题标题】:How to disable weekends in angular material datetimepicker如何在角度材料 datetimepicker 中禁用周末
【发布时间】:2017-09-01 01:26:22
【问题描述】:

我正在使用角度材料 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')];

请帮助我。任何帮助都应该不胜感激。提前致谢。

【问题讨论】:

    标签: angularjs angular-material datetimepicker


    【解决方案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>

    【讨论】:

      【解决方案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
      

      祝你好运。干杯!!

      【讨论】:

        【解决方案3】:

        您应该编写一个返回一年中所有周末和周三的函数,以便将其分配给$scope.dates

        这是一个有用的答案,它可以在一年中的所有星期日找到。你可以根据自己的需要改变它

        Stackoverflow Answer

        【讨论】:

        • 谢谢@salih Senol 这些链接帮助了我。我更改了代码取决于我的要求。我将在这里发布我的代码。
        猜你喜欢
        • 1970-01-01
        • 2018-10-27
        • 1970-01-01
        • 2021-10-31
        • 1970-01-01
        • 2016-12-06
        • 2021-06-17
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多