将名称添加到使用 md-datepicker 从 Angular Material 生成的输入中 [英] add name to input generated with md-datepicker from Angular Material

问题描述

我正在使用来自 Angular Material 的 md-datepicker https://material.angularjs.org/latest/demo/datepicker 使用日期选择器生成输入.它工作正常，但我注意到输入没有名称:

这是我的 HTML 代码:

<div ng-app="angApp" ng-controller="ScheduleController" style='padding: 40px;'ng-斗篷><md-内容><md-datepicker ng-model="myDate" md-placeholder="输入日期"></md-datepicker></md-content>

这是我的 Javascript:

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

注意:我已经添加了使其正常工作所需的正确 css 和 js 文件.

这是生成的 HTML 结果:

<md-content class="_md"><md-datepicker name="starting_date" md-placeholder="输入日期" ng-model="myDate" class="ng-valid ng-isolate-scope ng-valid-mindate ng-valid-maxdate ng-valid-过滤 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)" 咏叹调-hidden="true" tabindex="-1">< MD-图标MD-SVG-SRC = 数据:图像/SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg ==" 咏叹调标签= MD-日历" 类= MD-日期选择日历图标NG-范围" 咏叹调-隐藏=真"><svg viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" fit=""preserveAspectRatio="xMidYMid meet"可聚焦=假"><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-2V5-2-2-2-2-2-2-2-2-2-2-2-2-z16H5V8h14v11zM7 10h5v5H7z"/></svg></md-icon><div class="md-ripple-container"></div><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="输入日期" 大小="11"><button ng-transclude="" type="button" class="md-datepicker-triangle-button md-icon-button md-button" aria-label="打开日历" ng-click="ctrl.openCalendarPane($event)" md-no-ink=""><div class="md-datepicker-expand-triangle ng-scope"></div>
</md-datepicker></md-content>

如何为生成的输入命名?

解决方案

我会这样做 - 代码笔

标记

<md-内容><md-datepicker id="myDatePicker" ng-model="myDate" md-placeholder="输入日期"></md-datepicker></md-content>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($scope, $element) {$scope.myDate = 新日期();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("背景", "黄色")});

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 从 Angular Material 生成的输入中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！