根据当前日期传中angularjs

我必须做出星期程序器启用和禁用按钮，我想根据日期，即以禁用按钮，如果今天日通过，则前面的按钮，看到的图像：根据当前日期传中angularjs

这里的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条件下硬编码，但我想消除所有的硬编码。

帮我一把。

来源

2016-07-03 Ashish Goyal

目前还不清楚你的问题在哪里，你可以发布我的小提琴吗？ –

http://codepen.io/anon/pen/RRgNPV?editors=1111 –

我想在日期通过时禁用按钮，即在以前的日期没有按下按钮。 –

不要使用ng-disable两次，insteade使用自定义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-03 10:32:29

我不想在按钮部分做硬编码，我想消除这个硬编码 –

所以通过disabled-ele传递'this'，并在运行时设置这些值。 –

根据当前日期传中angularjs

回答

相关问题