在角度材料中禁用使用日期選擇器的特定日期

我試圖禁用日曆中的特定日期，因此用戶無法選擇有問題的日期 - 請參閱https://plnkr.co/edit/PwCLKWPQU0s3habxgUly?p=preview。在角度材料中禁用使用日期選擇器的特定日期

這裏唯一的問題是我只能在將值返回給過濾器時禁用一個日期，而在這種情況下，我想禁用兩個示例日期。我也可以在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]; 
    } 

};

來源

2016-11-23 Richard Ansell

如果你有bookedDates讓說，從數據庫返回到數組像你上面做，你可以使用$過濾器來處理訂單。 Codepen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script> 
 
    <style type="text/css"> 
 
    .datepickerdemo md-content { 
 
     padding-bottom: 200px; 
 
    } 
 
    .datepickerdemo .validation-messages { 
 
     font-size: 11px; 
 
     color: darkred; 
 
     margin: 10px 0 0 25px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body data-ng-app="MyApp"> 
 
    <div data-ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage"> 
 
    <md-content layout-padding=""> 
 
     <div layout-gt-xs="row"> 
 
     <div flex-gt-xs=""> 
 
      <h4>Only weekends within given range are selectable</h4> 
 
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker> 
 
     </div> 
 
     </div> 
 
    </md-content> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    function filterBookings() { 
 
     return function(date, bookedDates) { 
 
     for (var i = 0; i < bookedDates.length; i++) { 
 
      return date.toString() !== bookedDates[i]; 
 
     } 
 
     }; 
 
    } 
 

 
    angular 
 
     .module('MyApp', ['ngMaterial', 'ngMessages']) 
 
     .controller('AppCtrl', function($scope, $filter) { 
 

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

 
     $scope.onlyWeekendsPredicate = function(date) { 
 
      return $filter('filterBookings')(date, bookedDates); 
 

 
     }; 
 

 
     }) 
 
     .filter('filterBookings', filterBookings); 
 
    </script> 
 
</body> 
 

 
</html>

//Update, insert new predicate func. 
$scope.onlyWeekendsPredicate = function(date) { 
    return bookedDates.indexOf(date.toString()) === -1; 
};

來源

2016-11-23 20:44:45 alphapilgrim

嗨再次，感謝您的建議是的，我們將使用外部DB。我試過運行上面的代碼，'filterBookings'無法識別？ –

你是如何包含它的？確保你在控制器中請求了$ filter，所以它在$ ctrl中註冊了$ filter提供者。 – alphapilgrim

沒錯，設法解決了這個問題。不過，日曆中沒有顯示'bookedDates'數組的第二個日期，儘管 –

2天+週末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(); 
     } 
    } 
};

來源

2017-06-19 16:38:32 franfritz

它的工作，你可以使用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>

來源

2017-07-20 15:34:41 Sangeet

在角度材料中禁用使用日期選擇器的特定日期

回答

相關問題