使用角度材料添加使用md-datepicker生成的输入的名称 [英] add name to input generated with md-datepicker from Angular Material

问题描述

我正在使用角度材料中的md-datepicker https://material.angularjs.org/最新/ demo / datepicker 生成带有日期戳的输入。
它正常工作，但我注意到输入没有名称：

这是我的HTML代码：

 < divng-app =angAppng-controller =ScheduleControllerstyle ='padding：40px;'ng-cloak> 
< md-content> 
< md-datepicker ng-model =myDatemd-placeholder =输入日期>< / 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 =ScheduleControllerclass =ng-scope> 
< md-content class =_ md> 
< md-datepicker name =starting_datemd-placeholder =输入日期ng-model =myDateclass =ng-valid ng-isolate-scope ng-valid-mindate ng-valid-maxdate ng-valid-filtered ng-valid-valid-ng ng ng ng-valid-parseng-not-emptytabindex = -  1aria-invalid =falsestyle => 
 
< button ng-transclude =type =buttonclass =md-datepicker-button md-icon-button md-button md-ink-rippleng-click =ctrl .openCalendarPane（$ event）aria-hidden =truetabindex = -  1> 
将MD-图标MD-SVG-SRC = 数据：图像/ SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg == 咏叹调标签= MD-日历 类=MD-日期选择日历图标纳克-scopearia-hidden =true> 
< svg viewBox =0 0 24 24height =100％width =100％xmlns =http://www.w3.org/2000/svgfit =preserAspectRatio = xMidYMid meetfocusable =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-containerstyle => 
< input ng-blur =ctrl.setFocused（false）ng-focus =ctrl.setFocused（true）aria-haspopup =trueclass =md-datepicker-inputplaceholder =输入日期size =11> 
< button ng-transclude =type =buttonclass =md-datepicker-triangle-button md-icon-button md-buttonaria-label =打开日历ng-click = ctrl.openCalendarPane（$ event）md-no-ink => 
< div class =md-datepicker-expand-triangle ng-scope>< / div> 
< / button> 
< / div> 
< / md-datepicker> 
< / md-content> 
< / div> 
  

如何给生成的输入一个名字？

解决方案

这是我该怎么做 - CodePen

标记

 < div ng-controller =AppCtrlstyle =padding：40px; ng-cloak =ng-app =MyApp> 
< md-content> 
< md-datepicker id =myDatePickerng-model =myDatemd-placeholder =输入日期>< / 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）
}）; 
  

I'm using md-datepicker from Angular Material https://material.angularjs.org/latest/demo/datepicker to generate an input with a datepicker. It works properly, but I've noticed the input doesn't have a name:

This is my HTML code:

<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>

This is my Javascript:

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

Note: I've added the correct css and js files needed to get this working.

And this is the generated HTML result:

<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>

How can I give that generated input a name?

解决方案

This is how I would do it - CodePen

Markup

<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")
});

这篇关于使用角度材料添加使用md-datepicker生成的输入的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！