0

我必须安排一周，我想根据日期禁用按钮，即如果今天日期过去，那么以前的按钮参见图像：

在此处输入图像描述

这里的html代码：

    <div id="container" style=" width: 861px; margin-top: 2em; margin-  left: 5em;">


        <button ng-click="previousWeek(weekDays[0])" style="margin-right: 3em;">Previous</button>

        <div ng-repeat="day in weekDays track by day" style="  display: -webkit-inline-box;  font-size: 16px;    width: 95px; ">
        {{day}}
        </div>

        <button ng-click="nextWeek(weekDays[6])" style="    margin-left: 1em;">Next</button>


    </div>


  <button ng-disabled="checkDate('2016-06-27')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate('2016-06-28')" ng-disabled="checkDate()" ng-click="myFunc()" style="margin-left:8px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate('2016-06-29')"  ng-click="myFunc()" style="margin-left:8px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button  ng-disabled="checkDate('2016-06-30')"  ng-click="myFunc()" style="margin-left:4px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br> <b>5:00PM-8:00PM</b></button>

  <button ng-disabled="checkDate(2016-07-02)"  ng-click="myFunc()" style="margin-left:12em; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> </button>

演出日期脚本：

  var currentDate = moment();


  $scope.nextWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").add(1, 'days'));
      };
        // console.log($scope.weekDays);
  $scope.previousWeek = function(dt) {
        $scope.weekDays = fnWeekDays(moment(dt, "MMMM Do,dddd").subtract(2, 'days'));
      };
   var fnWeekDays = function(dt) {
      var currentDate = dt;
      var weekStart  = currentDate.clone().startOf('week');
      var weekEnd = currentDate.clone().endOf('week');
        // console.log(weekStart);
      var days = [];

      for (var i = 1; i <= 7; i++) {

          days.push(moment(weekStart).add(i, 'days').format("MMM Do dddd"));

          };

      return days;
    };



    function getdate()  {                            
     var currentDate = moment();

      // console.log(moment(currentDate).add(-1, 'days'));
      // console.log(moment(currentDate));

    $scope.weekDays = fnWeekDays(currentDate);
    $scope.nextWeek(currentDate);
    $scope.previousWeek(currentDate); 

              // console.log(moment($scope.weekDays).add(-1, 'days'));

    $scope.days =   fnWeekDays(currentDate);
    return $scope.days;
 };

 getdate();

这里是按钮检查条件：

 var currentDate = new Date();

$scope.date1 = moment(currentDate).add(-1, 'days');

$scope.checkDate = function(buttonDate){


  $scope.date = moment(new Date(buttonDate));               //print button dates
  // console.log($scope.date);

  if ($scope.date < $scope.date1) {

     return true;
  }
  else
  {
     return false;
  }
}

我不知道如何设置条件来自动检查日期

以便所有按钮启用仅先前的按钮禁用。

我在 buuton 条件下进行硬编码，但我想消除所有硬编码。

帮帮我。

4

2 回答 2

0

我会在您的范围内创建一个数组，甚至是某种“DateService”，其中包含基于您所在的当前日期/周的每个按钮所需的所有相关位。将数组中的每个元素视为一个配置按钮。

要生成当前的“周”，您可以使用 moment 来确定一周的开始和一周的结束，然后只需枚举其间的每一天来构建一个数组。

$scope.weekDays = //TODO: find start/end of week, and build a list of days for current week;
$scope.dateButtons = weekDays.map(function(day){
     return
     {
          date: day,
          isEnabled: day < moment(currentDate).add(-1, 'days'),
          func: function() { /* do stuff on click? */},
          etc...
     }
});

然后使用 ng-repeat 将该数组绑定到按钮模板。

<button ng-repeat="date in dateButtons" ng-disabled="!date.isEnabled" ng-click="date.func()"><strong>{{date.startTime}}</strong> <br> <b>{{date.endTime}}</b></button>
于 2018-06-22T18:10:43.523 回答
0

不要使用ng-disable两次，而是使用自定义directive：

.directive('disabledEle', function() {
                    return {
                        restrict: 'EA',
                        link: function(scope, element, attrs) {
                            //create a function that check if dates pass - checkDate                            
                            if($scope.checkDate(element)) {
                                element.attr('disabled', 'disabled');
                            } else {
                                element.removeAttr('disabled');
                            }
                        }
                    }
                });

并将其应用于您的 HTML：

<button disabled-ele="('2016-06-27')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>

你现在需要做的就是创造$scope.checkDate

于 2016-07-03T10:32:29.700 回答