enable and disable buttons according to current date pass in angularjs

Question

i have to make week schedular and i want to disable the buttons according to date i.e if today date pass then previous buttons see image:

here html code:

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

script for show date :

  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();

here for button check condition:

 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;
  }
}

i didn't getting any idea how to make condition to check date automatically

so that all buttons enable only previous buttons disable.

i do hardcoding in buuton condition but i want to eliminate all hard coding.

help me out.

It is not clear where your problem is, can you post i fiddle? — Itsik Mauyhas, Jul 03 '16 at 09:19
i want to disable buttons when date is pass i.e not pressed on previous dates. — Ashish Goyal, Jul 03 '16 at 10:12

score 0 · Answer 1 · answered Jul 03 '16 at 10:32

Don't use ng-disable twice, insteade use a custom 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');
                            }
                        }
                    }
                });

and apply it to your 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>

all you need to do now is create $scope.checkDate

i didn't want to do hard-coding in button section, i want to eliminate this hard-coding — Ashish Goyal, Jul 03 '16 at 10:36
So pass 'this' via disabled-ele, and set the values at run time. — Itsik Mauyhas, Jul 03 '16 at 10:40

score 0 · Answer 2 · answered Jun 22 '18 at 18:10

I would create an array in your scope, or even some sort of "DateService" that contains all the relevant bits needed for each button based on the current date/week you're in. Think of each element in the array as a config for the button.

To generate the current "week" you can use moment to determine the start of the week, and the end of the week, and then just enumerate each day in between to build an array.

$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...
     }
});

Then bind that array to a button template using 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>

enable and disable buttons according to current date pass in angularjs

2 Answers2