Javascript 在角度材质中使用日期选择器禁用特定日期_Javascript_Angularjs_Angular Material

Javascript 在角度材质中使用日期选择器禁用特定日期

javascript angularjs angular-material

Javascript 在角度材质中使用日期选择器禁用特定日期,javascript,angularjs,angular-material,Javascript,Angularjs,Angular Material,我正在尝试禁用日历中的特定日期，以便用户无法选择有问题的日期-请参阅这里唯一的问题是，当将值返回到过滤器时，我只能禁用一个日期，而在本例中，有两个示例日期是我想要禁用的。我也可以在return语句中硬编码这两个日期，但是对于我的实际项目，禁用日期的数组是未知的以下是JS： var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()]; $scope.onlyWeekendsP

我正在尝试禁用日历中的特定日期，以便用户无法选择有问题的日期-请参阅

这里唯一的问题是，当将值返回到过滤器时，我只能禁用一个日期，而在本例中，有两个示例日期是我想要禁用的。我也可以在return语句中硬编码这两个日期，但是对于我的实际项目，禁用日期的数组是未知的

以下是JS：

var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];

$scope.onlyWeekendsPredicate = function (date) {
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    var todaysDate = new Date (year, month, day).toString();

    var confirmedBookingDates = [];

    for (var n = 0; n <= bookedDates.length; n++) {
        if (todaysDate != bookedDates[n]) {
            confirmedBookingDates[n] = true;
        }
        return confirmedBookingDates[n];
    }

};

var bookedDates=[新日期（2016,10,25）.toString（），新日期（2016,10,10）.toString（）]；
$scope.onlyWeekendsPredicate=函数（日期）{
var day=date.getDate（）；
var month=date.getMonth（）；
var year=date.getFullYear（）；
var todaysDate=新日期（年、月、日）.toString（）；
var确认记账日期=[]；
对于（var n=0；n如果您有bookedDates，比如说从DB返回到数组中，就像上面所做的那样，您可以使用$filter来处理预订


标题
.datepickerdemo md内容{
垫底：200px；
}
.datepickerdemo.validation消息{
字体大小：11px；
颜色：深色；
利润率：10像素0.25像素；
}
只能选择给定范围内的周末
函数filterBookings（）{
返回函数（日期、预订日期）{
对于（变量i=0；i
alphagrim的两天+周末：
function filterBookings() {
return function(date, bookedDates) {
    var day = date.getDay();
    if(day === 1 || day === 2 || day === 3 || day === 4 || day === 5){
        var sw = 0;
          for(var i =0; i < (bookedDates.length); i++) {
              if(date.toString().trim() === bookedDates[i].toString().trim()){
                sw = 1;
              }
          }
        if(sw==0){
          return date.toString();
        }
    }
};

函数filterBookings（）{
返回函数（日期、预订日期）{
var day=date.getDay（）；
如果（天===1 | |天===2 | |天===3 | |天===4 | |天===5）{
var-sw=0；
对于（变量i=0；i<（bookedDates.length）；i++）{
if（date.toString（）.trim（）==bookedDates[i].toString（）.trim（））{
sw=1；
}
}
如果（sw==0）{
返回日期。toString（）；
}
}
};
其工作原理是，您可以使用php变量动态禁用日期，您可以从数据库绑定此值以获得动态输出
对于禁用日期，请使用！=
符号
只需复制粘贴以下代码并签出即可
    <html lang="en" >
<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">
</head>
<body ng-app="datepickerValidations" ng-cloak>
  <!--
    Your HTML content here
  -->  
 <md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>


  <div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Disable specific date</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
          md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"
          md-date-filter="ctrl.disableSpecificDate"></md-datepicker>
    </div>


  </div>
</md-content>

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

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

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

  this.minDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() - 2,
    this.myDate.getDate()
  );

  this.maxDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() + 2,
    this.myDate.getDate()
  );

  this.disableSpecificDate = function(date) {
    var date= date.getDate()/date.getMonth()/date.getFullYear();
    return date !== 20/6/2017 && date !== 21/6/2017;
  };
});
  </script>

</body>
</html>


禁用特定日期
angular.module（'datepickerValidations'，['ngMaterial'，'ngMessages']）控制器（'AppCtrl'，function（）{
this.myDate=新日期（）；
this.minDate=新日期(
此.myDate.getFullYear（），
此.myDate.getMonth（）-2，
this.myDate.getDate（）
);
this.maxDate=新日期(
此.myDate.getFullYear（），
这个.myDate.getMonth（）+2，
this.myDate.getDate（）
);
this.disableSpecificDate=函数（日期）{
var date=date.getDate（）/date.getMonth（）/date.getFullYear（）；
返回日期！==20/6/2017和日期！==21/6/2017；
};
});
Hi再次感谢您的建议，是的，我们将使用外部数据库。我尝试运行上述代码，但“filterBookings”未被识别？您是如何包含它的？请确保您在控制器中请求$filter，以便它在ctrl中注册$filter提供程序。没错，已设法修复该位。但是，第二个日期是“bookedDates”数组未显示在日历中though@RichardAnsell将更新，不需要$filter。请查看更新。这太棒了-再次感谢！现在从数据库读取也更容易管理