Bill_Data23 Bill_Data23 - 4 months ago 152
AngularJS Question

How to enabled/disabled angular-material datepicker from the controller in AngularJS

How can I enabled/disabled angular-material datepicker from the controller I know that you can disabled the datepicker like this

<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
, if I do that the datepicker appears disabled and that's good but I need to be able to enable it again after the user press a select option, I try using
ng-disable
like this

<div class="form-group">
<label>Delivery date:</label>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
md-max-date="maxDate"
md-min-date="minDate"
md-date-filter="myFilter"
ng-disabled="enabledDisableDate">
</md-datepicker>
</div>


but it didn't work.

The only way that I managed to disable the datepicker was like this

`<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>`


but I need to be able to enable it again from the controller after the user press a select option from a select.

EDIT
I tried
ng-disabled
directive like I showed at the begin of the question

in my controller

$scope.myDate = new Date();
$scope.enabledDisabledFunction = function (id)
{
$scope.enabledDisableDate = false;
}


but it didn't work.

I think that it's because I initialize the datepicker in my controller like this
$scope.myDate = new Date();
after calling the function, but I not sure if this could be the problem

Answer

Use ng-disabled directive. ngDisabled

Works great for me, please provide your code, maybe you mistyped something.

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
    $scope.disabled = true;
});
<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">

<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-route.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>
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>

<div ng-controller="AppCtrl" style="padding: 40px;" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <label>
    <input type="checkbox" ng-model="disabled" /> Disabled
  </label>
  <hr />
  <md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-disabled="disabled"></md-datepicker>
</div>