Unable to add dynamic aria-label value to md-datepicker

user_10378514 0
Viewed 871

I am using md-datepicker: https://material.angularjs.org/latest/demo/datepicker

I am unable to add a dynamic value to the aria-label in the datepicker. It accepts a hard coded value only. You can try the demo here: https://codepen.io/anon/pen/jveJGb

Replace the following js function in the above codepen:

function() {
  this.myDate = new Date();
  this.isOpen = false;
  this.place = "Enter some date";
  this.arialabel = "some label";
});

Replace any one datepicker with below:

<md-datepicker ng-model="ctrl.myDate" md-placeholder="{{ctrl.place}}" aria-label="{{ctrl.arialabel}}"></md-datepicker>

aria-label value loads as empty.

Need help here.

angular-material angularjs wai-aria datepicker javascript
2 Answers

md-datepicker is a directive. when you use this, Angular JS Material date picker will render the custom predifined html code by processing the directive with its attribute. So, it will be responsibility of the directive to consume or omit the attributes in the rendered html. If you want to tweak this code, goto the source code of directive in your local project directory, it will be something like this. Learn about modifying the directive as you require and tweak it as per your requirement.

or else use some jquery selector to manuplate the rendered dom.

user_42262240

md-datepicker directive has not aria-label attribute. You want to set label using below code.

  <h4>{{ctrl.arialabel}}</h4> 

  <md-datepicker ng-model="ctrl.myDate" md-placeholder="{{ctrl.place}}"> 
  </md-datepicker>

h4 tag is used for dispaling label.

user_35286840
Related