Question

我正在使用Angular Material https://material.angularjs.org/latest/demo/datepicker中的md-datepicker来生成带有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")
});

将名称添加到使用Angular Material的md-datepicker生成的输入中

1 个答案: