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

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.

2 Answers
2

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.

md-datepicker

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

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

md-datepicker

aria-label

<h4>ctrl.arialabel</h4>

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


h4 tag is used for dispaling label.

h4

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy