將名稱添加到使用角度材質的md-datepicker生成的輸入

Question

我正在使用來自Angular Material 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") 
});