带有 md 菜单的 md 日期选择器答案

【问题标题】：md-date-picker with md-menu带有 md 菜单的 md 日期选择器
【发布时间】：2016-02-15 07:58:39
【问题描述】：

我在 md-menu 中有一个 md-date-picker，但是当我点击 datepicker 时，md-menu 会关闭。这是codepen。它与 ng-material 的 bug 有关。有什么办法可以解决这个问题？

HTML：

<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">

  <div class="menu-demo-container" layout-align="center center" layout="column">
    <h2 class="md-title">Month Select</h2>
    <p>Select a month by clicking the input</p>
    <md-menu>

      <input md-menu-origin="" aria-label="Open phone interactions menu" ng-focus="ctrl.openMenu($mdOpenMenu, $event)" ng-model="ctrl.selectedMonth">
      <md-menu-content width="4" ng-click="$event.stopPropagation()">
<md-datepicker ng-model="dateFilter" md-placeholder="Till date" md-min-date="dateFilter.fromDate"></md-datepicker>
      </md-menu-content>
    </md-menu>
  </div>
</div>

JS：

angular
  .module('MyApp')
  .controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {
    var originatorEv;

    this.openMenu = function($mdOpenMenu, ev) {
      originatorEv = ev;

          $mdOpenMenu(ev);
        };

        this.setMonth = function(val) {
          this.month = val;
          this.setSelectedMonth();
        };

        this.notificationsEnabled = true;
        this.toggleNotifications = function() {
          this.notificationsEnabled = !this.notificationsEnabled;
        };

        this.nextYear = function() {
          this.year++;
          this.setSelectedMonth();

        };

        this.preYear = function() {
          this.year = this.year - 1;
          this.setSelectedMonth();
        };

      }).directive('stopEvent', function() {
        return {
          restrict: 'A',
          link: function(scope, element, attr) {
            if (attr && attr.stopEvent)
              element.bind(attr.stopEvent, function(e) {
                e.stopPropagation();
              });
          }
        };
      });

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

我找到了一个可行但不是最佳答案的解决方案。

HTML:
<md-datepicker id="myDatePicker"
    ng-model="dateFilter" 
    md-placeholder="Till date" 
    md-min-date="dateFilter.fromDate">
</md-datepicker>

JS:
function setupDateButton()
{
    var dateButtonFix = document.getElementById("myDatePicker").children;
    for (var i = 0; i < dateButtonFix.length; i++)
    {
        if (dateButtonFix[i].tagName == 'BUTTON' || dateButtonFix[i].tagName == 'DIV')
        {
            if (dateButtonFix[i].tagName == 'DIV')
            {
                var child2 = dateButtonFix[i].children;
                for (var j = 0; j < child2.length; j++)
                {                               
                    if (child2[j].tagName == 'BUTTON')
                    {
                        child2[1].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
                    }
                }
             }
             else
                 dateButtonFix[0].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
         }
    }    
}    
setupDateButton();

我确信有更好的方法可以做到这一点，但就目前而言，它有效。

【讨论】：

【解决方案2】：

今天我遇到了同样的问题，我创建了一个类限制指令来解决这个问题。

这是我的指令代码：

const TRUE = 'true';
const PREVENT_CLOSE = 'md-prevent-menu-close';

class CalendarBtnFixDirective {
  constructor() {
    this.restrict = 'C';
    this.require = '^^mdDatepicker'
  }

  link(scope, element, attrs, datePickerCtrl) {
    const nativeElement = element[0];
    const preventMenuClose = datePickerCtrl.$attrs.mdPreventMenuClose;

    if ([TRUE, PREVENT_CLOSE].indexOf(preventMenuClose) !== -1) {
      nativeElement.setAttribute(PREVENT_CLOSE, PREVENT_CLOSE);
    }
  }
}

export const MdCalendarFixModule = angular
  .module('md.calendar.fix.module', [])
  .directive('mdDatepickerTriangleButton', () => new CalendarBtnFixDirective())
  .name;

现在您可以在 md-datepicker 中使用 md-prevent-menu-close 属性

【讨论】：

【解决方案3】：

将 md-prevent-menu-close="true" 添加到按钮或图标。这将阻止菜单关闭。 https://material.angularjs.org/1.0.3/api/directive/mdMenu

【讨论】：