角材からmd-datepickerで生成された入力に名前を付け加えます

Question

角度材質https://material.angularjs.org/latest/demo/datepickerのmd-datepickerを使用して、日付ピッカーで入力を生成しています。 それが正常に動作しますが、私は入力が名前を持っていない気づいた：

これは私のHTMLコードです：

<div ng-app="angApp" ng-controller="ScheduleController" style='padding: 40px;' ng-cloak> 
    <md-content> 
     <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
    </md-content> 
    </div> 

は、これは私のJavascriptです：

var app = angular.module('angApp', ['ngMaterial']); 
app.controller('ScheduleController', function($scope) { 
    $scope.myDate = new Date(); 
}); 

注：私はこれを得るために必要な正しいCSSとjsファイルを追加しました。

そして、この生成されたHTMLの結果である：

<div style="padding: 40px;" ng-controller="ScheduleController" class="ng-scope"> 
    <md-content class="_md"> 
    <md-datepicker name="starting_date" md-placeholder="Enter date" ng-model="myDate" class="ng-valid ng-isolate-scope ng-valid-mindate ng-valid-maxdate ng-valid-filtered ng-valid-valid ng-touched ng-dirty ng-valid-parse ng-not-empty" tabindex="-1" aria-invalid="false" style=""> 

     <button ng-transclude="" type="button" class="md-datepicker-button md-icon-button md-button md-ink-ripple" ng-click="ctrl.openCalendarPane($event)" aria-hidden="true" tabindex="-1"> 
     <md-icon md-svg-src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg==" aria-label="md-calendar" class="md-datepicker-calendar-icon ng-scope" aria-hidden="true"> 
      <svg viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"> 
      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/> 
      </svg> 
     </md-icon> 
     <div class="md-ripple-container"></div> 
     </button> 

     <div ng-class="{'md-datepicker-focused': ctrl.isFocused}" class="md-datepicker-input-container" style=""> 
     <input ng-blur="ctrl.setFocused(false)" ng-focus="ctrl.setFocused(true)" aria-haspopup="true" class="md-datepicker-input" placeholder="Enter date" size="11"> 
     <button ng-transclude="" type="button" class="md-datepicker-triangle-button md-icon-button md-button" aria-label="Open calendar" ng-click="ctrl.openCalendarPane($event)" md-no-ink=""> 
      <div class="md-datepicker-expand-triangle ng-scope"></div> 
     </button> 
     </div> 
    </md-datepicker> 
    </md-content> 
</div> 

どのように私は名前の入力を生成することを与えることができますか？

Answer 1

これは私がそれを行うだろうかある - CodePen

マークアップ

<div ng-controller="AppCtrl" style="padding: 40px;" ng-cloak="" ng-app="MyApp"> 
    <md-content> 
    <md-datepicker id="myDatePicker" ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
    </md-content> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
.controller('AppCtrl', function($scope, $element) { 
    $scope.myDate = new Date(); 
    var myDatePicker = angular.element($element[0].querySelector('#myDatePicker')); 
    var myDatePickerInputContainer = angular.element(myDatePicker[0].children[1]); 
    var myDatePickerInput = angular.element(myDatePickerInputContainer[0].children[0]); 
    myDatePickerInput.attr("name", "myDatePickerInput"); 
    myDatePickerInput.css("background", "yellow") 
});