How to disable button in AngularJS?

Question

  $scope.date = moment(currentDate);

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

  function checkDate(){
   if ($scope.date > $scope.date1) {
    return true;
        }
      else{
       return false;
         }
 };

  checkDate(); 




  <button ng-disabled="checkDate()" 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.myFunc = function() {
    $scope.showMe = !$scope.showMe;
    $scope.showtime($scope.timeslot);
  }

i want to disable the button but not hide. now i don't understand what is wrong in code button is not showing in disabled mode and the myFunc() is working now , when the button in disabled mode then no function or say nothing click on button

checkDate() returns a Boolean value. You're not currently using it anywhere sensibly. Also, you can change your checkDate function to simply return $scope.date > $scope.date1;. Don't ever return true or false based on a Boolean condition that is already true or false by definition. — ManoDestra
– ManoDestra, Commented Jun 29, 2016 at 15:52

Navoneel Talukdar · Accepted Answer · 2016-06-29 15:41:45Z

2

checkDate()

must be associated with scope in order to work.

<button ng-disabled="checkDate()" 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>

And in controller you define checkDate

$scope.checkDate = function(){
   if ($scope.date > $scope.date1) {
         return true;
   }
   else{
         return false;
   }
 };

Also make sure moment(currentDate) and moment(currentDate).add(-1, 'days') must return javascript date object in order to make the comparison happen.

answered Jun 29, 2016 at 15:41

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashish Goyal Over a year ago

nothing is happened i used $scope.checkDate in ng-disabled

Navoneel Talukdar Over a year ago

there must be some console error either in your code or moment is not returning the date object.

Ashish Goyal Over a year ago

i checked but no error is seen , i checked the code with console.log() and i find the exact value but nothing happened on button.

Ashish Goyal Over a year ago

you are right it provide me json data but how can i resolve this problem , i have no idea

Deep · Accepted Answer · 2016-06-29 17:10:26Z

0

Updating the answer based on the comment.

if you have 3 button like below with dates associated with those.

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

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

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

you need to declare the function like this in the controller.

var currentDate = new Date();

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

$scope.checkDate = function(buttonDate){


$scope.date = moment(new Date(buttonDate));  


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

   return true;
}
else
{
   return false;
}
}

Check the working plunker here https://plnkr.co/edit/J85Rx0YjhNKj0gYqjhhF?p=preview

Hope this will help you.

edited Jun 29, 2016 at 17:10

answered Jun 29, 2016 at 15:48

Deep

9,7962 gold badges24 silver badges34 bronze badges

6 Comments

Ashish Goyal Over a year ago

i try but nothing effective for me

Deep Over a year ago

check this plunker plnkr.co/edit/gqnLdy7JJYvatMxJn4Q8?p=preview if it helps or if you can provide a plunker/fiddle of your issue.

Ashish Goyal Over a year ago

sir, it shows all button disabled as i added few more buttons, it cannot take the conditions as i described or i wanted that match current date with previous date and disabled buttons which is in previous date

Deep Over a year ago

Could you update this plunker and create the issue. the plunker is right now setting the current date default as the current date but i think you wanted the date to be compared against the date values in the button.

Deep Over a year ago

I have updated the answer , hope this will help you. I assumed few logic like passing the button date to compare.

|

Collectives™ on Stack Overflow

How to disable button in AngularJS?

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related